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',  200 }
        ]],
        columns: [[
            { title: '排序', field: 'DisOrder',  40 },
            { title: '区域名', field: 'AreaName',  80},
            { title: '控制器名', field: 'ControllerName',  80},
            { title: 'Action方法名', field: 'ActionName',  80 },                    
            {
                title: 'FormMethod', field: '请求方式',  80,
                formatter: function (value, row, index) {
                    return new Object(row["FormMethodDictionary"]).Name;
                }
            },
            {
                title: 'OperationType', field: '操作类型',  80,
                formatter: function (value, row, index) {
                    return new Object(row["OperationTypeDictionary"]).Name;
                }
            },
            {
                field: 'IsShow', title: '显示',  25, align: 'center', formatter: function (colData) {
                    return colData ? "√" : "X";
                }
            },
            {
                field: 'IsLink', title: '链接',  25, align: 'center', formatter: function (colData) {
                    return colData ? "√" : "X";
                }
            },
            { title: '备注', field: 'Remark',  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 可选。

四、实现效果如下：