TreeGrid分页树形表格

先展示效果图：

加载treegrid的json数据格式有两种：

（1）基本的数据结构

[{
    "id":,
    "name":"C",
    "size":"",
    "date":"02/19/2010",
    "children":[{
        "id":,
        "name":"Program Files",
        "size":"120 MB",
        "date":"03/20/2010",
        "children":[{
            "id":,
            "name":"Java",
            "size":"",
            "date":"01/13/2010",
            "state":"closed",
            "children":[{
                "id":,
                "name":"java.exe",
                "size":"142 KB",
                "date":"01/13/2010"
            },{
                "id":,
                "name":"jawt.dll",
                "size":"5 KB",
                "date":"01/13/2010"
            }]
        },{
            "id":,
            "name":"MySQL",
            "size":"",
            "date":"01/13/2010",
            "state":"closed",
            "children":[{
                "id":,
                "name":"my.ini",
                "size":"10 KB",
                "date":"02/26/2009"
            },{
                "id":,
                "name":"my-huge.ini",
                "size":"5 KB",
                "date":"02/26/2009"
            },{
                "id":,
                "name":"my-large.ini",
                "size":"5 KB",
                "date":"02/26/2009"
            }]
        }]
    },{
        "id":,
        "name":"eclipse",
        "size":"",
        "date":"01/20/2010",
        "children":[{
            "id":,
            "name":"eclipse.exe",
            "size":"56 KB",
            "date":"05/19/2009"
        },{
            "id":,
            "name":"eclipse.ini",
            "size":"1 KB",
            "date":"04/20/2010"
        },{
            "id":,
            "name":"notice.html",
            "size":"7 KB",
            "date":"03/17/2005"
        }]
    }] 

（2）_parentId的数据格式

{"total":,"rows":[
    {"id":,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":,"iconCls":"icon-ok"},
    {"id":,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":,"_parentId":,"state":"closed"},
    {"id":,"name":"Database","persons":,"begin":"3/4/2010","end":"3/6/2010","progress":,"_parentId":},
    {"id":,"name":"UML","persons":,"begin":"3/7/2010","end":"3/8/2010","progress":,"_parentId":},
    {"id":,"name":"Export Document","persons":,"begin":"3/9/2010","end":"3/10/2010","progress":,"_parentId":},
    {"id":,"name":"Coding","persons":,"begin":"3/11/2010","end":"3/18/2010","progress":},
    {"id":,"name":"Testing","persons":,"begin":"3/19/2010","end":"3/20/2010","progress":}
],"footer":[
    {"name":"Total Persons:","persons":,"iconCls":"icon-sum"}
]} 

（3）带footer的_parentId数据格式

{"total":,"rows":[
    {"id":,"region":"Wyoming"},
    {"id":,"region":"Albin","f1":,"f2":,"f3":,"f4":,"f5":,"f6":,"f7":,"f8":,"_parentId":},
    {"id":,"region":"Canon","f1":,"f2":,"f3":,"f4":,"f5":,"f6":,"f7":,"f8":,"_parentId":},
    {"id":,"region":"Egbert","f1":,"f2":,"f3":,"f4":,"f5":,"f6":,"f7":,"f8":,"_parentId":},
    {"id":,"region":"Washington"},
    {"id":,"region":"Bellingham","f1":,"f2":,"f3":,"f4":,"f5":,"f6":,"f7":,"f8":,"_parentId":},
    {"id":,"region":"Chehalis","f1":,"f2":,"f3":,"f4":,"f5":,"f6":,"f7":,"f8":,"_parentId":},
    {"id":,"region":"Ellensburg","f1":,"f2":,"f3":,"f4":,"f5":,"f6":,"f7":,"f8":,"_parentId":},
    {"id":,"region":"Monroe","f1":,"f2":,"f3":,"f4":,"f5":,"f6":,"f7":,"f8":,"_parentId":}
],"footer":[
    {"region":"Total","f1":,"f2":,"f3":,"f4":,"f5":,"f6":,"f7":,"f8":}
]} 

示例：

前台代码：

 <div id="griddiv">
        <table id="tbMenu" class="easyui-datagrid">
        </table>
    </div>

逻辑代码：

DAL.cs
/// <summary>
        /// 分页查询
        /// </summary>
        /// <param name="pageNumber"></param>
        /// <param name="pageSize"></param>
        /// <returns></returns>
        public DataSet GetMenuListByPage(int pageNumber, int pageSize)
        {
            StringBuilder strSql = new StringBuilder();
 
            strSql.Append(@"SELECT pageitem ,menuId AS id ,menuParId AS _parentId ,menuName ,menuCode ,menuUrl ,menuIcon AS iconCls ,updateBy ,sortId FROM ( SELECT ROW_NUMBER() OVER (ORDER BY sortId ASC) AS pageitem ,menuId ,menuParId ,menuName ,menuCode ,menuUrl ,menuIcon ,updateBy ,sortId FROM dbo.tb_menu  ");
 
            strSql.Append(@" ) a WHERE pageitem > " + pageSize * (pageNumber - ) + "  AND   pageitem <= " + pageSize * (pageNumber) + "   ");
 
            strSql.Append(@"  SELECT COUNT(1) AS  itemcount  FROM  dbo.tb_menu   ");
 
            return DbHelperSQL.Query(strSql.ToString());
        }
 
BAL.cs
public List<Model_tb_menu> GetMenuListByPage(int pageNumber, int pageSize, out int itemcount)
        {
            DataSet ds = this.dal.GetMenuListByPage(pageNumber, pageSize);
            itemcount = ;
            if (ds != null && ds.Tables.Count >  && ds.Tables[].Rows.Count >  && ds.Tables[].Rows.Count > )
            {
                itemcount = int.Parse(ds.Tables[].Rows[][].ToString());
            }
 
            return ModelHandler<Model_tb_menu>.FillModel(ds.Tables[]);
        }
 
MenuHandler.cs
private void LoadMenuDataByPage(HttpContext context)
        {
            int pageNumber = Request.GetFormInt("page", );
            int pageSize = Request.GetFormInt("rows", );
            int itemcount = ;
            List<Model_tb_menu> list = new BLL_Menu().GetMenuListByPage(pageNumber, pageSize, out itemcount);
 
            var jobj = new JObject();
            jobj["total"] = itemcount;
            jobj["rows"] = (JArray)JToken.FromObject(list);
 
            Response.WriteJson(context, jobj.ToString());
        }

JS代码：

function searchData() {
        $("#tbMenu").treegrid({
            url: '/Handlers/MenuHandler.ashx?action=LoadMenuDataByPage',
            method: 'post', 
            pagination: true,
            pageNumber: 1,
            pageSize: 15,
            pageList: [15, 30, 50], 
            singleSelect: true,
            idField: 'id',
            treeField: 'menuName',
            animate: true,
            fitColumns: true,
            rownumbers: true,
            columns: [[
                { field: 'id', title: 'menuId', hidden: true },
                { field: 'menuName', title: '菜单名称', width: getWidth(0.1) },
                { field: 'menuParName', title: '父节点', width: getWidth(0.1) },
                { field: 'menuUrl', title: '链接地址', width: getWidth(0.15) },
                { field: 'iconCls', title: '图标', width: getWidth(0.1) },
                { field: 'menuCode', title: '标识码', hidden: true },
                { field: 'sortId', title: '排序', hidden: true },
                { field: 'updateBy', title: '最后修改人', width: getWidth(0.1) }
            ]]
        })

注意事项：

1. treegrid中id，_parentId，iconCls，state必须是这种写法，否则treegrid不认就渲染不出想要的结果

2. treeField: 'menuName' 中的‘menuName’必须是能显示出来的，否则页面树结构加载不出来

3. _parentId如果没有值就传null或者不传，不可以赋值为0或者‘’（空字符串），否则页面树结构加载不出来

4. _parentId所代表的节点必须出现在json数据中，否则页面树结构加载不出来