代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>示例demo</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<input type="text" class="layui-input" id="aassss">
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
</body>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button type="button" lay-event="tableTreeEdit" id="btn1" class="layui-btn layui-btn-sm">添加最上级节点</button>
<button type="button" lay-event="tableTreeEdit" id="btn2" class="layui-btn layui-btn-sm">获取勾选数据</button>
<button type="button" lay-event="tableTreeEdit" id="btn3" class="layui-btn layui-btn-sm">获取全部数据</button>
<button type="button" lay-event="tableTreeEdit" id="btn4" class="layui-btn layui-btn-sm">折叠字典管理</button>
<button type="button" lay-event="tableTreeEdit" id="btn5" class="layui-btn layui-btn-sm">展开字典管理</button>
<button type="button" lay-event="tableTreeEdit" id="btn6" class="layui-btn layui-btn-sm">关闭所有叶子节点</button>
<button type="button" lay-event="tableTreeEdit" id="btn7" class="layui-btn layui-btn-sm">展开所有叶子节点</button>
<button type="button" lay-event="tableTreeEdit" id="btn8" class="layui-btn layui-btn-sm">获取表格树配置</button>
<button type="button" lay-event="tableTreeEdit" id="btn9" class="layui-btn layui-btn-sm">重载表格树</button>
<button type="button" lay-event="tableTreeEdit" id="btn10" class="layui-btn layui-btn-sm">删除增加角色</button>
</br>
<button type="button" lay-event="tableTreeEdit" id="btn11" class="layui-btn layui-btn-sm">重置搜索</button>
<button type="button" lay-event="tableTreeEdit" id="btn12" class="layui-btn layui-btn-sm">刷新</button>
<button type="button" lay-event="tableTreeEdit" id="btn13" class="layui-btn layui-btn-sm">权限管理排序</button>
</div>
</script>
<script src="layui/layui.js"></script>
<script>
layui.config({
base: 'module/'
}).extend({
tableEdit:'js/tableEdit' //表格树依赖我另外写的tableEdit模块，本项目就有。
,tableTree:'js/tableTree'
}).use(['table','layer',"tableTree"], function () {
var table = layui.table
,$ = layui.$
,tableTree = layui.tableTree
,layer = layui.layer
,treeTable = tableTree.render({
elem: '#tableId'
,id:'tableTree'
,url:'module/json/data.json'
,height: 'full-90'
,size:'sm'
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,page: true
,treeConfig:{ //表格树所需配置
showField:'treeName' //表格树显示的字段
,treeid:'id' //treeid所对应字段的值在表格数据中必须是唯一的，且不能为空。
,treepid:'pid'//父级id字段名称
,iconClass:'layui-icon-right' //小图标class样式 窗口图标 layui-icon-layer
,showToolbar: true //展示工具栏 false不展示 true展示
}
,cols: [[
{type:'checkbox'}
,{field:'treeName',title: '名称',width:300}
,{field:'id',title:'id',sort:true,event:'id',config:{type:'input'},width:120}
,{field:'sort', title: '排序',event:'sort',width:70,config:{type:'input'}}
,{field:'url',title:'路径',event:'url',config:{type:'input'},width:150}
,{field:'permissionId ',width:150, title: '权限标识',event:'permissionId',config:{type:'input'}}
,{field:'createDate', title: '创建时间',event:'date',width:120,config:{type:'date',dateType:'date'}}
,{field:'type',title:'类型',event:'type',config:{type:'select',data:[{name:1,value:'菜单'},{name:2,value:'按钮'}]},width:150}
]],done:function () {
treeTable.closeAllTreeNodes();
treeTable.openTreeNode(1)
}
});
/**
*表格的增删改都会回调此方法
* 与table.on(tool(lay-filter))用法一致。
**/
tableTree.on('tool(tableEvent)',function (obj) {
var field = obj.field; //单元格字段
var value = obj.value; //修改后的值
var data = obj.data; //当前行数据
var event = obj.event; //当前单元格事件属性值
//event为del为删除 add则新增 edit则修改 async则为异步请求数据。
//这个三个值固定死了，切莫定义与之三个重复的event。
if(event !== 'del' && event !== 'add' && event !== 'type' && event !== 'async'){
var update = {};
update[field] = value;
obj.update(update);
console.log(obj)
}
if(event === 'type'){
obj.update({type:value.value});
}
if(event === 'del'){
obj.del();
}
if(event === 'add'){ //点击操作栏加号图标时触发
//异步、同步都可以使用
//obj.add(arr)生成表格树,arr参数为数组，数组中元素的treeid字段值重复则被过滤掉
obj.add([]) //参数不传或为空数组时 => 新增空行
}
if(event === 'async'){ //点击方向箭头小图标时触发
//可ajax异步请求后台数据,回调obj.async(arr)生成表格树,arr参数为数组
//数组中元素的treeid字段值重复则被过滤掉
obj.async([{"id":'abc',"treeName":'abc',"permissionId ":'abc',"sort":'3333',createDate:'2020-02-02',type:'1'}]);
}
if(event === 'id'){
$(this).parents('tr').attr('tree-id',value);
}
});
/**
*监听复选框选中状态
**/
tableTree.on('checkbox(tableEvent)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
console.log(obj.data);
});
var isAsc = true;
table.on('toolbar(tableEvent)', function(obj){
var id = $(this).attr("id");
if(id==="btn1"){
//data可以为空，为空则创建空行，否则按照data数据生成行
treeTable.addTopTreeNode();//新增最上级节点
}else if(id === 'btn2') {
console.log(treeTable.getCheckedTreeNodeData()) //获取选中行的树状数据
}else if(id === 'btn3') {
console.log(treeTable.getTableTreeData())//获取表格树所有数据
}else if(id === 'btn4') {
treeTable.closeTreeNode('6'); // 根据tr或者树id关闭相对应树节点
}else if(id === 'btn5') {
treeTable.openTreeNode(6); // 根据tr或者树id展开相对应树节点
}else if(id === 'btn6') {
treeTable.closeAllTreeNodes(); //关闭所有树节点
}else if(id === 'btn7') {
treeTable.openAllTreeNodes(); //展开所有树节点
}else if(id === 'btn8') {
console.log(treeTable.getTreeOptions()); //获取表格配置
}else if(id === 'btn9'){
treeTable.reload(); //表格树进行reload
}else if(id === 'btn10') {
treeTable.delTreeNode('19'); //根据tr元素或者节点id删除节点及相关叶子节点
}else if(id === 'btn11') {
treeTable.clearSearch(); //重置搜索
}else if(id === 'btn12') {
//传了数据进去进行刷新，那么会把原来的数据给删除了，
//然后把传进去的数据进行更新进去
treeTable.refresh();
}else if(id === "btn13"){
treeTable.sortByTreeNode(28,'sort',isAsc); //指定节点或节点id排序
isAsc = !isAsc;
}
});
/**
* 整个表格树排序，与layui进行了整合。
*/
table.on('sort(tableEvent)', function(obj){
treeTable.sort({field:obj.field,desc:obj.type === 'desc'})
});
$('#aassss').on('change',function () {
treeTable.keywordSearch(this.value); //关键词搜索树
});
});
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。