【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 ...
随机推荐
- js 生成pdf
最简洁的代码 <script src="js/html2canvas.min.js" type="text/javascript" charset=&qu ...
- [SWPUCTF 2021 新生赛]easyrce
这道题比较简单,打开环境一看就只需要构造一个get传参的命令就行,我们就看一下有些什么文件,构造payload: ?url=system ("ls /"); 看到有个 flllll ...
- Easysearch：语义搜索、知识图和向量数据库概述
什么是语义搜索? 语义搜索是一种使用自然语言处理算法来理解单词和短语的含义和上下文以提供更准确的搜索结果的搜索技术.旨在更好地理解用户的意图和查询内容,而不仅仅是根据关键词匹配,还通过分析查询的语义和 ...
- The remote name could not be resolved
HTTP The remote name could not be resolved HTTP Status:NameResolutionFailure
- 惠普 HP 战66 AMD 4700U 烫手 发烫，使用 Ryzen Controller 温控
由于战66只有单风扇,动不动就上80-90度. 下载:Ryzen Controller 并安装. Ryzen Controller Team / Ryzen Controller · GitLab 勾 ...
- 记一次 .NET某工厂报警监控设置 崩溃分析
一:背景 1. 讲故事 前些天有位朋友在微信上丢了一个崩溃的dump给我,让我帮忙看下为什么出现了崩溃,在 Windows 的事件查看器上显示的是经典的 访问违例 ,即 c0000005 错误码,不管 ...
- scrapy爬取知名问答网站
scrapy爬取知名问答网站 分析及数据表设计 itemloader方式提取question spider爬虫逻辑的实现以及answer的提取 保存数据到mysql中
- C++判断当前程序是否运行在Windows展台(Kiosk)模式下
Windows有一个展台(Kiosk)模式.展台模式可以使Windows作为数字标牌进行使用.具体请参考Windows 展台 配置完展台模式,重启设备后,Windows会以全屏的方式运行展台应用,无法 ...
- Kubernetes（三）实战入门
实战入门 本章介绍如何在kubernetes集群中部署一个nginx服务,并能够对其进行访问. 1. Namespace Namespace主要作用是实现多套环境的资源隔离或者多租户的资源隔离. 默认 ...
- 【资料分享】全志科技T507工业核心板硬件说明书(上）
目 录 前言 1硬件资源 1.1CPU 1.2ROM 1.3RAM 1.4时钟系统 1.5电源 1.6LED 1.7外设资源 2引脚说明 2.1引脚排列 2.2引脚定义 2.3内部引脚使用说明 ...