树形结构-
最近公司项⽬有点多⼀段时间没有更新，刚完成的⼀个项⽬⽤到了tree树形结构有⼀些使⽤⼼得分享⼀下.
开始是想使⽤zTree -- jQuery 控件，后来还是选⽤了基于layui的树形控件，因为项⽬后台管理界⾯都是⽤到layui，风格上统⼀⼀下感觉会好点（有点强迫症- -!），废话不多说上菜。。
需要引⽤四个⽂件jquery，layui.css，layui.js，layui-xtree.js，这⼏个⽂件可以在下⾯码云获取
⼀引⽤⽂件
<link rel="stylesheet" href="css/layui.css">
<script src="layui-xtree.js"></script>
<script src="layui.js"></script>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
form {
width: 500px;
margin: 10px auto;
}
h1,
h2,
h3 {
padding: 10px 0;
}
a {
text-align: right;
font-size: 18px;
color: #1C86EE;
}
.xtree_contianer {
width: 500px;
border: 1px solid #9C9C9C;
overflow: auto;
margin-bottom: 30px;
background-color: #fff;
padding: 10px 0 25px 5px;
}
.
div-btns {
margin: 20px 0;
}
.layui-form-label {
width: 60px !important;
}
</style>
⼆设置tree容器
<body>
<form class="layui-form">
<div id="YQtree" class="xtree_contianer"></div> <button lay-submit lay-filter="*">提交</button> </form>
</body>
三初始化
使⽤layui要先use模块初始化，不然会报错
<script type="text/javascript">
var json = [{
"title": "后台管理",
"value": "R000001",
"checked": false,
"disabled": false,
"data": []
}, {
"title": "退出",
"value": "R000002",
"checked": false,
"disabled": false,
"data": []
}, {
"title": "前台",
"value": "R000003",
"checked": true,
"disabled": false,
"data": []
}, {
"title": "云数码管理",
"value": "R000004",
"checked": true,
"disabled": false,
"data": []
}, {
"title": "⽹站注册",
"value": "R000005",
"checked": false,
"disabled": false,
"data": []
}, {
"title": "⽤户信息管理",
"value": "R000006",
"checked": false,
"disabled": false,
"data": []
}, {
"title": "设置",
"value": "R000007",
"checked": false,
"disabled": false,
"data": [{
"title": "菜单管理",
"value": "R000008",
"checked": false,
"disabled": false,
"data": []
}, {
"title": "⾓⾊管理",
"value": "R000009",
"checked": false,
"disabled": false,
"data": []
}, {
"title": "页⾯管理",
"value": "R000010",
"checked": false,
"disabled": false,
"data": []
}]
jquery字符串截取}];
layui.use(['form'], function() {
var form = layui.form;
var formData;
<('submit(*)', function(data) {
debugger;
console.log(data.elem) //被执⾏事件的元素DOM对象，⼀般为button对象
console.log(data.form) //被执⾏提交的form对象，⼀般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} return false; //阻⽌表单跳转。如果需要表单跳转，去掉这段即可。
});
var xtree = new layuiXtree({
elem: 'YQtree',
form: form //(必填) layui 的 from
,
data: json //(必填) json数据
,
isopen: false //加载完后关闭
,
ckall: true,
ckallback: function(data) {
debugger;
console.log(1)
},
click: function(data) { //节点选中状态改变事件监听，全选框有⾃⼰的监听事件
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启，true或者false
console.log(data.value); //开关value值，也可以通过data.elem.value得到
console.his); //得到美化后的DOM对象
},
icon: { //三种图标样式，更改⼏个都可以，⽤的是layui的图标
open: "" //节点打开的图标
,
close: "" //节点关闭的图标
,
end: "" //末尾节点的图标
},
color: { //三种图标颜⾊，独⽴配⾊，更改⼏个都可以
open: "#EE9A00" //节点图标打开的颜⾊
,
close: "#EEC591" //节点图标关闭的颜⾊
,
end: "#828282" //末级节点图标的颜⾊
}
});
//获取全部[选中的][末级节点]原checkbox DOM对象，返回Array
$("#btn1").click(function() {
debugger;
var oCks = xtree.GetChecked(); //这是⽅法
for(var i = 0; i < oCks.length; i++) {
console.log(oCks[i].value);
}
})
//获取全部原checkbox DOM对象，返回Array
$("#btn1").click(function() {
debugger;
var oCks = xtree.GetAllCheckBox(); //这是⽅法
for(var i = 0; i < oCks.length; i++) {
console.log(oCks[i].value);
}
})
//更新数据，重新渲染
$("#btn1").click(function() {
debugger;
})
//通过value值⽗级DOM对象，顶级节点与错误值均返回null
$("#btn1").click(function() {
debugger;
var oCks = xtree.ElementById('txt1').value); //这是⽅法
if(oCks != null) { //如果返回的对象不为null，则获取到⽗节点了，如果为null，说明这个值对应的节点是⼀级节点或是值错误
console.log(oCks.value);
} else {
console.log('⽆⽗级节点或value值错误');
}
})
});
</script>
参数的⼀些介绍： elem:body定义容器的id,
data：可以静态的放置json，也可以放⼊获取数据的端⼝,
disabled：bool 是否可选（json结构）,
checked：bool 默认选中状态（json结构）,
click：节点选中状态改变事件监听,
icon：设置样式图标,
color：设置图标颜⾊，
保存提交状态，⾸先创建⼀个数组然后调⽤封装好的GetChecked（）⽅法，获取到所有选中的checked，遍历得到的这些选中checked，然后push到数组⾥提交。
恶霸先⽣趟过的⼀个坑：
这个控件json的数据结构过于简单，试着尝试能否添加⼀些结构，发现⽐较⿇烦需要重新定义编写（恶霸先⽣太懒- -！），⼜尝试在value⾥⾯定义对象需要进⼀步解析和定义差不多了，最简单的暴⼒的⽅法直接value对应的值以字符串拼接的形式存⼊需要⽤时在进⾏截取。
接触这个控件时间太仓促，暂时没有到更好的⽅法，⼤家有更好的⽅法可以留⾔，后续到也会进⾏更新，欢迎⼤家指教学习共同进步。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论