TreeTable.js下载
链接：https://pan.baidu.com/s/1lLBge_4MSSViLztwTnPfkA 提取码：whj3
一、效果图
二、前端代码
{include file='common/header'}
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card layui-form">
<div class="layui-card-header">{:__('Query conditions')}</div>
<div class="layui-card-body layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-btn-group demoTable">
{if $check->checkPrivilege('department/add')}<button class="layui-btn " data-type="add">
<i class="layui-icon layui-icon-addition"></i>{:__('Add')}
</button>{/if}
{if $check->checkPrivilege('department/delete_op')} <button class="layui-btn layui-btn-danger" data-type="delAll"><i
class="layui-icon layui-icon-delete"></i>{:__('Delete all')}
</button>{/if}
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card layui-form">
<div class="layui-card-body">
<table class="layui-hide" id="app" lay-filter="app"></table>
</div>
</div>
</div>
</div>
</div>
<script type="text/html" id="operate">
{if $check->checkPrivilege('department/child')}<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="child">{:__('Add child')}</a>{/if}
{if $check->checkPrivilege('department/edit')}<a class="layui-btn layui-btn-xs" lay-event="edit">{:__('Edit')}</a>{/if}
{if $check->checkPrivilege('department/delete_op')}<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">{:__('Delete')}</a>{/if}
</script>
{include file='common/footer'}
<script>
layui.config({
base : '/static/admin/layui/lay/modules/'
}).extend({
treeTable : 'treeTable'
});
var table = null;
layui.use(['treeTable', 'form'], function () {
table = layui.treeTable;
table.render({
id: "app",
elem: '#app',
url: "{:url('department/lst')}",
tree: {
iconIndex: 1,
isPidData: true,
idName: 'id',//父ID
pidName: 'parent_id',//子ID
openName: 'open',// 是否默认展开的字段名
//public bool open { get; set; }open字段是bool类型
},
cols: [[
{field: 'id', title: 'ID', width: 100}
, {
field: 'name', title: "{:__('Department name')}"
}
, {field: 'update_entered', title: "{:__('Update time')}"}
, {field: 'date_entered', title: "{:__('Create time')}"}
, {fixed: 'right', title: "{:__('Operate')}", toolbar: '#operate', width: 180}
]],
page: false,
cellMinWidth: 80,
// toolbar: '#toolbar',
// defaultToolbar: ['filter', 'exports', 'print']
});
table.on('tool(app)', function (obj) {
let data = obj.data, id = data.id;
switch (obj.event) {
case 'child':
layer.open({
type: 2,
title: "{:__('Add %s', __('App name'))}",
area: ["600px", "400px"],
content: "{:url('department/add')}?id="+id,
maxmin: true,
});
break;
case 'edit':
layer.open({
type: 2,
title: "{:__('Edit %s', __('App name'))}",
area: ["600px", "400px"],
content: "{:url('department/edit')}?id="+id,
maxmin: true,
});
break;
case 'delete':
delete_op(id, "{:__('Are you sure you want to delete this item?')}");
break;
}
});
var active = {
add: function () {
layer.open({
type: 2,
title: "{:__('Add %s', __('App name'))}",
area: ["600px", "550px"],
content: "{:url('department/add')}",
maxmin: true,
});
},
delAll: function () {
var checkStatus = table.checkStatus('app'),
data = checkStatus.data, ids="";
if (data.length == 0) {
layer.msg("{:__('Please select the item to delete')}", {
icon: 5,
shift: 6
});
return false;
}
for (let i = 0; i < data.length; i++) {
if (i == data.length - 1) {
ids += data[i].id;
}else {
ids += data[i].id + ",";
}
}
delete_op(ids, "{:__('Are you sure you want to delete this item?')}");
}
};
$('.layui-btn').on('click', function() {
var type = $(this).data('type');
active[type] && active[type].call(this);
});
function delete_op(id, msg) {
layer.confirm(msg, function (index) {
$.ajax({
url: "{:url('department/delete_op')}",
data: {id: id},
type: "post",
success: function (data) {
if (data.code == 1) {
layer.msg(data.msg, {
icon: 1
});
location.reload(true);
} else {
layer.msg(data.msg, {
icon: 5,
shift: 6
});
}
layer.close(index);
}
});
layer.close(index);
});
}
});
</script>三、后台数据
{
"code": 0,
"msg": "获取成功",
"time": 1659322274,
"data": [{
"id": 1,
"name": "test",
"parent_id": 0,
"date_entered": null,
"update_entered": null,
"open": true
}, {
"id": 2,
"name": "h",
"parent_id": 1,
"date_entered": null,
"update_entered": null,
"open": true
}, {
"id": 3,
"name": "222",
"parent_id": 1,
"date_entered": null,
"update_entered": null,
"open": true
}, {
"id": 4,
"name": "哈哈",
"parent_id": 0,
"date_entered": "2022-08-01 10:28:38",
"update_entered": "2022-08-01 10:28:38",
"open": true
}, {
"id": 5,
"name": "好",
"parent_id": 4,
"date_entered": "2022-08-01 10:28:53",
"update_entered": "2022-08-01 10:35:19",
"open": true
}],
"count": 5
}
