我有以下html代码:
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').treegrid({
iconCls:'icon-save',
width:1500,
height:350,
nowrap: false,
rownumbers: true,
animate:true,
collapsible:true,
url:'jsondata.jsp',
idField:'job',
treeField:'job',
columns:[[
{field:'job',title:'Job',width:200,
formatter:function(value){
return '<span style="color:red">'+value+'</span>';
}
},
{field:'desc',title:'Description',width:250},
{field:'start_date',title:'Start date',width:150,rowspan:2},
{field:'end_date',title:'End Date',width:250,rowspan:2},
{field:'progress',title:'Progress',width:300,rowspan:2,
formatter:function(value){
alert(value);
if (value){
var s = '<div style="width:100%;background:#fff;border:1px solid #ccc">' +
'<div style="width:' + value + '%;background:red">' + value + '%' + '</div>'
'</div>';
alert(s);
return s;
} else {
return '';
}
}
}
]],
onBeforeLoad:function(row,param){
if (row){
alert("subdata.json called");
$(this).treegrid('options').url = 'jsondata.jsp';
} else {
alert("data.json called");
$(this).treegrid('options').url = 'jsondata.jsp';
}
},
onContextMenu: function(e,row){
e.preventDefault();
$(this).treegrid('unselectAll');
$(this).treegrid('select', row.job);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
});
function reload(){
var node = $('#test').treegrid('getSelected');
if (node){
$('#test').treegrid('reload', node.job);
} else {
$('#test').treegrid('reload');
}
}
function collapse(){
var node = $('#test').treegrid('getSelected');
if (node){
$('#test').treegrid('collapse', node.job);
}
}
function expand(){
var node = $('#test').treegrid('getSelected');
if (node){
$('#test').treegrid('expand', node.job);
}
}
function collapseAll(){
var node = $('#test').treegrid('getSelected');
if (node){
$('#test').treegrid('collapseAll', node.job);
} else {
$('#test').treegrid('collapseAll');
}
}
function expandAll(){
var node = $('#test').treegrid('getSelected');
if (node){
$('#test').treegrid('expandAll', node.job);
} else {
$('#test').treegrid('expandAll');
}
}
var jobIndex = 1000;
function append(){
jobIndex++;
var data = [{
job: 'job'+jobIndex,
desc: 'desc'+jobIndex,
start_date: '12/28/2012',
end_date: '12/30/2012',
progress: '80'
}];
var node = $('#test').treegrid('getSelected');
$('#test').treegrid('append', {
parent: (node?node.job:null),
data: data
});
}
function remove(){
var node = $('#test').treegrid('getSelected');
if (node){
$('#test').treegrid('remove', node.job);
}
}
</script>
<div style="margin:10px 0;">
<a href="#" onclick="reload()">Reload</a>
<a href="#" onclick="collapse()">Collapse</a>
<a href="#" onclick="expand()">Expand</a>
<a href="#" onclick="collapseAll()">CollapseAll</a>
<a href="#" onclick="expandAll()">ExpandAll</a>
<a href="#" onclick="append()">Append</a>
</div>
<table id="test"></table>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()">Append</div>
<div onclick="remove()">Remove</div>
</div>
当我直接运行这个文件时,它运行良好,即它调用 jsondata.jsp 文件,我从中返回 json 数据。
但是当我使用mapping.findForward通过struts动作调用它时,它只显示超链接(重新加载,折叠..)并且不调用$(function(){}。怎么办?