【JavaScript】JQuery-Ztree 演示demo
使用CDN引用JQuery和ZTree的资源
demo页的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery-Ztree-Demo</title>
<!-- ZTREE的渲染样式 -->
<link href="https://cdn.bootcss.com/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"> <!-- 先引用Jquery，再引用Ztree 使用LiveServer，不要静态访问 -->
<!-- https://treejs.cn/v3/main.php#_zTreeInfo -->
<script src="https://cdn.bootcss.com/jquery/1.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div>
<button id="btn1">获取选中节点</button>
<button id="btn2">全选/清空</button>
<!-- class="ztree" 渲染ztree的样式 -->
<div id="ztreeContainer" class="ztree"></div>
</div> <script> $(function() { // ZTree的配置对象 详细文档见 https://treejs.cn/v3/api.php
const SETTING = {
// 1、配置数据格式
data: {
// 接收的数据格式分为两种，树data 和 列表data， enable: true表示按列表data
simpleData: {
enable: true,
// idKey 主键的key名称
idKey: 'areacode',
// pIdKey 父键的key名称
pIdKey: 'areaparent',
// 用于修正根节点父节点数据，即 pIdKey 指定的属性值
rootPId: 0
}, key: {
name: 'areaname' // 每个节点展示的label值的key名称
}
},
// 2、配置视图效果
view: {
// 支持双击展开子节点
dblClickExpand: true,
// 多选支持
selectedMulti: true,
//设置是否显示节点图标 (文件icon)
showIcon: true,
//设置是否显示节点与节点之间的连线
showLine: true,
},
// 3、配置复选的操作
check: {
// 支持复选
enable: true,
// Y: 勾选时的配置 N: 取消勾选时的配置
// p：联动影响父节点 s：联动影响子节点
// chkboxType: { 'Y': 'ps', 'N': 'ps' } // 设置为只获取选中的节点，不需要勾选父节点和子节点
chkboxType: { 'Y': '', 'N': '' },
// 复选框样式 默认checkbox
// chkStyle: 'checkbox'
}, } // 回调方法配置对象
const callBackObj = {
// 点击事件
onClick: function(event, treeId, treeNode) {
// 获取当前点击的节点对象
const currentNode = treeNode
console.log('当前选择节点', JSON.stringify(currentNode))
}
}
// 4、配置回调的钩子函数对象
// callBack: callBackObj
SETTING.callBack = callBackObj // 读取数据，渲染Ztree 需要开启LiveServer，否则跨域限制
$.getJSON("./data.json", function (data){
console.log(data) // 初始化渲染ZTREE组件
const zTreeObj = $.fn.zTree.init($('#ztreeContainer'), SETTING, data.data) }) // 获取选中节点
$('#btn1').click(function(event) {
// console.log(event) // 1、获取ZTree的对象
const ZTREE_OBJECT = $.fn.zTree.getZTreeObj('ztreeContainer') // 2、调用获取节点API，选择checked为true值的节点
const nodeList = ZTREE_OBJECT.getCheckedNodes(true)
console.log(nodeList)
}) // 全选/清空 操作
var flag = true
$('#btn2').click(function(event) {
// 1、获取ZTree的对象
const ZTREE_OBJECT = $.fn.zTree.getZTreeObj('ztreeContainer')
// 2、调用checkAllNodes
ZTREE_OBJECT.checkAllNodes(flag)
// 3、置反变量
flag = !flag
})
}) // 注，回显数据时，只要checked属性为true即可，也可以自定义属性名称，在data属性中配置
</script>
</body>
</html>
data.json的json数据：
{
"code":200,
"data":[
{
"areacode":1,
"areaid":1,
"arealevel":"0",
"areaname":"层级1 - A",
"areaparent":0,
"checked":false,
"isenabled":"1"
},
{
"areacode":2,
"areaid":2,
"arealevel":"0",
"areaname":"层级1 - B",
"areaparent":0,
"checked":false,
"isenabled":"1"
},
{
"areacode":3,
"areaid":3,
"arealevel":"0",
"areaname":"层级1 - C",
"areaparent":0,
"checked":false,
"isenabled":"1"
},
{
"areacode":11,
"areaid":11,
"arealevel":"0",
"areaname":"层级2 - A1",
"areaparent":1,
"checked":false,
"isenabled":"1"
},
{
"areacode":12,
"areaid":12,
"arealevel":"0",
"areaname":"层级2 - A2",
"areaparent":1,
"checked":false,
"isenabled":"1"
},
{
"areacode":13,
"areaid":13,
"arealevel":"0",
"areaname":"层级2 - A3",
"areaparent":1,
"checked":false,
"isenabled":"1"
},
{
"areacode":21,
"areaid":21,
"arealevel":"0",
"areaname":"层级2 - B1",
"areaparent":2,
"checked":false,
"isenabled":"1"
},
{
"areacode":22,
"areaid":22,
"arealevel":"0",
"areaname":"层级2 - B2",
"areaparent":2,
"checked":false,
"isenabled":"2"
},
{
"areacode":23,
"areaid":23,
"arealevel":"0",
"areaname":"层级2 - B3",
"areaparent":2,
"checked":false,
"isenabled":"1"
},
{
"areacode":31,
"areaid":31,
"arealevel":"0",
"areaname":"层级2 - C1",
"areaparent":3,
"checked":false,
"isenabled":"1"
},
{
"areacode":32,
"areaid":32,
"arealevel":"0",
"areaname":"层级2 - C2",
"areaparent":3,
"checked":false,
"isenabled":"2"
},
{
"areacode":33,
"areaid":33,
"arealevel":"0",
"areaname":"层级2 - C3",
"areaparent":3,
"checked":false,
"isenabled":"1"
}
],
"message":"操作成功！",
"status":"success"
}
预览效果：
【JavaScript】JQuery-Ztree 演示demo的更多相关文章
- 实时更新数据的jQuery图表插件DEMO演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...
- 有趣的Javascript：只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图（有演示demo）
该demo支持IE5以上任意内核的浏览器 查看演示demo:支持IE5以上版本的浏览器Canvas绘图demo 补充:chats.js和echarts等图表库也可以使用本方法兼容IE6以上浏览器 1. ...
- C#使用Jquery zTree实现树状结构显示_异步数据加载
JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面: http://www.treejs.cn/v3/dem ...
- JQuery Ztree 树插件配置与应用小结
JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...
- JQuery ztree 异步加载实践
本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...
- Jquery zTree结合Asp.net实现异步加载数据
zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...
- jquery——zTree, 完美好用的树插件
Demo 这绝对是我见过最完美的tree了,尽管是国产货,但一点不输国外产品,国外的还没有见过这么强的. _______________________________________________ ...
- Ztree小demo用于系统授权
本示例只做到指定id用户的拥有的权限回显,并能动态获得ztree中重新选择的权限id.(至于权限的更新,就是后台人员对象和权限对象建立关系的过程,不做展示) 第一步:拼写jsp页面(下载ztree包, ...
- jQuery+zTree
0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...
随机推荐
- ajax传参
// ajax传参 // ajax传参特点: // 1,不需要跳转 // 2,ajax传参,都是异步程序 // ...
- ClickHouse + ClickVisual 构建日志平台
越来越多的互联网公司开始尝试 ClickHouse 存储日志,比如映客.快手.携程.唯品会.石墨文档,但是 ClickHouse 存储日志缺少对应的可视化方案,石墨文档开源了 ClickVisual ...
- LangChain让LLM带上记忆
最近两年,我们见识了"百模大战",领略到了大型语言模型(LLM)的风采,但它们也存在一个显著的缺陷:没有记忆. 在对话中,无法记住上下文的 LLM 常常会让用户感到困扰.本文探讨如 ...
- springboot拦截器@resource注解注入为null解决方案 拦截适配配置
springboot拦截器@resource注解注入为null解决方案 拦截适配配置 为什么@resource注入为nullinteceptor在springcontext之前加载,注入必然是nul ...
- MySQL查询关于区分字母大小写问题
前段时间在工作中测试提出了一个BUG,让我把根据ID查询区分大小写的功能去掉,大小写都随便查,然后我在SQL的位置加上了UPPER(id) = UPPER(#{id})的写法,而同事知道这个问题后的反 ...
- Dell服务器配置RIAD并创建热备盘
在系统启动期间,按F2键进入System Setup(系统设置)主菜单 单击Device Settings(设备设置). 单击所需的RAID controller(RAID控制器)设备. 4.单击Co ...
- Spring-jdbcTempalate研究
很多时候,需要使用jdbcTemplate,既有出于性能考虑的因素,也有出于个人偏好. 关于jdbcTemplate的几个关键性的问题: 一.简介 JdbcTemplate位于org.springfr ...
- Android无障碍自动化结合opencv实现支付宝能量自动收集
Android无障碍服务可以操作元素,手势模拟,实现基本的控制.opencv可以进行图像识别.两者结合在一起即可实现支付宝能量自动收集.opencv用于识别能量,无障碍服务用于模拟手势,即点击能量. ...
- RuoYi-Cloud从配置到运行
前期准备工作 若依微服务版(RuoYi-Cloud)代码下载:https://gitee.com/y_project/RuoYi-Cloud 注册中心(nacos)下载:https://www.ali ...
- Ubuntu 18.04安装xdrp以使用远程桌面
背景 开发环境有一台服务器默认没有屏幕(被我拿走用来拓展屏幕了),有时候需要使用到界面但嫌弃拆显示器太麻烦,因此使用远程桌面来解决这个需求. 做法 安装xrdp sudo apt install -y ...