【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 ...
随机推荐
- react withRouter高阶组件
作用:把不是通过路由切换过来的组件中,将react-router 的 history.location.match 三个对象传入props对象上 默认情况下必须是经过路由匹配渲染的组件才存在this. ...
- MySQL BETWEEN AND包含边界值
select count(1) from table_a where my_date between '20230715' and '20230717'; 上面的SQL我们发现只统计了20230715 ...
- JVM垃圾回收器与调优参数
引言 JVM为了更有效率的对堆空间进行垃圾回收,把堆空间进行了分代,分为年轻代.老年代和永久代(在1.8版本以后,永久代已经被彻底移除了,被元空间取而代之). 当一个对象出生时,会首先选择在eden区 ...
- JSR303数据校验使用方法记录
JSR303并不对应着指定的jar包,而是一种规范,目前hibernate-validator是使用最多的是基于JSR303规范的实现 本文不适合新人观看,要求至少要知道使用方法 Springboot ...
- 记一次 Edge 及谷歌 Chrome 浏览器兼容性冲突的解决
目录 记一次 Edge 及谷歌 Chrome 浏览器兼容性冲突的解决 浏览器兼容性冲突症状 解决方法 1. 把本机和远程的 8235 和 8237 端口屏蔽,包括 TCP 和 UDP 端口 2. 在 ...
- python selenium使用无头模式执行用例
什么是无头模式? Headless Browser模式是浏览器的无界面状态,即在不打开浏览器界面的情况下使用浏览器. 该模式的好处如下: 1)可以加快web自动化测试的执行时间,对于web自动化测试, ...
- IP数据报分片问题
为什么要分片? 很多时候,由于单个数据太大,超过了MTU的限定值,就要对数据包进行分组,即切割并分别发送. 我们要解决以下几个问题: 1.顺序问题.接收方可以按照原来的顺序重组这些分片,并能知道这些分 ...
- 面试官：告诉我为什么static和transient关键字修饰的变量不能被序列化？
一.写在开头 在上一篇学习序列化的文章中我们提出了这样的一个问题: "如果在我的对象中,有些变量并不想被序列化应该怎么办呢?" 当时给的回答是:不想被序列化的变量我们可以使用tra ...
- Fedora升级33->34
Fedora升级33->34 1. dnf --refresh upgrade 2. dnf install dnf-plugin-system-upgrade --best 3. ...
- 使用AWS SageMaker进行机器学习项目
使用AWS SageMaker进行机器学习项目 本文主要介绍如何使用AWS SageMaker进行机器学习项目. 1. 题目 使用的题目为阿里天池的"工业蒸汽量预测",题目地址为: ...