【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 ...
随机推荐
- c语言不可不说的一件事——进制之间的转化
进制之间的转换 二进制转换 二进制转换为十进制 10111010.101 转换方法: 个位数是乘以2的0次方 从小数点开始分割,(小数点前从右往左,小数点后从左往右)乘以2的对应次方(从0开始取),最 ...
- 美团面试：说说Netty的零拷贝技术？
零拷贝技术(Zero-Copy)是一个大家耳熟能详的技术名词了,它主要用于提升 IO(Input & Output)的传输性能. 那么问题来了,为什么零拷贝技术能提升 IO 性能? 1.零拷贝 ...
- [SWPUCTF 2021 新生赛]easyrce
这道题比较简单,打开环境一看就只需要构造一个get传参的命令就行,我们就看一下有些什么文件,构造payload: ?url=system ("ls /"); 看到有个 flllll ...
- VisionPro学习笔记（7）——FitLineTool
如果需要了解其他图像处理的文章,请移步小编的GitHub地址 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/ComputerVisionPractice ...
- C#.NET 逐行读取TXT文本
C#.NET 逐行读取TXT文本 using System; using System.IO; class Program { static void Main() { string filePath ...
- centos 7 mysql8 安装和卸载
cent os 7 安装 mysql 8--install-start官网下载MySQL的RPM源,地址:https://dev.mysql.com/downloads/repo/yum/ 下载这个项 ...
- http请求方式GET,POST工具类RestTemplate
http请求方式GET,POST工具类RestTemplate import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.serial ...
- .htaccess伪静态规则
Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` .htaccess伪静态规则 日期:2017-12-4 阿 ...
- 简单的css3头像旋转与3D旋转效果
Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 简单的css3头像旋转与3D旋转效果 日期:2017-7- ...
- uniapp windows 上架 apple store
香蕉云 蒲公英 ios上架助手iOS Development 开发!先用上架助手在certificates里面生成一个p12文件在profiles里面生成mobileprovision文件就欧克了 需 ...