依赖layui form模块 复选框tree插件(拓展可根据属性单选还是多选,数据反选)
近些天接的项目用的是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: "" //末尾节点的图标
}
, 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插件(拓展可根据属性单选还是多选,数据反选)的更多相关文章
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...
- nodetree中 前面复选框禁用插件
nodetree中 前面复选框的去掉插件 extendTreeCheck.js /** * tree方法扩展 * 作者:小雪转中雪 */ $.extend($.fn.tree.methods, { / ...
- jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格
1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...
- Spring MVC 多选框 绑定 Entity 中的 list 属性
问题描述: 有两个类:Record.java 和 User.java,Record中有个attenders属性,是List<User>类型. 我想绑定Record中的attenders.网 ...
- 关于textjs的tree带复选框的树
通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js ...
- 复选框input:checkbox
复选框 CreateTime--2017年6月5日14:04:55Author:Marydon 五.复选框 (一)语法 <input type="checkbox" /& ...
- 关于复选框input[type=checkbox]
关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...
- 在word中做复选框打对勾钩
在word中做复选框打对勾钩 现在终于搞明白正确的操作方法 一.你在word里输入2610,按alt+X就能出 空checkbox 你在word里输入2611,按alt+X就能出 打了勾的checkb ...
- 把复选框变成单选框(prop,attr的区别)
如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...
随机推荐
- VxWorks启动过程详解(上)
vxworks有三种映像: VxWorks Image的文件类型有三种 Loadable Images:由Boot-ROM引导通过网口或串口下载到RAM ROM-based Images(压缩/没有压 ...
- java中equals和==以及toString
我们通常在控制台输出时使用System.out.print(),print只能直接输出基本类型和字符串,对于其他的类型直接输出将会输出@开头的引用,因此若需要输出对应的内容则需要使用toSring方法 ...
- Java和Flex整合报错(一)
1.错误描述 at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(Def ...
- 常用UI框架
jQuery Smart UI 链接地址:http://smartui.chinamzz.com Liger UI框架链接地址:http://www.ligerui.com/ DWZ富客户端框架(jQ ...
- js数组使用JSON.stringify()和toString()的区别,JSON.parse
JSON.stringify()中的<br><br>var arr = [1,2,3,4]; console.log(arr.toString()); // 1,2,3,4 a ...
- Delphi基础-数据类型
枚举类型 Pascal程序不仅用于数值处理,还更广泛地用于处理非数值的数据.例如,性别.月份.星期几.颜色.单位名.学历.职业等. 1. 枚举类型的定义 格式: type 枚举类型标识符=(标识符 ...
- 第三篇:一个Spark推荐系统引擎的实现
前言 经过2节对MovieLens数据集的学习,想必读者对MovieLens数据集认识的不错了:同时也顺带回顾了些Spark编程技巧,Python数据分析技巧. 本节将是让人兴奋的一节,它将实现一个基 ...
- 【SPOJ】NUMOFPAL - Number of Palindromes(Manacher,回文树)
[SPOJ]NUMOFPAL - Number of Palindromes(Manacher,回文树) 题面 洛谷 求一个串中包含几个回文串 题解 Manacher傻逼题 只是用回文树写写而已.. ...
- idea Artifact mdn:war exploded: Server is not connected. Deploy is not available.
idea 启动tomcat报的错误,启动tomcat无效 看了网上的好几种说发 说删除tomcat/bin/catalina.bat 里的JAVA_OPTS= -Xms512M -Xmx512M - ...
- Injection of autowired dependencies failed
error:org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'mainCo ...
另外在项目过程中,有一处需要CheckBox框与title分开,做成两个点击事件。我暂时屏蔽了。如果需要就改一下,然后在from,里面用jQuery获取span标签。记住一点要在from里面,不然没效果。