【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 ...
随机推荐
- 详解在Linux中同时安装配置并使用 MySQL5.7 和 MySQL8.0
最近需要使用mysql8.0版本,但是原本的mysql5.7版本已经被多个服务依赖,于是想想能不能同一台服务器装多个版本的mysql,一查确实可行,这里做一个记录方便自己后期回忆 阅读本文前请注意!! ...
- Vue学习：1.V标签综合1
认识V标签 目录 认识V标签 v-text: v-html: v-bind (缩写为 :): v-if / v-else / v-else-if: v-show: v-for: v-model: Vu ...
- MAPJOIN中无法使用UDF
今天在写SQL时,遇到了一个异常,提示semantic exception generate map join error unable to find class,udf编写的没毛病,其他SQL也有 ...
- Failed to connect to codeup.aliyun.com port 443 after 21017 ms: Couldn't connect to server Git
Git拉取出现这个错误 Failed to connect to codeup.aliyun.com port 443 after 21017 ms: Couldn't connect to serv ...
- 解决Linux下无法编译带有中文的JAVA程序问题
只要在编译的时候加上-encoding gbk即可 例如: javac -encoding gbk Myclass.java
- AtCoder Beginner Contest 302 H. Ball Collector 题解 可撤销并查集
为了更好的阅读体验,请单击这里 AtCoder Beginner Contest 302 H. Ball Collector 题意跳过. 可以视作将 \(a_i, b_i\) 之间连了一条边,然后 \ ...
- 【译】Visual Studio 2022 - 17.10 性能增强
我们很高兴地宣布 Visual Studio 2022 的最新更新,它为您带来了 IDE 各个领域的一系列性能增强.在这篇博客中,我们将重点介绍17.10版本中一些最显著的改进,比如更快的 Windo ...
- Swin Transformer：最佳论文，准确率和性能双佳的视觉Transformer | ICCV 2021
论文提出了经典的Vision Transormer模型Swin Transformer,能够构建层级特征提高任务准确率,而且其计算复杂度经过各种加速设计,能够与输入图片大小成线性关系.从实验结果来看, ...
- 可重入锁思想，设计MQ迁移方案
如果你的MQ消息要从Kafka切换到RocketMQ且不停机,怎么做?在让这个MQ消息调用第三方发奖接口,但无幂等字段又怎么处理?今天小傅哥就给大家分享一个关于MQ消息在这样的场景中的处理手段. 这是 ...
- Linux的访问权限详解
题目 解读访问权限 rw-r--r--分别代表什么东西 r:代表可读 w:可写 e:可执行 方便起见进行拆分 rw- 代表文件所属用户的权限 r-- 代表同组用户的权限 r-- 代表其他用户的权限 同 ...