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; ...
随机推荐
- sublime3配置php开发环境
Sublime3 3143 1.用包管理器安装SublimeLinter ctrl+shift+p Package Control: install package SublimeLinter 注意: ...
- C++中的异常处理（上）
1,C++ 内置了异常处理的语法元素 try ... catch ...: 1,try 语句处理正常代码逻辑: 2,catch 语句处理异常情况: 3,try 语句中的异常由对应的 catch 语句处 ...
- JS拖拽系列--多元素拖拽，面向对象，es6拖拽
最近不太忙,终于有时间,研究了一下早就想搞定的拖拽系列,先是写了面向过程式的,再做一个面向对象的,再顺便弄弄继承,最后玩一下ES6的class 不觉用了一天多,收获很大.拖拽弄完,想再弄一个拖放. ...
- 在 Chrome DevTools 中调试 JavaScript 入门
第 1 步:重现错误 找到一系列可一致重现错误的操作始终是调试的第一步. 点击 Open Demo. 演示页面随即在新标签中打开. OPEN DEMO 在 Number 1 文本框中输入 5. 在 N ...
- js，el表达式，<c:if>
<c:if>中只能有一个判断语句,但是可以在一个el表达式中写多个判断条件 例: <c:if test="${fn:length(item.work_detail.note ...
- python常见问题解决方案
平时工作中经常需要用到这些python小技巧,顺便做个记录 import requests import time def get_pr(domain): pr = 6 time.sleep(1) h ...
- Centos7安装Python3的方法[转]
Centos7安装Python3的方法 由于centos7原本就安装了Python2,而且这个Python2不能被删除,因为有很多系统命令,比如yum都要用到. [root@VM_105_217_ ...
- neutron网络实践
一.虚拟机获取 ip: 用 namspace 隔离 DHCP 服务 Neutron 通过 dnsmasq 提供 DHCP 服务,而 dnsmasq 通过 Linux Network Namespace ...
- Zen Cart 138 在PHP5.3环境下出现的Fatal error: Cannot redeclare date_diff()
Zen Cart 138 在PHP5.3环境下出现的Fatal error: Cannot redeclare date_diff() in includes/functions/functions_ ...
- 清北学堂提高组突破营游记day5
长者zhx来啦.. (又要送冰红茶了...) zhx一上来就讲动态规划...是不是要逼死人.... 动态规划: 最简单的例子:斐波那契数列.因为他是递推(通项公式不算)的,所以前面的已经确定的项不会影 ...