前言
项目需要要做一个树形表格，项目用的技术框架是layui。去查看了文档，layui没有treeTable的相关内容，但是他的拓展里面有，感觉有点生硬。后面是百度看大牛们写的，自己跟着写的，觉得还是做个笔记好一点。 注意：我用的layui的版本2.4.5，低版本的可能会使树形表格的样式会加载不全的。 话不说多，当代码：
代码
<body>
<div class="admin-main">
<table class="layui-table layui-form" id="tree-table"></table>
</div>
<script type="text/javascript" src="./layui.js"></script>
<script type="text/javascript">
layui.config({
base: 'js/', //存放treeTable.js的文件夹
})
layui.use(['treeTable', 'layer', 'code', 'form'], function () {
var $ = layui.$,
form = layui.form,
layer = layui.layer,
treeTable = layui.treeTable;
function getList() {
var info = {
"pageSize": 15,
"pageNumber": 1,
"pMenuId": '',
"searchValue": '',
};
api.url(info, function (res) { // api.url 这个是我获取数据的接口
if (res.status == 0) {
layer.msg(res.msg);
} else if (res.status == 1) {
// 处理后台数据，使他成为treeTable能够用的数据
for (var i = 0; i < res.ResInfo.length; i++) {
if (res.ResInfo[i].PMenuID) {
res.ResInfo[i].PMenuID = res.ResInfo[i].PMenuID;
} else {
res.ResInfo[i].PMenuID = 0;
}
res.ResInfo[i].id = res.ResInfo[i].MenuID;
res.ResInfo[i].pid = res.ResInfo[i].PMenuID;
}
treeTable.render({
elem: '#tree-table',
icon_key: 'Title',
is_checkbox: true,
// checked: {
// key: 'id',
// data: [],
// },
data: res.ResInfo,
cols: [{
key: 'Title',
title: '菜单名称',
width: '100px',
template: function (item) {
if (item.level == 0) {
return '<span>' + item.Title + '</span>';
} else if (item.level == 1) {
return '<span>' + item.Title +
'</span>';
} else if (item.level == 2) {
return '<span>' + item.Title + '</span>';
}
}
},
{
key: 'Href',
title: 'URL'
},
{
key: 'Icon',
title: '图标'
},
{
key: 'OrderNo',
title: '排序'
},
{
key: 'RightName',
title: '权限'
},
{
key: 'Remark',
title: '备注'
},
{
title: '操作',
align: 'center',
width: '150px',
template: function (item) {
// item.level 这个是treetable.js处理好的，我们可以直接用
if (item.level == 0) {
return '<button class="layui-btn layui-btn-normal layui-btn-xs" lay-filter="add">添加</button>' +
'<button class="layui-btn layui-btn-xs" lay-filter="edit">编辑</button>' +
'<button class="layui-btn layui-btn-xs layui-btn-danger" lay-filter="del">删除</button>';
} else {
return '<button class="layui-btn layui-btn-xs" lay-filter="edit">编辑</button>' +
'<button class="layui-btn layui-btn-xs layui-btn-danger" lay-filter="del">删除</button>';
}
}
}
],
end: function (e) {
form.render();
},
})
}
})
}
getList();
// 添加
treeTable.on('tree(add)', function (data) {
layer.open({
title: "添加",
type: 2,
content: "modelInfo.html?modelType=1" + '&MenuID=' + data.item.MenuID,
area: ["600px", "500px"],
success: function (layero, index) {
var body = layer.getChildFrame('body', index);
body.find("#Title").val('');
body.find("#MLevel").val('');
body.find("#Icon").val('');
body.find("#Hrefurl").val('');
body.find("#RightName").val('');
body.find("#OrderNo").val('');
body.find("#Remark").val('');
},
end: function () {
getList();
}
});
})
// 编辑
treeTable.on('tree(edit)', function (data) {
layer.open({
title: "编辑",
type: 2,
content: "modelInfo.html?modelType=2" + '&MenuID=' + data.item.MenuID +
'&PMenuID=' + data.item.PMenuID,
area: ["600px", "500px"],
success: function (layero, index) {
var body = layer.getChildFrame('body', index);
body.find("#Title").val(data.item.Title);
body.find("#MLevel").val(data.item.MLevel);
body.find("#Icon").val(data.item.Icon);
body.find("#Hrefurl").val(data.item.Href);
body.find("#RightName").val(data.item.RightName);
body.find("#OrderNo").val(data.item.OrderNo);
body.find("#Remark").val(data.item.Remark);
},
end: function () {
getList();
}
});
})
// 删除
treeTable.on('tree(del)', function (data) {
layer.confirm("是否这列数据?", {}, function (index) {
var menuId = data.item.MenuID;
WF.JSysMenuDelete(menuId, function (res) {
if (res.status == 0) {
layer.msg(res.msg);
} else if (res.status == 1) {
layer.msg("删除成功");
getList();
setTimeout(function () {
layer.closeAll();
}, 1000);
} else {
WF.Loginout();
}
})
});
})
$('.layui-select-title').click(function () {
$(this).parent().hasClass('layui-form-selected') ? $(this).next().hide() : $(
this)
.next()
.show(), $(this).parent().toggleClass('layui-form-selected');
})
$(document).on("click", function (i) {
!$(i.target).parent().hasClass('layui-select-title') && !$(i.target).parents(
'table')
.length && !(!$(i.target).parents('table').length && $(i.target).hasClass(
'layui-icon')) && $(".layui-form-select").removeClass(
"layui-form-selected")
.find(
'.layui-anim').hide();
})
})
</script>
</body>
给你放着链接下载demo看看。demo跟上面的文件相似不相同啊！
链接：pan.baidu.com/s/1_pmNLFlN… 提取码：eayk
里面有layui、treetable.js 以及例子，各位自行拿吧，
