近些天接的项目用的是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. php simpleXML操作xml的用法

    XML简介 XML是一种流行的半结构化文件格式,以一种类似数据库的格式存储数据.在实际应用中,一些简单的.安全性较低的数据往往使用 XML文件的格式进行存储.这样做的好处一方面可以通过减少与数据库的交 ...

  2. 新工具︱微软Microsoft Visual Studio的R语言模块下载试用Ing...(尝鲜)

    笔者:前几天看到了以下的图片,着实一惊.作为R语言入门小菜鸟,还是觉得很好看,于是花了一点时间下载下来试用了一下,觉得还是挺高大上的. 就是英文不好是硬伤.下面贴给小白,我当时的下载步骤与遇见的问题. ...

  3. 做一个合格的Team Leader -- 基本概念

    1.领导和管理 人们乐于被领导:他们不喜欢被管理,不喜欢像牛一样被驱赶或指挥. 管理者强迫人们服从他们的命令,而领导者则会带领他们一起工作. 管理是客观的,没有个人感情因素,它假定被管理者没有思想和感 ...

  4. SQL面试题收录

    1.用一条SQL语句 查询出每门课都大于80分的学生姓名 SELECT DISTINCT NAME FROM t_score_tab WHERE NAME NOT IN (SELECT DISTINC ...

  5. Codeforces Round #427 (Div. 2) D - Palindromic characteristics

    本题是个简单的区间dp 最近都没时间做题了,被我妈强制喊回去,然后颓废了10天(回家也没发控制住自己= = 我的锅),计划都打乱了,本来还报名了百度之星,然后没时间参加 #include<cma ...

  6. freemark标签从后台接过来数据Boolean在前台还是Boolean输出(四)

    FREEMARK标签中输出BOOLEAN值 private boolean showHeader=true; public boolean getShowHeader(){ return this.s ...

  7. 解决DOS批处理中一个困扰我几十个月的编码问题

    DOS批处理中的编码很有意思.&是命令连接符,先执行&左边的命令,再执行&右边的命令.|是管道操作,把左边的输出当作右边的输入.此外还有&&和||,当要表示这些 ...

  8. 配置Tomcat线程参数maxThreads、acceptCount

    一.配置Tomcat/conf/server.xml修改配置 <Connector port="8080" protocol="org.apache.coyote. ...

  9. 【BZOJ2152】聪聪可可(点分治)

    [BZOJ2152]聪聪可可(点分治) 题面 Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电 ...

  10. 使用 vscode将本地项目上传到github以及删除github上的某个文件夹

    安装Git后,可以看到windows环境下有两个命令输入窗口Git CMD 和Git Bash Git GUI是可视化图形界面 Git中的Bash是基于CMD的,在CMD的基础上增添一些新的命令与功能 ...