jQuery EasyUI API 中文文档 - Tree树使用实例

一、新建一个mvc项目
二、新建控制器 tree.controller
 //实例化树形
        public string InitTree()
        {
            string result = "";
            IList<Authority> list = _authorityService.GetAuthorityByPId(0).ToList();
            foreach (Authority node in list)
            {
                result += Recursion(node) + ",";
            }
            return "[" + result.TrimEnd(',') + "]";
        }


        // 递归树形
        public string Recursion(Authority model)
        {
            string res_s = "";
            //你想要在视图中得到的值
            res_s += "{\"AuthorityID\":\"" + model.AuthorityID + "\",\"AuthorityName\":\"" + model.AuthorityName + "\",\"pid\":\"" + model.ParentID + "\",\"iconPath\":\"" + model.IconPath + "\",\"AuthorityPath\":\"" + model.AuthorityPath + "\",\"Remark\":\"" + model.Remark + "\""; 

            IList<Authority> list = _authorityService.GetAuthorityByPId(model.AuthorityID).ToList();
            if (list != null)
            {
                res_s += "," + "\"children\":[";
                for (int i = 0; i < list.Count; i++)
                {
                    if (i > 0)
                        res_s += ",";
                    res_s += Recursion(list[i]);
                }
                res_s += "]";
            };
            res_s += "}";
            return res_s;
        }

三、新建AuthorityTree 视图页
1、用jquery 自带的一个easyui插件（可到官方网站下载）
jquery 脚本代码
$(function(){
$('#authorityTbl').treegrid({
            title: '权限列表',
            iconCls: 'icon-save',
            width: $(document).width() * 0.80,
            height: 500,
            nowrap: false,
            animate: true,
            collapsible: true,
            loadMsg: "数据加载中，请稍后...",
            fitColumns: true,
            url: "/Administration/Authority/InitTree",
            idField: 'AuthorityID',
            treeField: 'AuthorityName',
            columns: [[
                 { field: 'AuthorityName', title: '权限名称', width: 300 }
]],
            onLoadSuccess: function () {
                $('#authorityTbl').treegrid('collapseAll');
            }
        })
})


2、该div 显示列表
<div id="listDiv">
    <table id="authorityTbl"  toolbar="#searchbar" class="easyui-treegrid" tbl="list">
    </table>
</div>