最近公司项目有点多一段时间没有更新，刚完成的一个项目用到了tree树形结构有一些使用心得分享一下.
开始是想使用zTree -- jQuery 控件，后来还是选用了基于layui的树形控件，因为项目后台管理界面都是用到layui，风格上统一一下感觉会好点（有点强迫症- -!）,废话不多说上菜。。
需要引用四个文件jquery，，，，这几个文件可以在下面码云获取
/Y_Qweb/layui-tree
一引用文件
<link rel="stylesheet" href="css/">
<script src=""></script>
<script src=""></script>
<script src="" 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 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": []
}]
}];
(['form'], function() {
var form = ;
var formData;
('submit(*)', function(data) {
debugger;
() //被执行事件的元素DOM对象，一般为button对象
() //被执行提交的form对象，一般在存在form标签时才会返回
() //当前容器的全部表单字段，名值对形式：{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;
(1)
},
click: function(data) { //节点选中状态改变事件监听，全选框有自己的监听事件
(); //得到checkbox原始DOM对象
(); //开关是否开启，true或者false
(); //开关value值，也可以通过得到
(); //得到美化后的DOM对象
},
icon: { //三种图标样式，更改几个都可以，用的是layui的图标
open: "" //节点打开的图标
,
close: "" //节点关闭的图标
,
end: "" //末尾节点的图标
},
color: { //三种图标颜色，独立配色，更改几个都可以
open: "#EE9A00" //节点图标打开的颜色
,
close: "#EEC591" //节点图标关闭的颜色
,
end: "#828282" //末级节点图标的颜色
}
});
//获取全部[选中的][末级节点]原checkbox DOM对象，返回Array
$("#btn1").click(function() {
debugger;
var oCks = (); //这是方法
for(var i = 0; i < ; i++) {
(oCks[i].value);
}
})
//获取全部原checkbox DOM对象，返回Array
$("#btn1").click(function() {
debugger;
var oCks = (); //这是方法
for(var i = 0; i < ; i++) {
(oCks[i].value);
}
})
//更新数据，重新渲染
$("#btn1").click(function() {
debugger;
();
})
//通过value值找父级DOM对象，*节点与错误值均返回null
$("#btn1").click(function() {
debugger;
var oCks = (('txt1').value); //这是方法
if(oCks != null) { //如果返回的对象不为null，则获取到父节点了，如果为null，说明这个值对应的节点是一级节点或是值错误
();
} else {
('无父级节点或value值错误');
}
})
});
</script>参数的一些介绍： elem:body定义容器的id,
data：可以静态的放置json，也可以放入获取数据的端口,
disabled：bool 是否可选（json结构）,
checked：bool 默认选中状态（json结构）,
click:节点选中状态改变事件监听,
icon:设置样式图标,
color:设置图标颜色，
保存提交状态，首先创建一个数组然后调用封装好的GetChecked（）方法，获取到所有选中的checked，遍历得到的这些选中checked，然后push到数组里提交。
恶霸先生趟过的一个坑：
这个控件json的数据结构过于简单，试着尝试能否添加一些结构，发现比较麻烦需要重新定义编写（恶霸先生太懒- -！），又尝试在value里面定义对象需要进一步解析和定义差不多了，最简单的暴力的方法直接value对应的值以字符串拼接的形式存入需要用时在进行截取。
接触这个控件时间太仓促，暂时没有找到更好的方法，大家有更好的方法可以留言，后续找到也会进行更新，欢迎大家指教学习共同进步。