jQuery EasyUI treegrid 动态加载节点数据

使用treegrid显示树形结构数据时，如果数据量稍大一些，一下子全部加载的话可能前端界面渲染会非常卡，所以一般会按节点加载，treegrid本身也提供了这种机制。

1. 前台代码

   (function (id) {
       var ctx = $("#" + id);
       var tb = $(".grid-table", ctx);
   
       tb.treegrid({
           fit: true,
           rownumbers: true,
           singleSelect: true,
           idField: 'Id',
           treeField: 'Name',
           url: "/area/arealist",
           columns: [[
               { field: "Name", title: "名称", width: 200 },
               { field: "Level", title: "级别", width: 80,align:"center"},
               { field: "SortNumber", title: "排序号", width: 100,align:"center" }
           ]],
           onBeforeLoad: function (row, param) {
   　           //这里是关键，节点展开时，组织url参数动态加载节点数据　
               tb.treegrid("options").url = "/area/arealist?id=" + (row ? row.Id : null);
           },
           toolbar:[
           {
               text: "展开",
               id:"btn_expand",
               iconCls: "tree-folder",
               handler: function () {
                   var btn = $("#btn_expand", ctx);
                   if (btn.find(".l-btn-icon").hasClass("tree-folder-open")) {
                       btn.find(".l-btn-icon").removeClass("tree-folder-open");
                       btn.find(".l-btn-text").text("展开");
                       tb.treegrid("collapseAll");
                   } else {
                       btn.find(".l-btn-icon").addClass("tree-folder-open");
                       $.each(tb.treegrid("getRoots"), function (index, row) {
                           btn.find(".l-btn-text").text("折叠");
                           tb.treegrid("expand", row.Id);
                       });
                   }
               }
           },"-", {
               text: "刷新",
               iconCls: "icon-reload",
               handler:function() {
                   tb.treegrid("reload");
               }
           }]
       });
   
   })("area-container");

    

2. 后台代码
   
   

    public ActionResult AreaList(int? id=null)
      {
               int total;
               var areaList = _areaService.AreaList(out total,id).Select(m => new
               {
                   m.Id,
                   m.Name,
                   m.Level,
                   m.SortNumber,
                   children =m.Children,
                   state=m.Level==2?"open":"closed"
               });
            
               return id == null ? JsonContent(new VmDataGrid(total, areaList)) : JsonContent(areaList);
       }

    后台首次加载时返回的数据结构应该是这样的：{“total":34,"rows":[{...},{...}]}；而之后加载节点数据时返回的数据结果应该是：[{"Id":214,"Name":"北京市","Level":1,"SortNumber":0,"children":null,"state":"closed"}]，没有total和rows参数。

转载于:https://www.cnblogs.com/wukaixian/p/5382988.html