layui目前仅有常规表格分页及树形图,未能有树形图分页功能,
采用另外单独设立分页栏,分页改变时调用方法重载树形树形表格数据。
20230628更
感谢各位的喜欢,因不经常登录,这里贴一下部分代码,以供参考。
后台部分为c# mvc
中心思路是将分页部分和树形图表格分开单独处理,分页数据改变时通过js重新获取树形表格。
前台页面部分
<div class="layuimini-container"><div class="layuimini-main">@*<blockquote class="layui-elem-quote">Layui的树形表格treeTable,支持异步加载(懒加载)、复选框联动、折叠状态记忆。<br><a href="https://gitee.com/whvse/treetable-lay" target="_blank" class="layui-btn layui-btn-danger">treetable-lay</a></blockquote>*@<div style="margin: 10px 10px 10px 10px"><form class="layui-form layui-form-pane" action=""><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">关键字</label><div class="layui-input-inline"><input type="text" id="keyword" name="keyword" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><button type="submit" id="search" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button></div></div></form></div><div><div class="layui-btn-group"><button class="layui-btn " id="btn-download">下载选中文件</button><button class="layui-btn " id="btn-fold">全部折叠</button><button class="layui-btn" id="btn-expand">全部展开</button></div><table id="munu-table" class="layui-table" lay-filter="munu-table"></table><div id="laypages"></div></div></div></div>
前台js部分
pagefun(1, 15); // 使用 分页来显示function pagefun(page, limit) { layui.config({base: rootPath + "lay-module/treetable-lay/", // 配置模块所在的目录}).use(['table', 'treeTable', "form", 'laypage'], function () {var $ = layui.jquery;var table = layui.table;var form = layui.form;var treetable = layui.treeTable;var laypage = layui.laypage;//console.log(commonHeader);var size = $(".layui-laypage-limits").find("option:selected").val() //分页数目var page = $(".layui-laypage-em").next().html(); //当前页码值var keywords = $('#keyword').val(); //关键字if (typeof (size) == "undefined") {size=15}if (typeof (page) == "undefined") {page = 1}//计算出 分页数$.get("/Admin/xxxxx/GetmenuCount", { curr: page, limit: size, keywords: keywords }, function (result) { laypage.render({elem: 'laypages',count: result.dataCount,//数据总数curr: result.pageIndex,//当前页limit: result.pageSize,limits: [15, 20, 30, 40, 50, 60],page: result.pageIndex,layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],jump: function (obj, first) {if (!first) {//如果不添加这个,会一直请求pagefun(obj.curr, 15); //刷新页面}},});});// 渲染表格//layer.load(2);var insTb = treetable.render({id: 'aaa',isPidData: true,elem: '#munu-table',url: "/Admin/xxxx/TreeList?limit=" + size + "&curr=" + page + "&keywords=" + $('#keyword').val(),//headers: commonHeader,method: 'POST',page: true,cols: [{ type: 'checkbox', width: "8%", align: 'right' },{ field: 'remark', width: "10%", align: 'left', title: '备注' },{ field: 'createDate', width: "12%", align: 'center', title: '文件上传时间' },{ templet: '#auth-state', width: "15%", align: 'center', title: '操作' }],limits: [10, 20, 30, 40, 50, 100],limit: 15,page: true,done: function (res) {layer.closeAll('loading');console.log(res);}});}
后台部分
获取页码部分
/// <summary>/// 获取分页栏导航数据/// </summary>/// <param name="query"></param>/// <param name="curr"></param>/// <param name="limit"></param>/// <param name="keywords"></param>/// <returns></returns>[HttpGet]public JsonResult GetmenuCount(PageQueryModel query,int curr, int limit, string keywords){if (limit==0){limit = 15;}query.keyword = keywords;//你的代码var obj = new{code = 200,msg = "ok",dataCount= dataCount,//数据总数pageCount = (dataCount / limit),//总页数pageIndex = curr,//当前页数pageSize = limit//每页大小};return Json(obj);}
获取树形图数据
[HttpPost] public async Task<IActionResult> TreeList(PageQueryModel query,int limit, int curr,string keywords){Result<List<CompanyItem>> result = new Result<List<CompanyItem>>();PageModel<Company> pageModel = new PageModel<Company>(); List<CompanyItem> viweVoteItemList = new List<CompanyItem>();//异常情况处理代码段
//仅供参考,请根据个人实际情况调整。pageModel.data = xxxxxx.ToList();//根据页码和关键词查询父级数据pageModel.data.ForEach(m =>{CompanyItem company = new CompanyItem(){CompanyID = m.ID, };company.children = xxxxxx.ToList();//子级数据。viweVoteItemList.Add(company);});result.code = ResultCode.Success;result.msg = "成功";result.data = viweVoteItemList;return Json(result);}
因项目中摘抄下来,代码仅保留主体部分,仅供参考,如有问题请留言,我会看到后及时回复。