layUI Tree 的使用
原文作者:小巷而已 【[layui-xtree 3.0]依赖layui form模块 复选框tree插件】 原文链接: https://blog.csdn.net/xianglikai1/article/details/79032278
js 代码 :
<link href="layui/css/layui.css" rel="stylesheet" />
<style type="text/css">
form {
width: 500px;
margin: 10px auto;
} h1, h2, h3 {
padding: 10px 0;
} a {
text-align: right;
font-size: 18px;
color: #1C86EE;
} .xtree_contianer {
width: 500px;
border: 1px solid #9C9C9C;
overflow: auto;
margin-bottom: 30px;
background-color: #fff;
padding: 10px 0 25px 5px;
} .div-btns {
margin: 20px 0;
} .layui-form-label {
width: 60px !important;
}
</style>
</head>
<body>
<!--别忘记form 以及form的class-->
<form class="layui-form">
<h1>Layui - Xtree 3.0 </h1>
<h3>基于layui form模块的一款带复选框的树型插件</h3>
<div style="text-align:right;"><a href="http://fly.layui.com/jie/19038/" target="_blank">查看文档</a></div> <h2>demo1、最基础的用法 - 直接绑定json</h2>
<h3>这里使用的三个参数是必须的</h3>
<div id="xtree1" class="xtree_contianer"></div> <h2>demo2、最基础的用法 - 异步加载</h2>
<h3>服务端延迟2秒,可看清加载提示</h3>
<div id="xtree2" style="height:400px;overflow:auto;" class="xtree_contianer"></div> <h2>demo3、最完整的参数用法</h2>
<h3>请仔细的看参数吧</h3>
<div id="xtree3" class="xtree_contianer"></div> <h2>提供的四种方法</h2>
<h3>下面事件作用于demo3,输出为console.log();</h3>
<h3>demo宽度适合与F12左右分屏</h3>
<div class="div-btns">
<input type="button" id="btn1" value="获取全部[选中的][末级节点]原checkbox DOM对象,返回Array" class="layui-btn layui-btn-fluid" />
</div>
<div class="div-btns">
<input type="button" id="btn2" value="获取全部原checkbox DOM对象,返回Array" class="layui-btn layui-btn-fluid" />
</div>
<div class="div-btns">
<input type="button" id="btn3" value="更新数据,重新渲染" class="layui-btn layui-btn-fluid" />
</div>
<div class="div-btns">
<div class="layui-form-item">
<label class="layui-form-label">value值</label>
<div class="layui-input-block">
<input type="text" id="txt1" placeholder="如:jd1.1" autocomplete="off" class="layui-input">
</div>
</div>
<input type="button" id="btn4" value="通过value值找父级DOM对象,顶级节点与错误值均返回null" class="layui-btn layui-btn-fluid" />
</div> <h3>有建议,有疑问,有BUG,请联系QQ:151446298</h3>
<h3>
Layui官网:<a href="http://www.layui.com" target="_blank">www.layui.com</a>
感谢贤心
<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"></i>
</h3>
</form>
</body> <script src="layui/layui.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<!--引用xtree-->
<script src="layui-xtree/layui-xtree.js"></script>
<script type="text/javascript"> var json=[{title:'电动车管理',checked:false,value: 1,data:[{title:'电动车',checked:false,value: 27,data:[]},{title:'电动车登记',checked:false,value: 7,data:[]},{title:'信息查询与修改',checked:false,value: 8,data:[]},{title:'发卡量查询',checked:false,value: 113,data:[]}]},{title:'基站管理',checked:false,value: 2,data:[{title:'安装地点管理',checked:false,value: 9,data:[]},{title:'基站配置管理',checked:false,value: 11,data:[]},{title:'基站状态查询',checked:false,value: 10,data:[]}]},{title:'数据统计',checked:false,value: 118,data:[{title:'类型统计',checked:false,value: 119,data:[]},{title:'点位统计',checked:false,value: 120,data:[]}]},{title:'报警管理',checked:false,value: 3,data:[{title:'报警登记',checked:false,value: 12,data:[]},{title:'报警记录查询',checked:false,value: 13,data:[]},{title:'实时地图监控',checked:false,value: 14,data:[]},{title:'电子巡查',checked:false,value: 123,data:[]}]},{title:'记录查询',checked:false,value: 4,data:[{title:'电动车行驶记录查询',checked:false,value: 15,data:[]},{title:'电动车行驶轨迹查询',checked:false,value: 16,data:[]},{title:'相关视频调用',checked:false,value: 17,data:[]},{title:'低电量电子车牌查询',checked:false,value: 18,data:[]},{title:'操作日志查询',checked:false,value: 19,data:[]},{title:'超速查询',checked:false,value: 26,data:[]},{title:'基站车辆查询',checked:false,value: 111,data:[]},{title:'实时位置查询',checked:false,value: 28,data:[]},{title:'异常查询',checked:false,value: 116,data:[]}]},{title:'数据分析',checked:false,value: 93,data:[{title:'同行车辆研判',checked:false,value: 94,data:[]},{title:'交通热力图',checked:false,value: 102,data:[]}]},{title:'特种管理',checked:false,value: 103,data:[{title:'对象布控',checked:false,value: 104,data:[{title:'警用装备布控',checked:false,value: 106,data:[]},{title:'车辆布控',checked:false,value: 107,data:[]},{title:'人员布控',checked:false,value: 108,data:[]},{title:'其他',checked:false,value: 109,data:[]}]},{title:'布控报警',checked:false,value: 105,data:[{title:'报警监控',checked:false,value: 110,data:[]}]}]},{title:' 信息推送',checked:false,value: 97,data:[{title:'个体推送',checked:false,value: 98,data:[]},{title:'群体推送',checked:false,value: 99,data:[]},{title:'消息推送',checked:false,value: 112,data:[]},{title:'电话推送',checked:false,value: 115,data:[]},{title:'短信推送',checked:false,value: 122,data:[]}]},{title:'系统设置',checked:false,value: 5,data:[{title:'修改密码',checked:false,value: 20,data:[]},{title:'菜单管理',checked:false,value: 21,data:[]},{title:'用户管理',checked:false,value: 22,data:[]},{title:'部门管理',checked:false,value: 23,data:[]},{title:'角色管理',checked:false,value: 24,data:[]},{title:'权限管理',checked:false,value: 25,data:[]},{title:'发卡管理',checked:false,value: 114,data:[]},{title:'手持机管理',checked:false,value: 117,data:[]}]},{title:'版本信息',checked:false,value: 6,data:[]}]; layui.use(['form'], function () {
var form = layui.form; //1、最基础的用法 - 直接绑定json
var xtree = new layuiXtree({
elem: 'xtree' //(必填) 放置xtree的容器,样式参照 .xtree_contianer
, form: form //(必填) layui 的 from
, data: json //(必填) json数据
, isopen: true //加载完毕后的展开状态,默认值: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对象
}
});// xtree1 end
// <img src="layui/images/face/20.gif" /> //获取全部[选中的][末级节点]原checkbox DOM对象,返回Array
document.getElementById('btn1').onclick = function () { var oCks = xtree3.GetChecked(); //这是方法 for (var i = 0; i < oCks.length; i++) {
console.log(oCks[i].value);
}
} //获取全部原checkbox DOM对象,返回Array
document.getElementById('btn2').onclick = function () { var oCks = xtree1.GetAllCheckBox(); //这是方法 for (var i = 0; i < oCks.length; i++) {
if (oCks[i].checked == true) {
console.log(oCks[i].value);
} }
} //更新数据,重新渲染
document.getElementById('btn3').onclick = function () {
xtree3.render();
} //通过value值找父级DOM对象,顶级节点与错误值均返回null
document.getElementById('btn4').onclick = function () { var oCks = xtree3.GetParent(document.getElementById('txt1').value); //这是方法 if (oCks != null) { //如果返回的对象不为null,则获取到父节点了,如果为null,说明这个值对应的节点是一级节点或是值错误
console.log(oCks.value);
}
else {
console.log('无父级节点或value值错误');
} } });// layui.use end </script>
直接上图:
layUI Tree 的使用的更多相关文章
- Layui tree 下拉菜单树
1.效果: 2.html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- .Net MVC 动态生成LayUI tree
.Net MVC 动态生成LayUI tree 最近在做项目的过程中需要用到Tree插件,所以找了一堆Tree发现LayUI的Tree样式比较好看,所以开始搞! 1.Layui部分 1.1 首先引用文 ...
- layui实现checkbox的目录树tree
layui.use([ 'tree' ], function() {$ = layui.jquery;form = layui.form;//获取节点数据getTreeData();}); funct ...
- layui的tree和form并没有冲突!无限级tree下拉列表和select下拉列表同一页使用!
在昨天写的随笔中: layui的tree和form同时引用出现冲突的粗略解决办法 https://www.cnblogs.com/xwma/p/10900975.html 提出有冲突,今天在开发中发现 ...
- LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,之前我修改一版是通过reload重载实例方法填充子节点数据方式,因为递归页面元素时存 ...
- Layui treeGrid
目前treeGrid的源码不是很完善, 没有开放, 只有社区里面有, 想用的可以看看下面方法: 1.加入treeGrid.js文件 (1)layui 的treeGrid 下载地址: https: ...
- layui实现下拉分类多级
Layui tree 下拉菜单树 1.效果: 2.html 代码: <!DOCTYPE html> <html> <head> <meta charse ...
- layui增删改查
dao方法 package com.dao; import java.sql.SQLException; import java.util.List; import java.util.Map; im ...
- layui下拉多选formSelects使用方法
下载formSelects-v4插件(引入formSelects-v4.css和formSelects-v4.js) 下载地址:https://fly.layui.com/extend/formSel ...
随机推荐
- jquery如何在元素后面添加一个元素
jQuery添加插入元素技巧: jquery添加分为在指定元素的里面添加和外面添加两种: 里面添加使用(append 和prepend) 里面添加又分为在里面的前面添加和后面添加 里面的前面添加使用 ...
- Programming | 中/ 英文词频统计(MATLAB实现)
一.英文词频统计 英文词频统计很简单,只需借助split断句,再统计即可. 完整MATLAB代码: function wordcount %思路:中文词频统计涉及到对"词语"的判断 ...
- xpath和lxml类库
1. xpath和lxml lxml是一款高性能的 Python HTML/XML 解析器,我们可以利用XPath,来快速的定位特定元素以及获取节点信息 2. 什么是xpath XPath (XML ...
- HashMap TreeMap的区别
Map主要用于存储健值对,根据键得到值,因此不允许键重复(重复就覆盖了),但允许值重复.Hashmap 是一个最常用的Map,它根据键的HashCode 值存储数据,根据键可以直接获取它的值,具有很快 ...
- ESP-IDF版本2.1.1
版本2.1.1是一个错误修复版本.它包括对KRACK和BlueBorne漏洞的修复. 版本2.1.1的文档可在http://esp-idf.readthedocs.io/en/v2.1.1/上找到. ...
- 六.使用python操作mysql数据库
数据库的安装和连接 pymysql的安装 pip install PyMySQL python连接数据库 import pymysql db = pymysql.connec ...
- 背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容
[源码下载] 背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容 作 ...
- Android退出所有Activity最优雅的方式
关于退出所有Activity,目前网上比较流行的方式大概有以下几种: ① 使用ActivityManager的方式: ② 自定义一个Activity集合类的方式: ③ 通过发送广播的方式: ④ 通过杀 ...
- 使用cygwin中的awk工具进行mysql binlog日志查看[利刃篇]
linux工具确实强悍,然而作为没有linux机器使用权以及开发没有使用linux进行的人,有时想用一些命令确实不方便,所以,才去试着用用cygwin,一款在windows平台上运行的类UNIX模拟环 ...
- MySQL mysqlbinlog 访问mysql-bin日志出错
问题 mysqlbinlog -v -v --base64-output=DECODE-ROWS mysql-bin.000166 | less ERROR: Error in Log_event:: ...