近些天接的项目用的是layui。以前没用过,踩了很多坑,坑就不多说了,直接说layui的tree。因为自带的tree不满足需求,所以在论坛、博客上找了很久终于找到了可以复选的的插件,原文地址:https://blog.csdn.net/xianglikai1/article/details/79032278。这里谢谢原作者,从源码中学到了很多。

这里我就直接上代码了。(注:因为数据结构问题我将源码中的json数据结构title改为id,value改为name。勾选树的获取值未变:data.value

    //创建tree
var xtree = new layuiXtree({
elem: xTree' //放xtree的容器(必填)
, form: form //layui form对象 (必填)
, data: json //数据,结构请参照下面 (必填)
, isopen: true //初次加载时全部展开,默认true (选填)
, checked: true
, ischecked: deptIds //初次加载勾选的数据。格式(a,b,c)
, single: single//是否为单选 ,默认为false(多选)
, ckall: false //启用全选功能,默认值:false
, color: "#039adf " //图标颜色 (选填)
, icon: { //图标样式 (选填)
open: "" //节点打开的图标
, close: "" //节点关闭的图标
, end: "&#xe621" //末尾节点的图标
}
, click: function (data) { //节点选中状态改变事件监听,全选框有自己的监听事件
//console.log(data.elem.leaf);//是否为叶子节点
//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对象
}
});
ischecked:初次加载勾选的数据。格式(a,b,c)。场景用于一些修改信息反勾选的;


single:true单选、false多选。(注:因场景要求我把父子关联渲染注释掉了)


另外在项目过程中,有一处需要CheckBox框与title分开,做成两个点击事件。我暂时屏蔽了。如果需要就改一下,然后在from,里面用jQuery获取span标签。记住一点要在from里面,不然没效果。
改动的js文件地址:链接:https://pan.baidu.com/s/1iHYIEKeI3eVkFa6O8BCMwg 密码:g31r。 效果图就不上了,其实就是想给大家分享下,自己做个笔记,额,哈哈。。。再次谢谢原作者!

依赖layui form模块 复选框tree插件(拓展可根据属性单选还是多选,数据反选)的更多相关文章

  1. jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例

    2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...

  2. nodetree中 前面复选框禁用插件

    nodetree中 前面复选框的去掉插件 extendTreeCheck.js /** * tree方法扩展 * 作者:小雪转中雪 */ $.extend($.fn.tree.methods, { / ...

  3. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  4. Spring MVC 多选框 绑定 Entity 中的 list 属性

    问题描述: 有两个类:Record.java 和 User.java,Record中有个attenders属性,是List<User>类型. 我想绑定Record中的attenders.网 ...

  5. 关于textjs的tree带复选框的树

    通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js ...

  6. 复选框input:checkbox

      复选框 CreateTime--2017年6月5日14:04:55Author:Marydon 五.复选框 (一)语法 <input type="checkbox" /& ...

  7. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  8. 在word中做复选框打对勾钩

    在word中做复选框打对勾钩 现在终于搞明白正确的操作方法 一.你在word里输入2610,按alt+X就能出 空checkbox 你在word里输入2611,按alt+X就能出 打了勾的checkb ...

  9. 把复选框变成单选框(prop,attr的区别)

    如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...

随机推荐

  1. HashMap和Hashtable的异同点

    HashMap和Hashtable的异同点 不同点: 1.HashMap的父类是AbstractMap,而Hashtable的父类是Dictiionary: 2.HashMap的key和value可以 ...

  2. USB转串口驱动代码分析

    1.USB插入时,创建设备 [plain] view plaincopy DriverObject->DriverExtension->AddDevice = USB2COM_PnPAdd ...

  3. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  4. cookies、sessionStorage、和localStorage的区别。

    为什么会有cookie和session? 我们都知道http是无状态的协议无连接的,客户每次在读取web页面时服务器都会打开新的会话.服务器不会自动维护客户上下文的信息,那么session就是一种保存 ...

  5. IOS开发之XCode学习010:定时器和视图对象

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.通过点击"启动定时器"按钮 ...

  6. 微信开发中access_token,js_ticket,时间戳,签名生成工具

    Access_token生成工具 工具地址:https://mp.weixin.qq.com/debug 这个工具主要用来验证和生成微信公众号access_token,主要有正确的app_id和app ...

  7. 获取MySql每一列的数据类型和长度默认值等信息

    如何获取MySql表中各个列的数据类型? show columns from tablename 返回结果如下: id    int(11)     NO  PRI         auto_incr ...

  8. python 字符串格式化输出 %d,%s及 format函数

    旧式格式化方式:%s,%d 1.顺序填入格式化内容 s = "hello %s, hello %d"%("world", 100) print(s) 结果: ' ...

  9. 如何解决 touchstart 事件与 click 事件的冲突

    一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...

  10. 【BZOJ4653】【NOI2016】区间(线段树)

    [BZOJ4653][NOI2016]区间(线段树) 题面 BZOJ 题解 \(NOI\)良心送分题?? 既然是最大长度减去最小长度 莫名想到那道反复减边求最小生成树 从而求出最小的比值 所以这题的套 ...