TreeGrid是一种DHTML控件,其完全使用JavaScript语言编写,用以在HTML页面上展示具有层次结构的数据项,其核心技术为多叉树。例如
$('#tt').treegrid({
nowrap: false,
rownumbers: true,
animate:true,
collapsible:true,
loadMsg:'数据加载中……',
url:'getRooturl',
onBeforeLoad:function(row,param){
// 此处就是异步加载地所在
if (row){
$(this).treegrid('options').url = '${getSecondRooturl}?testId='+row.testId;
} else {
$(this).treegrid('options').url = '${getRooturl}';
}
},
onClickRow:function(){
/**
** 如果是新建或者修改,以及删除,则清除查询form表单数据
**/
$('#materialSearch').form('clear');
},
idField:'id',
treeField:'name',
frozenColumns:[[
{title:'名称',field:'name',width:250}
]],
columns:[[
{
field:'desc',
title:'描述',
align: 'center',
width:120
},{
field:'url',
title:'地址',
width:300
},{
field:'imgurl',
title:'图标',
align: 'center',
width:40,
formatter:function(value,row,index){
var e = '<img src="' + value + '" width="20" height="20" />';
return e;
}
},{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '<a href="editurl?id='+row.id+'" )>编辑</a> ';
return e;
}
}
]],
onLoadSuccess: function () { $('#tt').treegrid('collapseAll')}
});
easyui treegrid使用时需注意:
1、必须要有根节点;
2、父节点装载的数据格式和子节点装载的数据格式 是不一样的。
父节点需要total和rows 而子节点装载的时候和tree的数据格式相同。
3.
生成的json对象中必须包含state属性值为“closed”/“open”,
closed:表示有子节点。
open:表示没有子节点。
如果为根节点则不能有_parentId字段,如果为子节点则必须包含_parentId字段。