z-tree的使用
1、参考资料
1）官网：http://www.treejs.cn/v3/api.php
2）z-tree码云：https://gitee.com/zTree/zTree_v3
2、下载解压
案例演示：
案例演示 demo/cn/index.html
all.js = core + excheck + exedit ( 不包括 exhide ); 如果只是要用core中的基本功能，那么引用core.js就可以了。
demo/cn/index.html，右键 / 查看页面源代码，file属性是对应的例子的url。在index.html选择自己想要参考的demo，然后去查找其file。
3、第一个demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>
<style type="text/css">
.ztree1 {
width: 200px;
height: 300px;
border: 2px solid pink;
}
</style> </head>
<body>
<div class="ztree1">
<!-- 展示树形菜单 -->
<ul id="ztree1" class="ztree"></ul>
</div> <script type="text/javascript">
$(function(){
// 当页面加载完成后, 动态创建ztree 菜单
var setting = { // 设置ztree相关的属性
data: {
simpleData:{
enable: true // 启用简单json数据描述节点数据
}
},
check: { // 设置复选框
enable: true
}
}; var zNodes = // 节点数据, 每个json对象对应一个节点数据
[
{id:'1',pId:'0',name:'系统管理', open: true}, // open:设置是否默认展开
{id:'100',pId:'1',name:'添加'},
{id:'101',pId:'1',name:'删除'}, {id:'2',pId:'0',name:'用户管理'},
{id:'200',pId:'2',name:'用户等级'},
{id:'20001',pId:'200',name:'添加'},
{id:'20002',pId:'200',name:'删除'},
{id:'201',pId:'2',name:'用户财产'},
{id:'20101',pId:'201',name:'添加'},
{id:'20102',pId:'201',name:'删除'}, {id:'3',pId:'0',name:'权限管理'},
{id:'300',pId:'3',name:'添加'},
{id:'301',pId:'3',name:'删除'},
]; $.fn.zTree.init($("#ztree1"), setting, zNodes);
});
</script>
</body>
</html>
4、ajax请求json数据渲染z-tree
设置ztree相关的属性: callback，给ztree每个节点绑定onclick事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>
<style type="text/css">
.ztree2 {
width: 200px;
height: 300px;
border: 2px solid pink;
}
</style> </head>
<body>
<div>
<ul id="ztree2" class="ztree"></ul>
</div> <script type="text/javascript">
<!-- 发送ajax请求获取json数据构造ztree -->
$(function() {
var setting2 = { // 设置ztree相关的属性
data:{
simpleData:{
enable: true // 启用简单json数据描述节点数据
}
},
callback:{
onClick:function(a,b,treeNode){
var page = treeNode.page;
if(page != undefined){
// 判断当前选项卡是否已经存在
var e = $("#tt").tabs("exists", treeNode.name);
if(e){ // 存在，选中对应"选项卡"
$("#tt").tabs("select", treeNode.name);
} else{ // 不存在，新增"选项卡"
$("#tt").tabs("add",{
title:treeNode.name,
content:'<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>',
closable: true
});
}
}
}
}
}; $.post("/data/menu", {}, function(data){
$.fn.zTree.init($("#ztree2"), setting2, data);
}, 'json'); });
</script>
</body>
</html>
5、树形菜单选中项添加到表单数据中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>
<style type="text/css">
.ztree1 {
width: 200px;
height: 300px;
border: 2px solid pink;
}
</style> </head>
<body>
<form id="form" action="#">
<input type="hidden" name="ids"/>
<div class="ztree1">
<!-- 展示树形菜单 -->
<ul id="ztree1" class="ztree"></ul>
</div>
<input type="button" id="btn" value="提交"/>
</form> <script type="text/javascript"> var setting = { // 设置ztree相关的属性
data: {
simpleData:{
enable: true // 启用简单json数据描述节点数据
}
},
check: { // 设置复选框
enable: true
}
}; var zNodes = // 节点数据, 每个json对象对应一个节点数据
[
{id:'1',pId:'0',name:'系统管理', open: true}, // open:设置是否默认展开
{id:'100',pId:'1',name:'添加'},
{id:'101',pId:'1',name:'删除'}, {id:'2',pId:'0',name:'用户管理'},
{id:'200',pId:'2',name:'用户等级'},
{id:'20001',pId:'200',name:'添加'},
{id:'20002',pId:'200',name:'删除'},
{id:'201',pId:'2',name:'用户财产'},
{id:'20101',pId:'201',name:'添加'},
{id:'20102',pId:'201',name:'删除'}, {id:'3',pId:'0',name:'权限管理'},
{id:'300',pId:'3',name:'添加'},
{id:'301',pId:'3',name:'删除'},
]; $(function(){
// 当页面加载完成后, 动态创建ztree 菜单
$.fn.zTree.init($("#ztree1"), setting, zNodes);
}); $("#btn").on("click", function () {
var treeObj = $.fn.zTree.getZTreeObj("ztree1"); // 获取ztree对象 // 提交表单前将选中的checkbox收集
var nodes = treeObj.getCheckedNodes(true);
var array = new Array();
for (var i = 0; i < nodes.length; i++) {
array.push(nodes[i].id);
}
var ids = array.join(",");
alert("ids=" + ids); // ids=1,100,101 // 将选中的checkbox数据绑定到input
$("input[name='ids']").val(ids); alert($("#form").serialize()); // ids=1%2C100%2C101
alert(decodeURIComponent($("#form").serialize())); // ids=1,100,101
$("#form").submit(); // 提交表单
}); </script>
</body>
</html>
z-tree的使用的更多相关文章
- 【BZOJ2631】tree
Description 一棵n个点的树.每一个点的初始权值为1. 对于这棵树有q个操作,每一个操作为下面四种操作之中的一个: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 ...
- 【BZOJ2558】Count on a tree
又是因为傻逼错误浪费了半天时间 原题: 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个 ...
- Luogu 3690 Link Cut Tree
Luogu 3690 Link Cut Tree \(LCT\) 模板题.可以参考讲解和这份码风(个人认为)良好的代码. 注意用 \(set\) 来维护实际图中两点是否有直接连边,否则无脑 \(Lin ...
- HDU 4757 Tree(可持续化字典树，lca)
题意:询问树上结点x到结点y路上上的权值异或z的最大值. 任意结点权值 ≤ 2^16,可以想到用字典树. 但是因为是询问某条路径上的字典树,将字典树可持续化,字典树上的结点保存在这条路径上的二进制数. ...
- Spoj Query on a tree SPOJ - QTREE(树链剖分+线段树)
You are given a tree (an acyclic undirected connected graph) with N nodes, and edges numbered 1, 2, ...
- [BZOJ 2002] [HNOI2010]弹飞绵羊(Link Cut Tree)
[BZOJ 2002] [HNOI2010]弹飞绵羊(Link Cut Tree) 题面 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一 ...
- [BJOI2014]大融合(Link Cut Tree)
[BJOI2014]大融合(Link Cut Tree) 题面 给出一棵树,动态加边,动态查询通过每条边的简单路径数量. 分析 通过每条边的简单路径数量显然等于边两侧节点x,y子树大小的乘积. 我们知 ...
- bzoj1588
splay #include<cstdio> #include<cstring> #include<algorithm> using namespace std; ...
- CF 484E - Sign on Fence
E. Sign on Fence time limit per test 4 seconds memory limit per test 256 megabytes input standard in ...
- 线段树（codevs1082）
type jd=record z,y,lc,rc,sum,toadd:int64; end; var tree:..] of jd; qzh:..] of int64; x:..] of int64; ...
随机推荐
- tensorflow各个版本的CUDA以及Cudnn版本对应关系
概述,需要注意以下几个问题: (1)NVIDIA的显卡驱动程序和CUDA完全是两个不同的概念哦!CUDA是NVIDIA推出的用于自家GPU的并行计算框架,也就是说CUDA只能在NVIDIA的GPU上运 ...
- 【VS开发】【智能语音处理】MATLAB 与 音频处理 相关内容摘记
MATLAB 与 音频处理 相关内容摘记 MATLAB 与 音频处理 相关内容摘记 1 MATLAB 音频相关函数 1 MATLAB 处理音频信号的流程 2 音量标准化 2 声道分离合并与组合 3 数 ...
- Prometheus Querying Function rate() vs irate()
rate() rate(v range-vector) calculates the per-second average rate of increase of the time series in ...
- 小记---------idea新手操作
加载jar包 file---project structrue ---modules---dependencies---- 点+号 选择idea软件的位置的lib 添加自带的jar包,or ...
- c#中抽象类和接口的相同点跟区别
下面是自己写的一个demo,体现抽象类和接口的用法. using System; using System.Collections.Generic; using System.Linq; using ...
- qt对plot柱状图颜色设置
当使用qwtplotbarchart来使用柱状图时.可以通过下面代码来设置柱状图的颜色 QwtPlotBarChart *barChart = new QwtPlotBarChart(" ...
- SQL 基础语句整理
SQL教程 SELECT 语句 SELECT * FROM 表名称 DISTINCT 语句 SELECT DISTINCT 列名称 FROM 表名称 SELECT LastName,FirstName ...
- springboot(十五)-Runner启动器
Runner启动器 如果你想在Spring Boot启动的时候运行一些特定的代码,你可以实现接口ApplicationRunner或者CommandLineRunner,这两个接口实现方式一样,它们都 ...
- vue组件之间通信的8种方式
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...
- Win7安装Visual Studio 2019闪退问题
最近在Win7 系统上安装最新版的VS2019发现 每次在这个画面之后就闪退了,即便换了台电脑也是一样的情况,于是我意识到,这应该是系统本身的问题 经过调查发现是只需要安装两个更新就可以了 这两个更新 ...