[layui - xtree]基于layui form模块制作的一款带复选框的tree结构树

2018年1月11日升级
Layui - Xtree 3.0

此版本包含了前两个版本所有的功能，同时修复了一些问题，增加了一些功能，之前的版本可以直接抛弃啦！

本次升级改动较多，参数也有所更改，尽量别直接覆盖之前版本，而是当成一个全新的tree插件来对待吧！

码云地址： https://gitee.com/xianglikai1/layui-tree2.0 

Demo地址： http://www.acmeworker.com/layuiXtree/XtreeDemo 

我的博客： http://www.acmeworker.com/ 

效果图：

---

功能说明：（详细使用方式在下面的文档中）
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();

---

结束语：
很抱歉，依然不兼容IE  
如果你看代码会发现我真的是努力过了，水平有限，并未成功兼容，接下来我会继续尝试去兼容IE。

最后，祝 layui 越来越好！