[layui-xtree 3.0]依赖form模块的带 复选框 的tree插件

分享 未结 精帖
83 11785
小巷
小巷 VIP3 2017-11-22
悬赏:20飞吻
2018年1月11日升级
Layui - Xtree 3.0
此版本包含了前两个版本所有的功能,同时修复了一些问题,增加了一些功能,之前的版本可以直接抛弃啦!
本次升级改动较多,参数也有所更改,尽量别直接覆盖之前版本,而是当成一个全新的tree插件来对待吧!

Demo地址: http://www.bestacme.com
码云地址: https://gitee.com/xianglikai1/layui-tree2.0
博客地址: http://blog.csdn.net/xianglikai1/article/details/79032278

效果图:

功能说明:(详细使用方式在下面的文档中)
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 越来越好!
回帖
  • Fufu
    2017-11-22
    打野路过,赞一个。
    5 回复
  • 候鸟迷途
    2017-11-22
    插个眼[嘻嘻]
    3 回复
  • 猫吃
    2017-11-22
    虽然还没用到,但我相信我会用到,先参考参考
    1 回复
  • 小巷
    2017-11-22
    @冬日温暖 啊这个...我觉得在里面比较好,因为图标是用来打开节点的,节点选中的状态应该与节点最近。
    再升级我会考虑增加这个属性吧,本次就抱歉了[失望]
    1 回复
  • 小巷
    2017-11-22
    @JERSENLEIBOY 额,这个我也考虑过,并且是抽了三根烟仔细的考虑过,你说的对于表格来说比较好用,而我认为对于tree来说,父节点的选中状态更多的是提示它是否有子节点被选中[失望]
    1 回复
  • Lueng
    2017-11-22
    这个可以!
    1 回复
  • stock2
    2017-11-22
    先收藏,谢谢
    1 回复

  • 撸主, 数据 的 上级 的值怎么 conslog.log出来呢
    1 回复
  • 小巷
    2017-11-24
    @hello_anybody 没有写这个功能呢,很需要吗?
    1 回复
  • 小巷
    2017-11-24
    @Insanecici 我这是带有.net服务端的.....
    你直接打开是不行的,需要IIS发布起来或是Visual Studio打开才有效果....
    里面的C#代码需要编译的...
    1 回复
  • 小巷
    2017-11-24
    @石头人 应该是数据的问题,改成严格格式再试试

    {title:"节点1",value:"jd1",checked:false,disabled:false,data:[]}
    checked必填,不需要选中就填false
    disabled必填,不需要限制就填false
    data如果没数据别填null,填个[]
    1 回复
  • yuchaosan
    2017-11-22
    不错不错,赞一个。
    0 回复
  • 绝命老白
    2017-11-22
    厉害,收藏备用
    0 回复
  • flyer968
    2017-11-22
    [可爱]
    0 回复
  • [赞] 十分赞~

    问一个小问题,一般复选框不都在文件或文件夹图标的外面吗?这个在里面看着似乎不太适应啊~有没有办法调整一下?或者有这样的设置~
    0 回复
  • ZLBNTE
    2017-11-22
    [可爱]
    0 回复
  • JERSENLEIBOY
    2017-11-22
    有个细节 个人觉得全选之后 子节点如果取消一个 全选的选中应该去掉 个人看法
    0 回复
  • 哥将
    2017-11-22
    不错,赞个
    0 回复
  • 小熊371
    2017-11-22
    怎样获取某末端的ID(包含它所有父节点的id)
    0 回复
  • 狂想123
    2017-11-22
    收藏一下,以待备用
    0 回复
  • 放个3级头,以后来捡
    0 回复
  • very goood
    0 回复
  • good,马上搬走
    0 回复
  • 小巷
    2017-11-22
    @小熊371 对不住,没有明白你的需求用途....
    我提供的两个取值方法应该能应付大多数的情况,要不你再仔细说一下你的使用场景,我帮你加上这个方法...
    0 回复
  • @小巷 [good] 嗯嗯,确实是啊,忽略这一点了,别的框架一般前面有个加减号,然后复选框,再有图标,现在这个这样确实没毛病!
    0 回复
  • ‭‭869
    2017-11-22
    点个赞,感谢分享
    0 回复
  • peng_yyn
    2017-11-22
    点个赞,感谢分享![good]
    0 回复
  • 千芝鹤
    2017-11-23
    [给力]
    0 回复
  • rocx
    2017-11-23
    收藏备用下
    0 回复
  • 点个赞,感谢分享![good]
    0 回复
本帖已设置禁止回复