layui树形菜单ajax,treeSelect
扩展 layui 的权限树 authtree
layui⾃⾝提供⼀个tree树形菜单，但是并不适⽤于权限控制中，⽐如：选择⽤户组的权限(树形结构)，需要使⽤form表单提交⽤户所选权限数据。
项⽬中遇到了此类需求，所以特意封装了⼀个扩展⽤于渲染此类操作。
特别注意：权限树的渲染⽬标需要在 .layui-form .layui-item下，否则将⽆法渲染出样式。
功能演⽰：
功能概览：
⽀持⽆限级渲染结构树
点击深层次节点，⽗级节点中没有被选中的节点会被⾃动选中
单独点击⽗节点，⼦节点会全部 选中/去选中
⽀持默认选中(适⽤于编辑权限)
⽀持⾃定义表单名称(上传数据的name)
⽀持⾃定义lay-filter⽤于监听权限树选中(v0.2新增)
⽀持获取选中叶⼦结点信息(v0.2新增)
使⽤⽅法：
注意：此扩展需先引⼊layui.js⽅可正常使⽤。demo详见index.html
js使⽤样例：
// 注：extends/为authtree.js的存放路径
base: 'extends/',
}).extend({
authtree: 'authtree',
});
// ⼀般是异步调⽤
layui.use(['jquery', 'authtree', 'form'], function(){
var $ = layui.jquery;
var authtree = layui.authtree;layui下载
var form = layui.form;
$.ajax({
url: 'tree.json',
dataType: 'json',
success: function(data){
/
/ 渲染时传⼊渲染⽬标ID，树形结构数据(具体结构看样例，checked表⽰默认选中)，以及input表单的名字
// 监听⾃定义lay-filter选中状态，PS:layui现在不⽀持多次监听，所以扩展⾥边只能改变触发逻辑，然后引起了事件冒泡延迟的BUG，要是谁有好的建议可以反馈我
<('checkbox(lay-check-auth)', function(data){
// 获取所有节点
var all = All('#LAY-auth-tree-index');
console.log('all', all);
// 获取所有已选中节点
var checked = Checked('#LAY-auth-tree-index');
console.log('checked', checked);
// 获取所有未选中节点
var notchecked = NotChecked('#LAY-auth-tree-index');
console.log('notchecked', notchecked);
// 注意这⾥：需要等待事件冒泡完成，不然获取叶⼦节点不准确。
setTimeout(function(){
// 获取选中的叶⼦节点
var leaf = Leaf('#LAY-auth-tree-index');
console.log(leaf);
}, 100);
});
}
})
});
权限树返回样例：
name是节点名称，value是需要上传的值(如：菜单id)，checked控制是否默认选中，list内部是⼦节点。
{
"code":0,
"msg":"获取成功",
"data":{
"trees":[
{"name":"⽤户管理","value":"xsgl","checked":true,"list":[
{"name":"⽤户组","value":"xsgl-basic","checked":true,"list":[
{"name":"本站⽤户","value":"xsgl-basic-xsxm","checked":true,"list":[
{"name":"⽤户列表","value":"xsgl-basic-xsxm-readonly","checked":true},
{"name":"新增⽤户","value":"xsgl-basic-xsxm-editable","checked":false}
]},
{"name":"第三⽅⽤户","value":"xsgl-basic-xsxm","checked":true,"list":[
{"name":"⽤户列表","value":"xsgl-basic-xsxm-readonly","checked":true}
]}
]}
]},
{"name":"⽤户组管理","value":"sbgl","checked":true,"list":[
{"name":"⾓⾊管理","value":"sbgl-sbsjlb","checked":true,"list":[
{"name":"添加⾓⾊","value":"sbgl-sbsjlb-dj","checked":true},
{"name":"⾓⾊列表","value":"sbgl-sbsjlb-yl","checked":false}
]},
{"name":"管理员管理","value":"sbgl-sbsjlb","checked":true,"list":[
{"name":"添加管理员","value":"sbgl-sbsjlb-dj","checked":true},
{"name":"管理员列表","value":"sbgl-sbsjlb-yl","checked":false}
]}
]}
]
}
}
Demo说明：
index.html页⾯⽂件+JS处理⽂件
tree.json模拟权限树数据
extends/authtree.js权限树扩展
layui/官⽹下载的layui
更新记录：
2018-05-03 v0.4 新增获取全部数据、全部已选数据、全部未选数据⽅法，修复编码问题。
2018-05-03 v.03 新增默认展开全部的配置项(openall)，并将部分配置项作为可选参数通过对象传递。
2018-03-30 v0.2 修复⼀级菜单没有⼦菜单时，显⽰错位的问题，⽀持获取叶⼦结点数据，⽀持⾃定义lay-filter 2018-03-24 v0.1 最初版本

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。