此版本包含了前两个版本所有的功能,同时修复了一些问题,增加了一些功能,之前的版本可以直接抛弃啦!
本次升级改动较多,参数也有所更改,尽量别直接覆盖之前版本,而是当成一个全新的tree插件来对待吧!
效果图:
![undefined](http://www.acmeworker.com/blogImg/2018042309331833184904.jpg)
功能说明:(详细使用方式在下面的文档中)
1、常规tree,无层级限制;
2、增加checkbox复选框;
3、两种数据绑定方式,json数组/异步数据接口,优化了数据格式;
4、节点默认选中状态;
5、节点是否可用;
6、父级节点拥有其子级节点全选功能;
7、父级节点监听子级节点选中状态,并更改自身状态;
8、加载等待提示;
9、加载完毕后的初始展开状态;
10、三种节点图标样式自定义设置,取自layui图标;
11、三种节点图标颜色自定义配色;
12、全选框;
13、全选框状态更改触发的监听事件自定义;
14、节点状态更改的监听事件自定义(节点点击事件,不包含全选框);
15、可自动撑起容器高度,容器最小高度100px;
16、解决单页面多个xtree冲突的问题;
17、如layui一样简单的使用方式;
提供四种方法:
1、获取全部[选中的][末级节点]原checkbox DOM对象,返回Array
2、获取全部原checkbox DOM对象,返回Array
3、通过value值找父级DOM对象,顶级节点与错误值均返回null
4、更新数据,重新渲染,无返回值
使用文档:
一、引用
页面中引用了 layui 的 css 和 js 后,添加引用 layui-xtree.js 一个文件即可,原生js,不依赖jquery。
所有xtree的js代码均要写在 layui.use(['form'], function () { **这里** });
二、容器
html中只需要一个准备好的div即可,宽度需要你来指定,高度可自动撑起,也可固定配合 overflow: auto;
注意,容器必须放在这样的一个form表单中:<form class="layui-form"></form>
<form class="layui-form">
<div id="xtree1" style="width:400px;border:1px solid black;padding: 10px 0 25px 5px;"></div>
</form>
三、最简单的用法,三个必须的参数
elem:放置xtree的容器id,不要带#号
form:layui的form对象
data:数据,可直接写json数组,也可写一个异步接口
数据格式在下面
var xtree1 = new layuiXtree({
elem: 'xtree1' //(必填) 放置xtree的容器id,不要带#号
, form: form //(必填) layui 的 from
, data: json //(必填) json数组(数据格式在下面)
});
或
var xtree2 = new layuiXtree({
elem: 'xtree2' //(必填) 放置xtree的容器id,不要带#号
, form: form //(必填) layui 的 from
, data: 'server/xtreedata.ashx' //(必填) 数据接口,需要返回以上结构的json字符串(数据格式在下面)
});
四、带全部参数的完整用法:
直接看代码吧
var xtree3 = new layuiXtree({
elem: 'xtree3' //必填
, form: form //必填
, data: 'server/xtreedata2.ashx' //必填
, isopen: false //加载完毕后的展开状态,默认值:true
, ckall: true //启用全选功能,默认值:false
, ckallback: function () { } //全选框状态改变后执行的回调函数
, icon: { //三种图标样式,更改几个都可以,用的是layui的图标
open: "图标代号" //节点打开的图标
, close: "图标代号" //节点关闭的图标
, end: "图标代号" //末尾节点的图标
}
, color: { //三种图标颜色,独立配色,更改几个都可以
open: "#EE9A00" //节点图标打开的颜色
, close: "#EEC591" //节点图标关闭的颜色
, end: "#828282" //末级节点图标的颜色
}
, 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.log(data.othis); //得到美化后的DOM对象
}
});
五、json数据格式,需要的为json数组
title:string 显示的值 (必填)
value:string 隐藏的值 (必填)
checked:bool 默认是否选中,true为选中,false与不填都为不选中 (选填)
disabled:bool 是否可用,true为不可用,false与不填都为可用 (选填)
data: json数组 节点的子节点数组,结构与此节点一致,(必填)如果无子节点则必须为 data:[]
补充说明:
checked只作用于末级节点,有子级的节点不起作用;
disabled作用于非末级节点,你会感觉很奇怪;
结构举例:
[
{
title: "节点1", value: "jd1", data: [
{ title: "节点1.1", checked: true, disabled: true, value: "jd1.1", data: [] }
, { title: "节点1.2", value: "jd1.2", checked: true, data: [] }
, { title: "节点1.3", value: "jd1.3", disabled: true, data: [] }
, { title: "节点1.4", value: "jd1.4", data: [] }
]
}
, {
title: "节点2", value: "jd2", data: [
{ title: "节点2.1", value: "jd2.1", data: [] }
, { title: "节点2.2", value: "jd2.2", data: [] }
, { title: "节点2.3", value: "jd2.3", data: [] }
, { title: "节点2.4", value: "jd2.4", data: [] }
]
}
, { title: "节点3", value: "jd3", data: [] }
, { title: "节点4", value: "jd4", data: [] }
]
六、提供的方法
1、获取全部[选中的][末级节点]原checkbox DOM对象,返回Array
xtree1.GetChecked();
2、获取全部原checkbox DOM对象,返回Array
xtree1.GetAllCheckBox();
3、通过value值找父级原 checkbox DOM对象,顶级节点与错误值均返回null
xtree1.GetParent(‘节点的value值’);
4、更新数据,重新渲染,无返回值
xtree1.render();