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

时间:2023-02-28 07:37:35

  近些天接的项目用的是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)。场景用于一些修改信息反勾选的;

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


single:true单选、false多选。(注:因场景要求我把父子关联渲染注释掉了)
依赖layui form模块 复选框tree插件(拓展可根据属性单选还是多选,数据反选)另外在项目过程中,有一处需要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存储、&ast;去空格

    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&colon;checkbox

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

  7. 关于复选框input&lbrack;type&equals;checkbox&rsqb;

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

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

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

  9. 把复选框变成单选框&lpar;prop&comma;attr的区别&rpar;

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

随机推荐

  1. c&plus;&plus;转义字符、指针

    上篇博客的答案: 1: // DataTypeDemo.cpp : 定义控制台应用程序的入口点. 2: // 3:  4: #include "stdafx.h" 5: #incl ...

  2. caffe配置python环境

    make pycaffe 在python中import caffe

  3. &colon;nth-child

    匹配其父元素下的第N个子或奇偶元素 :eq(index) 匹配选择器指定序列的元素,而这个将为每一个父元素匹配子元素. :nth-child从1开始的,而:eq()是从0算起的!可以使用:<br ...

  4. 机器更换登录密码重启,然后SQL Server登录不了

    解决方法:

  5. php pdf word excel 操作方法

    很早的时候,用php生成execl都是件麻烦的事,我一般都会用csv来替代,现在这类工具就很多了,并且比较成熟了.不光有excel的,word,pdf. 1,php excelreader操作exce ...

  6. CentOS7卸载KDE桌面&lpar;转&rpar;

    最初安装centos时选择了安装KDE桌面,打开很卡,没有用到,想卸载,可是试了网上的方法什么yum groupremove kde-desktop 都不奏效,于是只能自己找出KDE的包,然后yum卸 ...

  7. jquery 高级 学习笔记

    --jquery 和 原生js可以共存,但不能混用.jquery 可以通过get()方法 转换为原生js. $("#div1").get(0).innerHTML; get() 需 ...

  8. 【重要】ionic和Angular的安装步骤

    首先搭建好npm和node环境的最新版本安装:: 一:开始安装ionic: 1. npm install -g ionic(全局安装ionic) 2. ionic start 新建的项目名称 +模板样 ...

  9. python实现获取身份证号码的方法

    记录瞬间 1.号码的结构 公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码.2.地址码 表示编码 ...

  10. 排序算法练习--JAVA&lpar;:内部排序:插入、选择、冒泡、快速排序)

    排序算法是数据结构中的经典算法知识点,也是笔试面试中经常考察的问题,平常学的不扎实笔试时候容易出洋相,回来恶补,尤其是碰到递归很可能被问到怎么用非递归实现... 内部排序: 插入排序:直接插入排序 选 ...