easyui treegrid动态加载节点
最近在做一个权限管理系统，需要有一个菜单的管理，菜单的数据结构是自关联无限极的一对多关系。在列表管理页面决定选择用easyui的treegrid插件。考虑到其无限层级关系，若要一次性拿出所有数据那需要在mysql中写函数跟存储过程，需要有临时表的存在，这样会相对降低效率，所以选择用动态异步加载的方式请求数据
首先来看一下效果图（第一次加载的结果页面）：
对于treegrid的使用我们可以参考官方的api ： http://www.zi-han.net/case/easyui/datagrid&tree.html#treegrid
其中动态加载的关键方法为：onBeforeExpand ， 次方法为节点打开前触发的事件，我们可以在其中进行子节点的加载。
具体代码为：
$(function() {
$("#menuTree")
.treegrid(
{
url : "${ctx}/menu/getFirstData",//首次查询路径
idField : 'id',
treeField : 'name',
parentField : 'menuid',
rownumbers : true,
queryParams : {
"id" : "-1"
},//首次查询参数
columns : [ [ {
field : "name",
title : "名称",
width : 200
}, {
field : "description",
title : "描述",
width : 300
}, {
field : "createtime",
title : "创建时间",
width : 200
}, {
field : "icon",
title : "图标地址",
width : 300
}, {
field : "linkurl",
title : "链接",
width : 300
} ] ],
onBeforeExpand : function(row) {
// 此处就是异步加载地所在
if (row) {
$(this).treegrid('options').url = '${ctx}/menu/getSecondData?id='
+ row.id;
}
return true;
},
toolbar : [ {
id : 'addLeafBtn',
text : '添加菜单',
iconCls : 'icon-add',
handler : function() {
addMenu();
}
},'-', {
id : 'editBtn',
text : '修改',
iconCls : 'icon-edit',
handler : function() {
$('#btnsave').linkbutton('enable');
alert('cut')
}
}, '-', {
id : 'deleteBtn',
text : '删除',
disabled : true,
iconCls : 'icon-save',
handler : function() {
$('#btnsave').linkbutton('disable');
alert('save');
}
} ]
});
});
这是我的model对象（省略get set方法）：
public class SsmMenu { private Integer id;
private String name;
private String icon;
private String createtime;
private Integer creator;
private String linkurl;
private Integer status;
private Integer menulevel;
private Integer menuid;
private Integer sort;
private String description;
private String state ; //closed:表示有子节点 open:表示没有子节点
private List<SsmMenu> children ;}
{
"rows": [
{
"children": [
{
"createtime": "2012-12-12 08:22:29",
"description": "系统",
"icon": "www.baidu.com",
"id": 1,
"linkurl": "www.baidu.com",
"menuid": -1,
"menulevel": 1,
"name": "系统管理",
"sort": 1,
"state": "closed",
"status": 1
},
{
"createtime": "2012-12-12 03:22:22",
"description": "用户",
"icon": "www.baidu.com",
"id": 2,
"linkurl": "www.baidu.com",
"menuid": -1,
"menulevel": 1,
"name": "用户管理",
"sort": 2,
"state": "open",
"status": 1
}
],
"createtime": "2012-12-12 08:22:29",
"description": "菜单",
"icon": "www.baidu.com",
"id": -1,
"linkurl": "www.baidu.com",
"name": "菜单分类",
"state": "open"
}
],
"total": 10
}
其中state是最重要的参数，若该对象中有children集合，则state表示是否展开节点，“closed”表示不展开，“open”表示展开；若该对象中无children集合则表示是否为子节点，“open”表示是子节点，“closed”表示为父节点；
接下来我们看点击展开节点时请求getSecondData返回的json数据格式
[
{
"createtime": "2012-12-12",
"description": "菜单",
"icon": "www.baidu.com",
"id": 3,
"linkurl": "www.baidu.com",
"menuid": 1,
"menulevel": 1,
"name": "菜单管理",
"sort": 1,
"state": "closed",
"status": 1
}
]注意它返回的是一个json数组