1、插件地址：https://gitee.com/grapess/layui
2、樹形表格前端
<script type="text/html" id="toolbarDemo">
? ? <div class="layui-btn-container">
? ? ? ? <button id="add" lay-event="addPermission" class="layui-btn layui-btn-sm btnys">添加</button>
? ? ? ? <button class="layui-btn layui-btn-sm" lay-event="btn-expand">全部展開</button>
? ? ? ? <button class="layui-btn layui-btn-sm" lay-event="btn-fold">全部折疊</button>
? ? ? ? <button class="layui-btn layui-btn-sm" lay-event="btn-refresh">刷新表格</button>
? ? </div>
</script>
<div class="xm">
? ? <div class="xm-d2">
? ? ? ? <div class="xm-d2-hang2">
? ? ? ? ? ? <table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table>
? ? ? ? </div>
? ? </div>
</div>
<script>? ?
$(document).ready(function () {
? ? ? ? layui.config({
? ? ? ? ? ? base : '/layui/'
? ? ? ? }).extend({
? ? ? ? ? ? treetable : 'treetable-lay/treetable'
? ? ? ? });
? ? ? ? // 存放拓展模塊的根目錄
? ? ? ? layui.use(['treetable', 'table', 'layer'], function () {
? ? ? ? ? ? var table = layui.table;
? ? ? ? ? ? var layer = layui.layer;
? ? ? ? ? ? var treetable = layui.treetable;
? ? ? ? ? ? //渲染表格
? ? ? ? ? ? var renderTable = function () {
? ? ? ? ? ? ? ? layer.load(2);? //加載層
? ? ? ? ? ? ? ? treetable.render({
? ? ? ? ? ? ? ? ? ? height: 'full-160',
? ? ? ? ? ? ? ? ? ? id: 'menu',
? ? ? ? ? ? ? ? ? ? treeColIndex: 1, //樹形圖標(biāo)顯示在第幾列
? ? ? ? ? ? ? ? ? ? treeSpid: '0', //最上級(jí)的父級(jí)id
? ? ? ? ? ? ? ? ? ? treeIdName: 'id', //id字段的名稱
? ? ? ? ? ? ? ? ? ? treePidName: 'parentId', //父級(jí)節(jié)點(diǎn)字段
? ? ? ? ? ? ? ? ? ? treeDefaultClose: false, //是否默認(rèn)折疊
? ? ? ? ? ? ? ? ? ? treeLinkage: false, //父級(jí)展開時(shí)是否自動(dòng)展開所有子級(jí)
? ? ? ? ? ? ? ? ? ? elem: '#menu', //表格id
? ? ? ? ? ? ? ? ? ? url: "",
? ? ? ? ? ? ? ? ? ? toolbar: '#toolbarDemo',
? ? ? ? ? ? ? ? ? ? page: false,
? ? ? ? ? ? ? ? ? ? cols: [[
? ? ? ? ? ? ? ? ? ? ? ? {type: 'radio'},
? ? ? ? ? ? ? ? ? ? ? ? {field: 'name', title: '菜單名稱'},
? ? ? ? ? ? ? ? ? ? ? ? {field: 'url', title: '地址'},
? ? ? ? ? ? ? ? ? ? ? ? {field: 'icon', hide: true, title: '圖標(biāo)'},
? ? ? ? ? ? ? ? ? ? ? ? {field: 'idx', title: '排序'}
? ? ? ? ? ? ? ? ? ? ]],
? ? ? ? ? ? ? ? ? ? //數(shù)據(jù)渲染完的回調(diào)
? ? ? ? ? ? ? ? ? ? done: function () {
? ? ? ? ? ? ? ? ? ? ? ? //關(guān)閉加載
? ? ? ? ? ? ? ? ? ? ? ? layer.closeAll('loading');
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? };
? ? ? ? ? ? renderTable();
? ? ? ? });
? ? })
</script>
3、后臺(tái)數(shù)據(jù)結(jié)構(gòu)
{ "msg": "true", "code": 0, "data": [{ "Id": 1, "cName": "開發(fā)部", "cType": null, "icon": null, "pid": 0, "seq": 0, "resType": "0" }, { "Id": 2, "cName": "第一組", "cType": "開發(fā)部", "icon": null, "pid": 1, "seq": 1, "resType": "1" }, { "Id": 3, "cName": "第二組", "cType": "開發(fā)部", "icon": null, "pid": 1, "seq": 2, "resType": "1" }, { "Id": 4, "cName": "運(yùn)營部", "cType": "運(yùn)營部", "icon": null, "pid": 1, "seq": 3, "resType": "1" }, { "Id": 5, "cName": "第一組", "Type": "運(yùn)營部", "icon": null, "pid": 1, "seq": 4, "resType": "1" }, { "Id": 6, "cName": "第一組", "cType": "運(yùn)營部", "icon": null, "pid": 1, "seq": 5, "resType": "1" }], "count": 6 }
實(shí)現(xiàn)效果如下：
4丹拯、新增時(shí)下拉框樹形
前端代碼
<input type="text" id="tree" lay-filter="tree" class="layui-input">
<script>
layui.config({
base:"/layui/module/"
? ? }).extend({treeSelect:"treeSelect/treeSelect"});
layui.use(['treeSelect','form'],function () {
????var treeSelect=layui.treeSelect;
????treeSelect.render({
????????// 選擇器
? ? ? ? ? ? elem:'#tree',
????????????// 數(shù)據(jù)
? ? ? ? ? ? data:url ,
????????????// 異步加載方式：get/post耕餐，默認(rèn)get
? ? ? ? ? ? type:'get',
????????????// 占位符
? ? ? ? ? ? placeholder:'請(qǐng)選擇',
????????????// 是否開啟搜索功能：true/false，默認(rèn)false
? ? ? ? ? ? search:true,
????????????style:{
????????????????????line: {// 連接線
?????????????????????????enable:true // 是否開啟：true/false
? ? ? ? ? ? ? ????????? },
????????????????folder: {// 父節(jié)點(diǎn)圖標(biāo)
? ? ? ? ? ? ? ? ? ? ????enable:true // 是否開啟：true/false
? ? ? ? ? ? ? ? ????},
????????????????},
// 點(diǎn)擊回調(diào)
? ? ? ? ? ? click:function(d){
????????????????console.log(d);
????????????},
// 加載完成后的回調(diào)函數(shù)
? ? ? ? ? ? success:function (d) {
????????????????console.log(d);
????//? ? ? ? ? ? ? ? 選中節(jié)點(diǎn)孔飒，根據(jù)id篩選
? ? ? ? ? ? ????? treeSelect.checkNode('tree',1);
//? ? ? ? ? ? ? ? 獲取zTree對(duì)象灌闺，可以調(diào)用zTree方法
? ? ? ? ? ? ????? var treeObj =treeSelect.zTree('tree');
????????????????console.log(treeObj);
//? ? ? ? ? ? ? ? 刷新樹結(jié)構(gòu)
? ? ? ? ? ? ????? treeSelect.refresh();
????????}
????});
});
</script>
后臺(tái)返回?cái)?shù)據(jù)結(jié)構(gòu)
[ { "id": 1, "name": "zzz", "open": true, "children": [ { "id": 2, "name": "1", "open": false, "checked": true }, { "id": 3, "name": "2", "open": false, "checked": true }, { "id": 17, "name": "3z", "open": false, "checked": true } ], "checked": true }, { "id": 4, "name": "評(píng)論", "open": false, "children": [ { "id": 5, "name": "留言列表", "open": false, "checked": false }, { "id": 6, "name": "發(fā)表留言", "open": false, "checked": false }, { "id": 333, "name": "233333", "open": false, "checked": false } ], "checked": false }, { "id": 10, "name": "權(quán)限管理", "open": false, "children": [ { "id": 8, "name": "用戶列表", "open": false, "children": [ { "id": 40, "name": "添加用戶", "open": false, "url": null, "title": "40", "checked": false, "level": 2, "check_Child_State": 0, "check_Focus": false, "checkedOld": false, "dropInner": false, "drag": false, "parent": false }, { "id": 41, "name": "編輯用戶", "open": false, "checked": false }, { "id": 42, "name": "刪除用戶", "open": false, "checked": false } ], "checked": false }, { "id": 11, "name": "角色列表", "open": false, "checked": false }, { "id": 13, "name": "所有權(quán)限", "open": false, "children": [ { "id": 34, "name": "添加權(quán)限", "open": false, "checked": false }, { "id": 37, "name": "編輯權(quán)限", "open": false, "checked": false }, { "id": 38, "name": "刪除權(quán)限", "open": false, "checked": false } ], "checked": false }, { "id": 15, "name": "操作日志", "open": false, "checked": false } ], "checked": false } ]
效果如下：
