easyui treegrid的使用示例

一、前端：

 <div id="tbList" fit="true"></div>

 $(function () {
     $("#tbList").treegrid({
         url: "/Action/MenuIndex/",
         method: 'post',
         title: '菜单列表',
         idField: 'Id',
         treeField: 'Name',
         iconCls: 'ext-icon-application_side_tree',
         rownumbers: true,
         animate: true,
         fitColumns: true,
         resizable: true,
         frozenColumns: [[
             { title: '菜单名称', field: 'Name', width: 200 }
         ]],
         columns: [[
             { title: '排序', field: 'DisOrder', width: 40 },
             { title: '区域名', field: 'AreaName', width: 80},
             { title: '控制器名', field: 'ControllerName', width: 80},
             { title: 'Action方法名', field: 'ActionName', width: 80 },
             {
                 title: 'FormMethod', field: '请求方式', width: 80,
                 formatter: function (value, row, index) {
                     return new Object(row["FormMethodDictionary"]).Name;
                 }
             },
             {
                 title: 'OperationType', field: '操作类型', width: 80,
                 formatter: function (value, row, index) {
                     return new Object(row["OperationTypeDictionary"]).Name;
                 }
             },
             {
                 field: 'IsShow', title: '显示', width: 25, align: 'center', formatter: function (colData) {
                     return colData ? "√" : "X";
                 }
             },
             {
                 field: 'IsLink', title: '链接', width: 25, align: 'center', formatter: function (colData) {
                     return colData ? "√" : "X";
                 }
             },
             { title: '备注', field: 'Remark', width: 150 },
             { title: 'ParentId', field: 'ParentId', hidden: true }
         ]],
         toolbar: [{
             text: "添加",
             iconCls: 'icon-add',
             handler: add
         }, '-', {
             text: "修改",
             iconCls: 'icon-edit',
             handler: modify
         }, '-', {
             text: "删除",
             iconCls: 'icon-remove',
             handler: remove
         }]      

     });
 });

二、后端：

 public ActionResult MenuIndex(FormCollection form)
 {
     //取从数据字典中取中Menu对应的ID号
     var dic = _dictionaryService.Single(o => o.Name == "MENU" && o.IsDeleted == false);
     var menuId = dic.Id;

     //查询所有菜单信息
     var menus = _actionService.Where(o => o.IsDeleted == false && o.OperationType == menuId && o.IsShow == true, o => o.DisOrder, true, "FormMethodDictionary", "OperationTypeDictionary").ToList();

     //构造TreeGrid的数据
     RSCC.Model.PageData<ActionViewModel> treegrids = new RSCC.Model.PageData<ActionViewModel>();
     treegrids.total = menus.Count();
     treegrids.rows = menus.Select(o => o.ToViewModel()).ToList();

     //转化为JSON格式
     var strJson = operationContext.ToJson(treegrids);
     return Content(strJson);

 } 

三、注意事项：

对应的ViewModel中必须有 _parentId 和 state 属性，iconCls 可选。

四、实现效果如下：