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; ...
随机推荐
- [深度应用]·Keras极简实现Attention结构
[深度应用]·Keras极简实现Attention结构 在上篇博客中笔者讲解来Attention结构的基本概念,在这篇博客使用Keras搭建一个基于Attention结构网络加深理解.. 1.生成数据 ...
- 【VS开发】【C++语言】reshuffle的容器实现算法random_shuffle()的使用
假设你需要指定范围内的随机数,传统的方法是使用ANSI C的函数random(),然后格式化结果以便结果是落在指定的范围内.但是,使用这个方法至少有两个缺点.首先,做格式化时,结果常常是扭曲的,所以得 ...
- 【miscellaneous】监狱安防系统智能视频监控系统设计方案
1监狱安防新需求 随着司法监狱管理系统内视频监控系统的日益发展,现有的被动式人工监控这一传统模式已无法满足新形势下的监管工作需求,尤其是现在靠轮询的视频监控方式,无法对突发恶性事件做到第一时间的防御和 ...
- XCode8.3真机调试设置
本文使用XCode8.3.3 首先XCode->Preferncs,进入下面的界面 点击左下角“+”号,并输入账号,然后点击Manage Certificates,左下角添加IOS develo ...
- HDU-4332-Constructing Chimney
题目描述 用\(1*1*2\)的砖头摆出如图所示的烟囱,可以横着摆也可以竖着摆,求摆出\(n\)层高的烟囱会有多少种不同的方案. Input 一共有\(T\)组数据. 每组数据包含一个\(n(1 \l ...
- redis 小结 一
1.redis 是什么? 它是一个key-value存储系统,也被称为数据结构服务器,它的值是字符串(String),哈希(Hash),列表(list),集合(sets)和有序集合(sorted se ...
- java.lang.ClassNotFoundException: org.springframework.web.filter.CharacterEncodingFilter的解决方案
白天在实验室的电脑上的项目搭起来,晚上回到宿舍发现跑不起来了,网上查到的大多不是想要的答案. 最终的解决方案是maven clean一下再重新package.
- hdu2444The Accomodation of Students (最大匹配+判断是否为二分图)
题意 首先判断所有的人可不可以分成两部分,每部分内的所有人都相互不认识.如果可以分成 则求两部分最多相互认识的对数. 解题 类似分成两组,同组互不相关,就可能使判断是否为二分图 能否分成两部分 则是判 ...
- var与let变量for遍历的问题
var Liarry = document.getElementsByTagName('li'); /**方法一*描述:自执行函数,将变量当参数传入(闭包的思想,保存当前的值).*/ for (var ...
- 004-SaltStack入门篇之数据系统Grains、Pillar
1.什么是Grains? Grains是saltstack的组件,用于收集salt-minion在启动时候的信息,又称为静态信息.可以理解为Grains记录着每台Minion的一些常用属性,比如CPU ...