asp.net MVC中使用EasyUI Treegrid 樹形網格

引入CSS和JS

<link href="~/Content/plugins/jquery-easyui-1.7.0/themes/default/easyui.css" target="_blank" rel="external nofollow"  rel="stylesheet">
<link href="~/Content/plugins/jquery-easyui-1.7.0/themes/icon.css" target="_blank" rel="external nofollow"  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) {
                        if (row.filePath!=null) {
                            return "<a title='預覽' href=\"javascript:showFile('" + row.Id + "')\">" + row.TreeName + "</a>";
                        } else {
                            return row.TreeName;
                        }
                    }
                },
                {
                      title: '上傳時間',
                      field: 'CommitStartTime',
                      width: 180,
                      align: 'center',
                 },
                 {
                      title: '上傳人',
                      field: 'UserName',
                      width: 180,
                      align: 'center',
                  }
            ]],
            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; 
}