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 ;}

这个控件使用的重点在于后台返回json数据的格式，首先我们来看第一次加载getFirstData后的json数据：

{
    "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数组