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; ...
随机推荐
- 使用 iview Table 表格组件修改操作的显示隐藏
使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...
- Websocket --（2）实现
首先声明,本篇博文参考文章 https://blog.csdn.net/jack_eusong/article/details/79064081 主要在于理解和自己动手搭建环境,自己搭建的过程中会发生 ...
- 20 亿的 URL 集合，如何快速判断其中一个？
假设遇到这样一个问题:一个网站有 20 亿 url 存在一个黑名单中,这个黑名单要怎么存?若此时随便输入一个 url,你如何快速判断该 url 是否在这个黑名单中?并且需在给定内存空间(比如:500M ...
- 【6.12校内test】T1单词序列
[问题描述] 给出两个单词(开始单词和结束单词)以及一个词典.找出从开始单词转换到结束单词, 所需要的最短转换序列.转换的规则如下: 1.每次只能改变一个字母 2.转换过程中出现的单词(除开始单词和结 ...
- Luogu P2915 [USACO08NOV]奶牛混合起来
题外话: 是非常颓废的博主 写题解也不在于能不能通过啦,主要是缓解颓废 首先看到这个题,肯定是可以暴力搜索的: 不得不说这道题还是很善良的,一波大暴力dfs,居然有70pts: #include< ...
- 2-django配置
一.settings.py配置 1.时区配置 现在看到的界面是英文的,将 LANGUAGE_CODE = 'en-us' 改为 LANGUAGE_CODE = 'zh-Hans '就可以看到如下界面 ...
- luogu P4631 [APIO2018] Circle selection 选圆圈
传送门 那个当前半径最大的圆可以用堆维护.这道题一个想法就是优化找和当前圆有交的圆的过程.考虑对于所有圆心建KD-tree,然后在树上遍历的找这样的点.只要某个点子树内的点构成的矩形区域到当前圆心的最 ...
- 生成二维码功能（js前端）
生成二维码需要引入qrcode.js和jquery.min.js <!DOCTYPE html> <head> <title>二维码</title> & ...
- 和IE6-IE8说拜拜 一段IE兼容HTML代码 针对IE版本写css
通过这段html可以让你对特定的ie版本添加内容,只在特定版本ie展现,可以是javascript.css.html. <!--[if IE]> 这样使用IE浏览器(全部版本)的人都看得到 ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...