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);
}
}