easyui treegrid的使用示例

一、前端：

 1 <div ></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 });

View Code