近些天接的项目用的是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. FusionCharts MSBar3D图

    1.静态页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  2. jQuery提示parsererror错误解决办法

    jquery来处理ajax,用到了json.但是很诧异,jquery的ajax回调时一直调用了error函数(一直提示parsererror异常),success函数一次没执行过 $.ajax({ t ...

  3. 拼接SQL语句缺少“break”

    1.错误描述 [ERROR:]2015-07-20 16:42:21,734 [插入失败] org.hibernate.exception.SQLGrammarException: error exe ...

  4. web开发性能优化---安全篇

    1.权限管理 从模块.表单.数据审核.功能按钮全面数据安全验证及管理. 2.ip验证 数据接口访问进行IP校验 3.登录.操作日志.程序安全日志  系统所有用户登录.操作全部日志记录. 程序安全日志操 ...

  5. TreeNode.trage的使用

    对于trage的使用 msdn是这样解释的 TreeNode.Target 属性 .NET Framework 2.0 其他版本 注意:此属性在 .NET Framework 2.0 版中是新增的. ...

  6. PyCharm的注册码获取

    1.在server选项里边输入 http://elporfirio.com:1017/就可以了.  2.server选项里边输入 http://idea.imsxm.com/ 3.server选项里边 ...

  7. 第二章 js数据类型和变量

    一.驼峰命名法 第一个单词首字母大写,如果有多个单词的话其他的单词首字母大写. eg:nickName 二.prototype现象 新的命名规范. 常用的:以下划线为首字母(变量为对象的私有成员变量) ...

  8. HAproxy负载均衡

    HAproxy 简介 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. HAProxy特别适用于那些负载特大的web站点,这 ...

  9. 算法精解:DAG有向无环图

    DAG是公认的下一代区块链的标志.本文从算法基础去研究分析DAG算法,以及它是如何运用到区块链中,解决了当前区块链的哪些问题. 关键字:DAG,有向无环图,算法,背包,深度优先搜索,栈,BlockCh ...

  10. Mysql遇到 is marked as crashed and should be repaired 问题解决方法

    遇到 找到mysql的安装目录的bin/myisamchk工具,在命令行中输入: myisamchk -c -r /var/lib/mysql/ambari/alert_current.MYI 问题解 ...