zTree的重点
今天学习了zTree插件，记录一下使用步骤：
1 下载，把下载好的目录整个放在项目中
文件夹目录：
js：一般引这jquery.ztree.all.js和jquery.ztree.core.js
css:：用zTreeStyle里面的zTreeStyle.css
demo：示例：可以右键--查看框架信息，可以看到网址，再打开相应的文件，查看代码
api：帮助文档
2
1）引入css，引入jquery，引入zTree.js
2）加一个结构代码
<div id="treeDemo" class="ztree"></div>，注意id和class必须有。
3）然后从demo中把js拷贝下来
4）主要修改setting配置 和 Znodes 数据
3 一般使用“简单json”这种数据格式，
数据是从是数据库中得到的，是一个二维数组，
可以用for循环把数据添加到ztree的数据节点中（代码在最后）
其他可以查看api中的“treeNode 节点数据详解”
5 setting 配置详解
回调函数举例：
onclick，有三个参数比较重要：
总体示例：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-tree</title>
<link rel="stylesheet" href="../../lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
<script src="../../lib/jquery-3.2.1.min.js"></script>
<script src="../../lib/zTree_v3/js/jquery.ztree.all.js"></script> <script>
var setting = {
data: {
simpleData: {
enable: true
}
},
callback: { //回调函数
onClick: zTreeOnClick
}
}; //点击时弹出id和名称
function zTreeOnClick(event, treeId, treeNode){
console.log(treeNode.id+treeNode.name);
} //原始数据
var arr=[
[1,'山东',0],
[2,'辽宁',0],
[3,'江苏',0],
[11,'淄博',1],
[21,'大连',2],
[31,'南京',3],
[111,'张店',11],
]; //z-tree数据
var zNodes=[]; //把原始数据放入z-tree数据中（是一个json）
for(var i=0; i<arr.length; i++){
zNodes.push({
id:arr[i][0],
name:arr[i][1],
pId:arr[i][2]
})
} $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</head> <body>
<div id="treeDemo" class="ztree"></div>
</body> </html>
效果：
可以在控制台查看点击时的效果
总结：ztree的使用还比较简单，api不大容易看，直接看demo示例就可以，遇到相应功能，直接拷贝就行。插件这种东西还是重在理解，不需要在意写法，都是规定好的，就是拿过来直接用。所以，还是要实际项目中，有机会用一遍，才能发现问题。
zTree的重点的更多相关文章
- JAVAEE——BOS物流项目02：学习计划、动态添加选项卡、ztree、项目底层代码构建
1 学习计划 1.jQuery easyUI中动态添加选项卡 2.jquery ztree插件使用 n 下载ztree n 基于标准json数据构造ztree n 基于简单json数据构造ztree( ...
- 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh（复习） 4、 SpringData-JPA持久层入门案例（重点） 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用
1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...
- 项目一:第一天 1、项目概述 2、环境搭建（重点） 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用
1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf' ...
- zTree的使用教程
1.首先去官网下载http://www.ztree.me/v3/main.php#_zTreeInfo 2.之后引入: <script src="js/jquery.ztree.all ...
- zTree第三章，异步加载，前端
zTree异步加载 ---------------------------------------------------------------------------------- 具体详见API ...
- [译]聊聊C＃中的泛型的使用（新手勿入） Seaching TreeVIew WPF 可编辑树Ztree的使用（包括对后台数据库的增删改查） 字段和属性的区别 C# 遍历Dictionary并修改其中的Value 学习笔记——异步 程序员常说的「哈希表」是个什么鬼？
[译]聊聊C#中的泛型的使用(新手勿入) 写在前面 今天忙里偷闲在浏览外文的时候看到一篇讲C#中泛型的使用的文章,因此加上本人的理解以及四级没过的英语水平斗胆给大伙进行了翻译,当然在翻译的过程中发 ...
- zTree学习笔记
一.zTree的下载 官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 解压后的目录结构为: 二.zTree入门案例 2.1 在页面中引入相关文件 要使用z ...
- 输入框点击下滑Ztree菜单
记录一个功能实现代码,我这边前端用的是layui,需要实现的效果如下: 需求:当点击选择地区的时候会出现如上图的下拉菜单. 分析:首先肯定给这个输入框加监听,click方法,然后将ztree的div显 ...
- 一个简单便捷的树形显示Ztree
这是本人在闲时研究的一个用于显示树形列表的小玩意. zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 下面就说说怎么用吧 ...
随机推荐
- COGS 2581 无聊的会议V2
传送 题目大意 给定一个长为\(n\)的序列,定义\(y\)在三元对\((x,y,z)\)中成为中心轴当且仅当同时满足:\(a_x = a_y = a_z,y-x=z-y,x<y<z\)对 ...
- 【C++基础】浅拷贝和深拷贝
简单理解: 对于一块内存,浅拷贝只是增加了一个指针,这样两个变量都指向这块内存,二深拷贝则是先开辟一块同等大小的新内存区,将待拷贝内存的内容复制过来,再赋予一个指向新内存的指针.区别在于:浅拷贝会造成 ...
- Godot-3D教程-01.介绍3D
创建一个3D游戏将是个挑战,额外增加的Z坐标将使许多用于2D游戏的通用技术不再有用.为了帮助变换(transition),值得一提的是Godot将使用十分相似的API用于2D和3D. 目前许多节点是公 ...
- 2010浙大:zoj问题
题目描述: 对给定的字符串(只包含'z','o','j'三种字符),判断他是否能AC. 是否AC的规则如下:1. zoj能AC:2. 若字符串形式为xzojx,则也能AC,其中x可以是N个'o' 或者 ...
- 利用JS函数制作时钟运行程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- cshtml 获取session值
在 cshtml 中,我们如何获取 session 的呢? 首先我们先设置 session 值,我们一般都会在 Controller 设置 session. Session["isAdmin ...
- MVC实用笔记
---------------------------- 渲染一个Action:@{Html.RenderAction("Rulelist", "AjaxReuqestD ...
- ue4 打个log难如狗
注意: 把log相关两个宏写到类中,并编译后,在输出日志的位置的Categories关键字过滤的位置看不到自己的标签是因为需要先运行一次,输出一些这个标签的log后,这个自定义的标签才会显示在这 原文 ...
- Spring Boot Dubbo 构建分布式服务
概述: 节点角色说明 节点 角色说明 Provider 暴露服务的服务提供方 Consumer 调用远程服务的服务消费方 Registry 服务注册与发现的注册中心 Monitor 统计服务的调用次数 ...
- JavaScript进阶 - 第1章 系好安全带,准备启航
第1章 系好安全带,准备启航 1-1让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂 ...