easyui treegrid的使用示例

一、前端：

 1 <div id="tbList" fit="true"></div>
 2
 3 $(function () {
 4     $("#tbList").treegrid({
 5         url: "/Action/MenuIndex/",
 6         method: ‘post‘,
 7         title: ‘菜单列表‘,
 8         idField: ‘Id‘,
 9         treeField: ‘Name‘,
10         iconCls: ‘ext-icon-application_side_tree‘,
11         rownumbers: true,
12         animate: true,
13         fitColumns: true,
14         resizable: true,
15         frozenColumns: [[
16             { title: ‘菜单名称‘, field: ‘Name‘, width: 200 }
17         ]],
18         columns: [[
19             { title: ‘排序‘, field: ‘DisOrder‘, width: 40 },
20             { title: ‘区域名‘, field: ‘AreaName‘, width: 80},
21             { title: ‘控制器名‘, field: ‘ControllerName‘, width: 80},
22             { title: ‘Action方法名‘, field: ‘ActionName‘, width: 80 },
23             {
24                 title: ‘FormMethod‘, field: ‘请求方式‘, width: 80,
25                 formatter: function (value, row, index) {
26                     return new Object(row["FormMethodDictionary"]).Name;
27                 }
28             },
29             {
30                 title: ‘OperationType‘, field: ‘操作类型‘, width: 80,
31                 formatter: function (value, row, index) {
32                     return new Object(row["OperationTypeDictionary"]).Name;
33                 }
34             },
35             {
36                 field: ‘IsShow‘, title: ‘显示‘, width: 25, align: ‘center‘, formatter: function (colData) {
37                     return colData ? "√" : "X";
38                 }
39             },
40             {
41                 field: ‘IsLink‘, title: ‘链接‘, width: 25, align: ‘center‘, formatter: function (colData) {
42                     return colData ? "√" : "X";
43                 }
44             },
45             { title: ‘备注‘, field: ‘Remark‘, width: 150 },
46             { title: ‘ParentId‘, field: ‘ParentId‘, hidden: true }
47         ]],
48         toolbar: [{
49             text: "添加",
50             iconCls: ‘icon-add‘,
51             handler: add
52         }, ‘-‘, {
53             text: "修改",
54             iconCls: ‘icon-edit‘,
55             handler: modify
56         }, ‘-‘, {
57             text: "删除",
58             iconCls: ‘icon-remove‘,
59             handler: remove
60         }]
61
62     });
63 });

二、后端：

 1 public ActionResult MenuIndex(FormCollection form)
 2 {
 3     //取从数据字典中取中Menu对应的ID号
 4     var dic = _dictionaryService.Single(o => o.Name == "MENU" && o.IsDeleted == false);
 5     var menuId = dic.Id;
 6
 7     //查询所有菜单信息
 8     var menus = _actionService.Where(o => o.IsDeleted == false && o.OperationType == menuId && o.IsShow == true, o => o.DisOrder, true, "FormMethodDictionary", "OperationTypeDictionary").ToList();
 9
10     //构造TreeGrid的数据
11     RSCC.Model.PageData<ActionViewModel> treegrids = new RSCC.Model.PageData<ActionViewModel>();
12     treegrids.total = menus.Count();
13     treegrids.rows = menus.Select(o => o.ToViewModel()).ToList();
14
15     //转化为JSON格式
16     var strJson = operationContext.ToJson(treegrids);
17     return Content(strJson);
18
19 } 

三、注意事项：

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

四、实现效果如下：