treeTable 實現分頁顯示數據

https://whvse.gitee.io/treetable-lay/demo/

默認的treetable 是沒有分頁查詢數據的，自己改裝了一下

  <title>Layui樹形表格</title>
<div class="page-wrapper">
    <table id="demoTreeTb"></table>

    <div id="laypages"></div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<script>
    pagefun(1, 15); // 使用 分頁來顯示我的團隊
    function pagefun(page, size) {
        layui.use(['admin', 'form', 'treeTable', 'laypage'], function () {
            var $ = layui.$, admin = layui.admin, treeTable = layui.treeTable, laypage = layui.laypage;
            //計算出 分頁數
            $.get("http://192.168.20.114/api/Home/GetmenuCount", { curr: page, limit: size }, function (result) {
                laypage.render({
                    elem: 'laypages',
                    count: result.count,//總頁數
                    curr: result.curr,//當前頁
                    limit: 15,
                    limits: [15, 20, 30, 40, 50, 60],
                    layout: ['count', 'prev', 'page', 'limit', 'next'],
                    jump: function (obj, first) {
                        if (!first) {//如果不添加這個，會一直請求
                            pagefun(obj.curr, 15);
                        }
                    },
                    prev: '上一頁',
                    next: '下一頁',
                    theme: '#f9c357',
                });
            });
            // 渲染表格
            treeTable.render({
                height: 'full-140',
                elem: '#demoTreeTb',
                toolbar: false,
                tree: {
                    iconIndex: 1,
                    isPidData: true,
                    idName: 'Id',       //父
                    pidName: 'SubsetId',//子   父子id 必須不同，所以需要指定兩個永遠不會相等的值
                    haveChildName: 'haveChild', // 是否有下級
                },
                cellMinWidth: 160,
                cols: [[
                    { type: 'numbers', title: '序號', width: 100 },
                    { field: 'Name', title: '菜單名稱' },
                    { field: 'CreateTime', title: '創建時間' },
                    { align: 'center', toolbar: '#tbBar', title: '操作' }
                ]],
                reqData: function (data, callback) {
                    var url = "http://192.168.20.114/api/Home/";
                    url += data ? ('GetmenuByIdList?id=' + data.Id) : ("GetmenuList?curr=" + page + "&limit=" + size);
                    $.get(url, function (res) {
                        callback(res.data);
                    });
                },
                style: 'margin-top:140px;'
            });

            //定義一個查詢共有多少總數的方法 
            treeTable.on('tool(demoTreeTb)', function (obj) { 
                console.log(obj,'test');
                var event = obj.event;
                if (event === 'edit') { 
                    
                } else if (event === 'del') {  
                   console.log(111);
                }
            }); 
            $('.demoTreeTb .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    };
</script>

    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : Controller
    {

        [HttpGet]
        public JsonResult GetmenuCount(int curr=1,int limit=15)
        { 
            var obj = new
            {
                code = 200,
                msg = "ok",
                curr = curr,
                count = 20
            };
            return Json(obj);
        }
        [HttpGet]
        public JsonResult GetmenuList(int curr = 1, int limit = 15)
        {
            List<Menu> menulist = new List<Menu>();
            for (int i = 1; i <= 15; i++)
            { 
                menulist.Add(new Menu { Id = i, CreateTime = DateTime.Now, haveChild = (i % 2 == 0 ? true : false), Name = $"主菜單{i}", SubsetId = limit + i });
            }
            var obj = new
            {
                code = 200,
                msg = "ok",
                count = 1,
                data = menulist
            };
            return Json(obj);
        } 
        [HttpGet]
        public JsonResult GetmenuByIdList(int id)
        { 
            List<Menu> menulist = new List<Menu>();
            for (int i = id; i <= 30; i++)
            {
                menulist.Add(new Menu { Id = id+1, 
                    CreateTime = DateTime.Now,
                    haveChild = (i % 2 == 0 ? true : false),
                    Name = $"子菜單{id}_{i}", SubsetId = id*2+i });
            } 
            var obj = new
            {
                code = 200,
                msg = "ok",
                count = 1,
                data = menulist
            };
            return Json(obj);
        }


    }