Layui - Xtree 3.0 基于layui form模块的一款带复选框的树型插件

QQ截图20190726112044.png

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

最后修改:2019 年 07 月 26 日
如果觉得我的文章对你有用,请随意赞赏