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; ...
随机推荐
- Angular5 自定义scrollbar样式之 ngx-malihu-scrollbar
简介 此插件是 Malihu jQuery Scrollbar 为了在 Angular2+ 环境下使用,封装的一个ts的版本.提供directive和service. 从安装量来看,它比不过 perf ...
- Java类初始化和实例初始化过程
1.类初始化过程 一个类要创建实例需要先加载并初始化该类 main方法所在的类需要先加载和初始化 一个子类要初始化需要先初始化父类 一个类初始化就是执行<client>()方法(编译器生成 ...
- 洛谷 P3919 可持久化线段树 题解
题面 这题好水的说~很明显就是主席树的大板子 然而我交了3遍才调完所有的BUG,开好足够的数组,卡掉大大的常数: 针对与每次操作,change()会创建新节点,而ask()虽然也会更新左右儿子的节点编 ...
- HDU-5471 Count the Grid
题目描述 一个矩阵中可以任意填\(m\)个数.给你\(N\)个小矩阵并且告诉你此矩阵中的最大值\(v\),求有多少种大矩阵满足所给条件.\((\%1e9+7)\) Input 包含\(T\)组数据. ...
- Laravel5.8自定义函数存放位置
1. 创建文件 app/helpers.php <?php // 示例函数 function foo() { return "foo"; } 2. 修改项目 composer ...
- PhpStorm配置Xdebug调试
安装xdebug 去官网下载对应版本的xdebug扩展 XDEBUG EXTENSION FOR PHP | DOWNLOADS 如何选择正确版本 输出phpinfo()函数的内容 查看输出页面的网页 ...
- 下载MySQL的rpm包安装MySQL
cd /usr/local/src wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-community-server-5.7.27-1.el ...
- 学会这些 pycharm 编程小技巧，编程效率提升 10 倍
PyCharm 是一款非常强大的编写 python 代码的工具.掌握一些小技巧能成倍的提升写代码的效率,本篇介绍几个经常使用的小技巧. 一.分屏展示 当你想同时看到多个文件的时候: 1.右击标签页: ...
- CentOS 7 安装MongoDB 4.0
1.创建yum源文件 /etc/yum.repos.d/mongodb-org-4.0.repo [mongodb-org-4.0] name=MongoDB Repository baseurl=h ...
- jenkins配置windows节点遇到的问题
配置:https://blog.csdn.net/liuchunming033/article/details/52025541 错误: 使用slave-agent.jnlp启动时报以下错误,是mas ...