asp.net MVC中使用EasyUI Treegrid 树形网格

引入CSS和JS

<link href="~/Content/plugins/jquery-easyui-1.7.0/themes/default/easyui.css" rel="stylesheet">
<link href="~/Content/plugins/jquery-easyui-1.7.0/themes/icon.css" rel="stylesheet">
<script src="~/Content/plugins/jquery-easyui-1.7.0/jquery.min.js"></script>
<script src="~/Content/plugins/jquery-easyui-1.7.0/jquery.easyui.min.js"></script> 

前台核心代码

<table id="tg" class="table easyui-treegrid" title="" style="width:100%;overflow-y:auto"></table> 
<script type="text/javascript">
    $(function () {
        //加载树数据
        $('#tg').treegrid({
            rownumbers: true,
            animate: false,
            striped: false,
            fitColumns: true,
            scrollbarSize: 0,
            url: "/Home/GetRootList?keywords=null",
            singleSelect: false,
            checkOnSelect: true,
            selectOnCheck: true,
            loadMsg: "正在加载数据...",
            method: 'get',
            idField: 'Id',
            treeField: 'TreeName',
            showFooter: false,
            columns: [[
                {
                    title: '节点名称',
                    field: 'TreeName',
                    width: 380,
                    formatter: function (value, row, index) {
                        var drawingId = row.DrawingId;
                        if (row.DrawingLeave==6) {
                            return "<a title='预览' href=\"javascript:showFile('" + row.Id + "')\">" + row.TreeName + "</a>";
                        } else {
                            return row.TreeName;
                        }
                    }
                }
            ]],
            onLoadSuccess: function (row, data) {
                console.log(data);
            },
            onBeforeSelect: function (row) {
                if (selectType == 0) {
                    $('#tg').treegrid("unselectAll");//单选，选择之前清除已选择列表
                    return true;
                }
            },
            onSelect: function (row) {
                  
            },
            onClickRow: function (row) {
                    
            },
            onDblClickRow: function (row) {
                  
            },
            onBeforeExpand: function (node) {
                $('#tg').treegrid('options').url = '/Home/GetChirdList?Id=' + node.Id
                return true;
            },
            rowStyler: function (row, rowindex) {
                
            }
        });
        $('#tg').treegrid('resize', {
            height: document.body.clientHeight - 130,
        });
    });
 
</script>

 

后台代码

/// <summary>
/// 视图页
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
    return View();
}
/// <summary>
/// 首次加载跟节点，此处加载1，2级；1级展开，所有二级合并
/// </summary>
/// <returns></returns>
public string GetRootList(string keywords)
{
   var rootList = bll.GetList(keywords);//获取所有树形结构
   if (!string.IsNullOrEmpty(keywrods) && rootList.Count > 0) //如果搜索不为空，需将搜索到的一级节点parentid置为0
    {
        rootList[0].ParentId = 0;//搜索的结果集根节点不一定是0，此处需处理
    }
    var newList = rootList.Select(n => new
    {
        n.Id
        n.TreeName,
        state = n.parentId == 0 ? "open" : bll.GetAllList("parentId='" + n.Id + "'").Count > 0 ? "closed" : "open", //treeGrid关键字段,有子级文件夹图标，无子级文件图标并且没有展开合并符号
        n.Level,
        _parentId = n.parentId== 0 ? null : n.parentId.ToString(),//（必须）：记得前面有“_” ，他是用来记录父级节点，没有这个属性，是没法展示父级节点 其次就是这个父级节点必须存在，不然信息也是展示不出来，在后台遍历组合的时候，如果父级节点不存在或为0时，此时 _parentId 应该不赋值。如果赋值 “0” 则显示不出来
        //checked是否选中（用于复选框）
        //iconCls 选项前面的图标，如果自己不设定，父级节点默认为文件夹图标，子级节点为文件图标
    });
 
    var result = Newtonsoft.Json.JsonConvert.SerializeObject(newList);
    result = "{ \"total\":" + newList.Count() + ",\"rows\":" + result + "}";
    return result;
}
/// <summary>
/// 根据选择的Id查询下一级节点
/// </summary>
/// <returns></returns>
public string GetChirdList(int Id)
{
    var rootList = bll.GetChridList(Id);
    var newList = rootList.Select(n => new
    {
        n.Id
        n.TreeName,
        state = bll.GetAllList("parentId='" + n.Id + "'").Count > 0 ? "closed" : "open", //有子级文件夹图标，无子级文件图标并且没有展开合并符号
        n.Level,
        _parentId = n.parentId== 0 ? null : n.parentId.ToString()
 
    });
   var rows = Newtonsoft.Json.JsonConvert.SerializeObject(newList);
   return rows; 
}