属性表格,主要是引入了下面的JS,文档里面也很详细
下载地址:https://gitee.com/whvse/treetable-lay
案例地址:https://whvse.gitee.io/treetable-lay/demo/
文档地址:https://gitee.com/whvse/treetable-lay/wikis/pages
先上一张效果图吧
下面贴一下代码:
// 记得引入LAYUI
layui.config({
// treeTable.js 的根目录
base: '__ADMIN__/js/'
}).use(['layer', 'util', 'form', 'treeTable'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var util = layui.util;
var form = layui.form;
var treeTable = layui.treeTable;
$('body').removeClass('layui-hide');
// 渲染表格
treeTable.render({
// table的ID
elem: '#layui_table',
// 是否显示工具栏
toolbar: false,
// 容器高度
height: 'full-200',
tree: {
// 展开和合并的图标在哪一列
iconIndex: 0,
// 是否是pid形式的数据,懒加载方式不需要
isPidData: true,
idName: 'id',
pidName: 'parentId',
// 图标设置
getIcon: ''
},
// 表头设置
cols: [[
{ field: 'list_name', title: '列表名称', minWidth: 165 },
{ field: 'list_level', title: '列表等级' },
{ field: 'sort', title: '排序', width: 110, align: 'center' },
{ align: 'center', toolbar: '#displayBar', title: '显示', width: 110 },
{ align: 'center', toolbar: '#tbBar', title: '操作', width: 230 }
]
],
reqData: function (data, callback) { // 懒加载也可以用url方式,这里用reqData方式演示
var url = '请求的地址';
$.get(url, function (res) {
callback(res.data);
});
},
style: 'margin-top:15px;'
});
})