最近在做一個許可權管理系統，需要有一個選單的管理，選單的資料結構是自關聯無限極的一對多關係。在列表管理頁面決定選擇用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
}

接下來我們看點選展開節點時請求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
    }
]