Layui的 TreeGrid 树形显示数据加分页功能

layui treegrid 在官网人已经有人改造出来了树形显示数据，https://fly.layui.com/extend/treeGrid/，在此基础上加上了分页功能，根据系统需求也调整了样式，我的是.NET开发，Java的可能要改改有些细节的地方

示例：第一页

第二页： 

关键代码： 

    <%--引用必要的js和css文件--%>
    <script src="CC/jquery-3.3.1.js"></script>
    <script src="CC/treegrid/design/layui.js"></script>
    <link href="CC/treegrid/design/css/layui.css" rel="stylesheet" /> 
 
    <%--定义treeTableid--%>
    <div>
        <table id="treeTable" lay-filter="treeTable" ></table>
    </div>
    
    <%--渲染和加载treeGrid--%>
    <script>
        var editObj = null, ptable = null, treeGrid = null,
            tableId='treeTable',layer = null, element=null;
        layui.config({
            base: 'CC/treegrid/design/extend/'
        }).extend({
            treeGrid: 'treeGrid'
        }).use(['treeGrid', 'layer', 'element'], function () {
            treeGrid = layui.treeGrid;
            element = layui.element;
            layer = layui.layer;
            ptable = treeGrid.render({
                id: tableId
                , elem: '#' + tableId
                , idField: 'CaID'
                , url: 'AjaxHelper/BooksCataLog.ashx'//后台访问路径，返回Json。具体格式后面代码介绍到
                , cellMinWidth: 100
                , treeId: 'CaID'//树形id字段名称
                , treeUpId: 'TID'//树形父id字段名称
                , treeShowName: 'CaName'//以树形式显示的字段
                , limit: 10
                , method: "post"
                , cols: [[
                    { field: 'NUM', width: 40, title: '序号', align: 'center' }
                    , {
                         field: 'CaName', width: 350, title: '单元目录', templet: function (d) {
                             return "<a id='tip_" + d.CaID + "'  onmouseover='MouserOver(\"" + d.BooksName + "\",\"tip_" + d.CaID + "\");' onmouseout='MouseOut();'>" + d.CaName + "</a>";
                         }
                     }
                    , { field: 'CaNum', title: '目录序号' }
                    , { field: 'CaType', title: '课文类型', width: 70 }
                    , { field: 'author', title: '作者', width: 70 }
                    , { field: 'Page', title: '页码',width:40, templet: function (d) { return d.Page == 0 ? "" : d.Page;  } }
                    , { field: 'Viid', title: '观看权限', width: 70, align: 'center', templet: function (d) { return d.Viid == "1" ? "VIP" : "免费"; } }
                    , { field: 'State', title: '是否显示', width: 70, align: 'center', templet: function (d) { return d.State == "1" ? "是" : "否"; } }
                    , { title: '操作', align: 'center',width: 70/*toolbar: '#barDemo'*/
                        , templet: function (d) {
                            return '<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">修改</a>';
                        }
                    }
                    , { type: 'checkbox', width: 40 }
                ]]
                , page: true//显示分页
            });

            treeGrid.on('tool(' + tableId + ')', function (obj) {
                if (obj.event === 'edit') {//编辑
                    Edit(obj);
                }
            });
        });
        

        //重新加载方法，这里的textid是传入后台的参数id，
        function reloadTreeGrid(textId) {
            treeGrid.reload(tableId, { where: { textid: textId } });
        }
</script>

下面为后台返回的json字符串格式，我的数据在后台就做了分页查询，本来返回的10条数据，这里贴出两条示例数据， data和count是必须要有的，

{
    "msg": "",
    "code": 0,
    "data": [{"CaID":"412","CaNum":"","CaName":"第一章","TID":"0","TextID":"1849","CaType":"","author":"","Page":"0","Viid":"1","State":"1","BDid":"100","level":"1","VrID":"","VrName":"","BooksName":"测试课文","NUM":"1"},
            {"CaID":"415","CaNum":"1","CaName":"登高","TID":"412","TextID":"1849","CaType":"课文类型","author":"杜甫","Page":"34","Viid":"1","State":"1","BDid":"101","level":"2","VrID":"","VrName":"","BooksName":"测试课文","NUM":"2"
            }],
   "count":"172"}

 dltable.js里面根据自己需求修改了树形显示的样式，如果显示不正确可以调整下这里