Layui - Xtree 3.0 http://acmeworker.com/BlogContent?type=1038

2018年1月11日升级

Layui - Xtree 3.0

此版本包含了前两个版本全部的功能，同时修复了一些问题，增长了一些功能，以前的版本能够直接抛弃啦！
本次升级改动较多，参数也有所更改，尽可能别直接覆盖以前版本，而是当成一个全新的tree插件来对待吧！

 

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

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

博客地址： http://www.acmeworker.com/BlogContent?type=1038

效果图：

 

---

功能说明：（详细使用方式在下面的文档中）
一、常规tree，无层级限制；
二、增长checkbox复选框；
三、两种数据绑定方式，json数组/异步数据接口，优化了数据格式；
四、节点默认选中状态；
五、节点是否可用；
六、父级节点拥有其子级节点全选功能；
七、父级节点监听子级节点选中状态，并更改自身状态；
八、加载等待提示；
九、加载完毕后的初始展开状态；
十、三种节点图标样式自定义设置，取自layui图标；
十一、三种节点图标颜色自定义配色；
十二、全选框；
1三、全选框状态更改触发的监听事件自定义；
1四、节点状态更改的监听事件自定义（节点点击事件，不包含全选框）；
1五、可自动撑起容器高度，容器最小高度100px；
1六、解决单页面多个xtree冲突的问题；
1七、如layui同样简单的使用方式；

提供四种方法：
一、获取所有[选中的][末级节点]原checkbox DOM对象，返回Array
二、获取所有原checkbox DOM对象，返回Array
三、经过value值找父级DOM对象，顶级节点与错误值均返回null
四、更新数据，从新渲染，无返回值

---

使用文档：

1、引用
页面中引用了 layui 的 css 和 js 后，添加引用 layui-xtree.js 一个文件便可，原生js，不依赖jquery。
全部xtree的js代码均要写在 layui.use(['form'], function () { **这里** });

2、容器
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>

3、最简单的用法，三个必须的参数
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字符串（数据格式在下面）
});

4、带所有参数的完整用法：
直接看代码吧

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对象
       }
});

5、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: [] }
]

6、提供的方法
一、获取所有[选中的][末级节点]原checkbox DOM对象，返回Array

xtree1.GetChecked();

二、获取所有原checkbox DOM对象，返回Array

xtree1.GetAllCheckBox();

三、经过value值找父级原 checkbox DOM对象，顶级节点与错误值均返回null

xtree1.GetParent(‘节点的value值’);

四、更新数据，从新渲染，无返回值

xtree1.render();

---

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