精华内容
下载资源
问答
  • 此版本包含了前两版本所有的功能,同时修复了一些问题,增加了一些功能,之前的版本可以...2、增加checkbox复选框;3、两种数据绑定方式,json数组/异步数据接口,优化了数据格式;4、节点默认选中状态;5、节点...

    此版本包含了前两个版本所有的功能,同时修复了一些问题,增加了一些功能,之前的版本可以直接抛弃啦!
    本次升级改动较多,参数也有所更改,尽量别直接覆盖之前版本,而是当成一个全新的tree插件来对待吧!

    效果图:
    undefined


    功能说明:(详细使用方式在下面的文档中)
    1、常规tree,无层级限制;
    2、增加checkbox复选框;
    3、两种数据绑定方式,json数组/异步数据接口,优化了数据格式;
    4、节点默认选中状态;
    5、节点是否可用;
    6、父级节点拥有其子级节点全选功能;
    7、父级节点监听子级节点选中状态,并更改自身状态;
    8、加载等待提示;
    9、加载完毕后的初始展开状态;
    10、三种节点图标样式自定义设置,取自layui图标;
    11、三种节点图标颜色自定义配色;
    12、全选框;
    13、全选框状态更改触发的监听事件自定义;
    14、节点状态更改的监听事件自定义(节点点击事件,不包含全选框);
    15、可自动撑起容器高度,容器最小高度100px;
    16、解决单页面多个xtree冲突的问题;
    17、如layui一样简单的使用方式;

    提供四种方法:
    1、获取全部[选中的][末级节点]原checkbox DOM对象,返回Array
    2、获取全部原checkbox DOM对象,返回Array
    3、通过value值找父级DOM对象,顶级节点与错误值均返回null
    4、更新数据,重新渲染,无返回值


    使用文档:

    一、引用
    页面中引用了 layui 的 css 和 js 后,添加引用 layui-xtree.js 一个文件即可,原生js,不依赖jquery。
    所有xtree的js代码均要写在 layui.use(['form'], function () { **这里** });

    二、容器
    html中只需要一个准备好的div即可,宽度需要你来指定,高度可自动撑起,也可固定配合 overflow: auto;
    注意,容器必须放在这样的一个form表单中:<form class="layui-form"></form>

    <form class="layui-form">
    <div id="xtree1" style="width:400px;border:1px solid black;padding: 10px 0 25px 5px;"></div>
    </form>

    三、最简单的用法,三个必须的参数
    elem:放置xtree的容器id,不要带#号
    form:layui的form对象
    data:数据,可直接写json数组,也可写一个异步接口
    数据格式在下面

    var xtree1 = new layuiXtree({
    elem: 'xtree1' //(必填) 放置xtree的容器id,不要带#号
    , form: form //(必填) layui 的 from
    , data: json //(必填) json数组(数据格式在下面)
    });

    var xtree2 = new layuiXtree({
    elem: 'xtree2' //(必填) 放置xtree的容器id,不要带#号
    , form: form //(必填) layui 的 from
    , data: 'server/xtreedata.ashx' //(必填) 数据接口,需要返回以上结构的json字符串(数据格式在下面)
    });

    四、带全部参数的完整用法:
    直接看代码吧

    var xtree3 = new layuiXtree({
    elem: 'xtree3' //必填
    , form: form //必填
    , data: 'server/xtreedata2.ashx' //必填
    , isopen: false //加载完毕后的展开状态,默认值:true
    , ckall: true //启用全选功能,默认值:false
    , ckallback: function () { } //全选框状态改变后执行的回调函数
    , icon: { //三种图标样式,更改几个都可以,用的是layui的图标
    open: "图标代号" //节点打开的图标
    , close: "图标代号" //节点关闭的图标
    , end: "图标代号" //末尾节点的图标
    }
    , color: { //三种图标颜色,独立配色,更改几个都可以
    open: "#EE9A00" //节点图标打开的颜色
    , close: "#EEC591" //节点图标关闭的颜色
    , end: "#828282" //末级节点图标的颜色
    }
    , click: function (data) { //节点选中状态改变事件监听,全选框有自己的监听事件
    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对象
    }
    });

    五、json数据格式,需要的为json数组
    title:string 显示的值 (必填)
    value:string 隐藏的值 (必填)
    checked:bool 默认是否选中,true为选中,false与不填都为不选中 (选填)
    disabled:bool 是否可用,true为不可用,false与不填都为可用 (选填)
    data: json数组 节点的子节点数组,结构与此节点一致,(必填)如果无子节点则必须为 data:[]

    补充说明:
    checked只作用于末级节点,有子级的节点不起作用;
    disabled作用于非末级节点,你会感觉很奇怪;

    结构举例:

    [
    {
    title: "节点1", value: "jd1", data: [
    { title: "节点1.1", checked: true, disabled: true, value: "jd1.1", data: [] }
    , { title: "节点1.2", value: "jd1.2", checked: true, data: [] }
    , { title: "节点1.3", value: "jd1.3", disabled: true, data: [] }
    , { title: "节点1.4", value: "jd1.4", data: [] }
    ]
    }
    , {
    title: "节点2", value: "jd2", data: [
    { title: "节点2.1", value: "jd2.1", data: [] }
    , { title: "节点2.2", value: "jd2.2", data: [] }
    , { title: "节点2.3", value: "jd2.3", data: [] }
    , { title: "节点2.4", value: "jd2.4", data: [] }
    ]
    }
    , { title: "节点3", value: "jd3", data: [] }
    , { title: "节点4", value: "jd4", data: [] }
    ]

    六、提供的方法
    1、获取全部[选中的][末级节点]原checkbox DOM对象,返回Array

    xtree1.GetChecked();

    2、获取全部原checkbox DOM对象,返回Array

    xtree1.GetAllCheckBox();

    3、通过value值找父级原 checkbox DOM对象,顶级节点与错误值均返回null

    xtree1.GetParent(‘节点的value值’);

    4、更新数据,重新渲染,无返回值

    xtree1.render();


    展开全文
  • 5 创建复选框列表对话框 笔者为该对话框添加了一个复选框数组显示列表 并实现了点击复选框选项监听事件 选中复选框选项后 获取所有选中的选项 并以toast形式显示出来 创建复选框列表对话框并实现监听事件的代码...
  • 22.2 复选框输入对象438 22.2.1 语法438 22.2.2 关于该对象438 22.2.3 属性438 22.2.4 方法440 22.2.5 事件处理器441 22.3 单选button输入对象442 22.3.1 语法442 22.3.2 关于该对象442 22.3.3 属性443 22.3.4 方法...
  • 60 使用保护:避免头文件多次被包含 61 理解makefile 62 理解可执行文件 第六章 理解字符 63 理解字符:ASCII码字符 64 理解字符:转换ASCII码或称扩展字符集 65 C/C++的转义序列:嵌入不可打印的字符 66 C/C++转义...
  • Java开发技术大全(500源代码).

    热门讨论 2012-12-02 19:55:48
    inheritConstruct_4.java 构造器继承示例4 inheritConstruct_5.java 构造器继承示例5 inheritConstruct_6.java 构造器继承示例6 inheritor.java 子类覆盖父类示例 inPack.java 包示例 LotsOfColors.java 定义...
  • 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框...
  • 我从后台传入一ArrayList给jsp,然后我要在jsp的foreach循环中判断这字符串数组中是否包含我的foreach中每次遍历的...这里我该如何在循环中每次都判断传进来的check中是否包含t.id,如果包含复选框前打对勾。
  • layui 数菜单插件

    2019-06-14 21:36:52
    2、增加checkbox复选框; 3、两种数据绑定方式,json数组/异步数据接口,优化了数据格式; 4、节点默认选中状态; 5、节点是否可用; 6、父级节点拥有其子级节点全选功能; 7、父级节点监听子级节点选中状态,并更改...
  • Java经典编程300例(code)

    千次下载 热门讨论 2013-01-09 10:26:53
    添加多个复选框控件 52 实例037 使用选择排序法对数组排序 53 实例038 使用冒泡排序法对数组排序 55 实例039 使用快速排序法对数组排序 57 实例040 使用直接插入法对数组排序 59 实例041 使用sort()方法对数组排序 ...
  • c#题库.doc

    2013-09-24 19:01:47
    7. 我们可以从( )向窗体中添加如下控件:文本框、复选框、单选钮。  A. 帮助窗口 B. 菜单栏 C. 工具栏 D. 工具箱   8. 下列哪种控件是一种用来存放其他控件的容器( )。  A. TextBox B. GroupBox C. ...
  • Windows API函数大全

    热门讨论 2010-02-04 09:04:57
    CheckMenuRadioItem 指定一菜单条目被复选成"单选"项目 CreateMenu 创建新菜单 CreatePopupMenu 创建一空的弹出式菜单 DeleteMenu 删除指定的菜单条目 DestroyMenu 删除指定的菜单 DrawMenuBar 为指定的...
  • 实例048 复选框控件数组 实例049 用数组反转字符串 3.3 数组排序与查询 实例050 使用选择排序法 实例051 使用冒泡排序法 实例052 使用快速排序法 实例053 使用直接插入法 实例054 使用sort方法对数组进行...
  • 实例048 复选框控件数组 实例049 用数组反转字符串 3.3 数组排序与查询 实例050 使用选择排序法 实例051 使用冒泡排序法 实例052 使用快速排序法 实例053 使用直接插入法 实例054 使用sort方法对数组进行...
  • 实例048 复选框控件数组 59 实例049 用数组反转字符串 60 3.3 数组排序与查询 61 实例050 使用选择排序法 61 实例051 使用冒泡排序法 62 实例052 使用快速排序法 64 实例053 使用直接插入法 65 实例054 使用sort方法...
  • 实例048 复选框控件数组 59 实例049 用数组反转字符串 60 3.3 数组排序与查询 61 实例050 使用选择排序法 61 实例051 使用冒泡排序法 62 实例052 使用快速排序法 64 实例053 使用直接插入法 65 实例054 使用sort方法...
  • 60 使用保护:避免头文件多次被包含 61 理解makefile 62 理解可执行文件 第六章 理解字符 63 理解字符:ASCII码字符 64 理解字符:转换ASCII码或称扩展字符集 65 C/C++的转义序列:嵌入不可打印的字符 66 C/C++转义...
  • 60 使用保护:避免头文件多次被包含 61 理解makefile 62 理解可执行文件 第六章 理解字符 63 理解字符:ASCII码字符 64 理解字符:转换ASCII码或称扩展字符集 65 C/C++的转义序列:嵌入不可打印的字符 66 C/C++转义...
  • 60 使用保护:避免头文件多次被包含 61 理解makefile 62 理解可执行文件 第六章 理解字符 63 理解字符:ASCII码字符 64 理解字符:转换ASCII码或称扩展字符集 65 C/C++的转义序列:嵌入不可打印的字符 66 C/C++转义...
  • FastReport使用同一设计工具来创建对话框,这一设计工具带有对话框控件的标准集:按钮,编辑框,复选框等等。 FastReport提供了多样的数据库引擎,它允许用户在运行时创建表格,查询程序及数据库组件。用户的报表...
  • 中文版Excel.2007高级VBA编程宝典 1/2

    热门讨论 2012-04-06 16:00:16
     11.1.13 确定单元格区域是否包含在另一单元格区域内  11.1.14 确定单元格的数据类型  11.1.15 读写单元格区域  11.1.16 在单元格区域中插入值的更好方法  11.1.17 传递一维数组中的内容  11.1.18 将单元格...
  • 实例108 实现带复选框的treeview控件 177 实例109 将xml文件节点绑定到treeview控件中 178 实例110 修改treeview控件的节点文本 179 第11章 c#面向对象高级技术 181 实例111 利用接口实现选择不同的语言 182 实例112...
  • 实例333 删除列表中的复选数据 实例334 快速选中ListBox中的全部条目 实例335 列表中拒绝添加重复信息 实例336 移动列表中项目到另一列表 实例337 将数据库中的数据表添加到列表中 实例338 将表中数据添加...
  • 1.0.1版本 增加内置复选框列、序号列;增加是否可编辑参数;修改内置前置任务列配置参数值为false;增加复选框的父子联动属性;增加名称列可编辑逻辑;增加添加、移除任务事件; 1.0.0版本 增加内置前置任务列,...
  • 在SQL连接对话框,当您选择“显示在TreeView中所有数据库”选项,一个复选框,现在看来可以让你选择是否要自动填充在启动数据库列表。 (F#)使用类供应商,LINQPad现在可以正确地逃脱在自动完成列表成员名称空间。...
  • 实例173 实现复选框中的全选、反选和不选 208 实例174 隐藏域提交用户的ID值 210 实例175 图像域替代提交按钮 211 实例176 跳转菜单实现页面跳转 213 实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例...
  • 实例173 实现复选框中的全选、反选和不选 208 实例174 隐藏域提交用户的ID值 210 实例175 图像域替代提交按钮 211 实例176 跳转菜单实现页面跳转 213 实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例...
  • C#全能速查宝典

    热门讨论 2014-04-26 16:16:27
    2.3.3 Checked属性——复选框是否处于选中状态 190 2.3.4 CheckedChanged事件——Checked属性更改时发生 191 2.3.5 CheckedListBox控件——复选框列表控件 191 2.3.6 CheckState属性——设置CheckBox控件的状态 193 ...
  • C#从入门到实践 源文件

    热门讨论 2010-10-17 18:32:05
    作者:郑耀东 清华大学出版社 2009年出版 文件中包含了该书中所有源代码。其中有 27个子文件夹,每子文件夹对应书中的相应章节,收录各章中的源程序及所需资源。 图书简介: 本书从易到难、由浅入深、循序渐进、...
  • 定义 数组是一种排列有序的数据结构,包含数组中的变量被称为数组的元素, 它们都有相同的类型。 数组声明 int [] array1 = new int[5]; int [,,] array3 = new int[10,20,30]; int [] array1 = new int[] {1,2,4}...

空空如也

空空如也

1 2 3
收藏数 43
精华内容 17
关键字:

复选框数组包含4个复选框