zTree简单使用
zTree使用
zTree插件依赖JQ所以使用zTree首先引入JQ,另外zTree的点击功能,编辑功能都是单独的文件,如需使用也要引入(也可以引入全部功能的JS文件)。
引入zTree的css文件(zTreeStyle.css和demo.css)。
DOM结构如下:class="ztree"提供一些样式必须有,id作为数的唯一标识必须有,同时必须的ul元素。
<div>
<ul class="ztree" id="first_tree"></div>
</div>
zTree的数据格式
zTree在使用JSON数据时,由两种数据格式供我们使用,分别是标准数据模式和简单数据模式
标准的数据模式为:
var nodes = {name:"第一层级",children:[{name:"第二层级",id:2,childred:[{}]}],id:1}
标准的数据模式的数据是一个JSON对象,立面的name会用作显示节点的名称,children会用作第一个阶段的子节点,children里面是一个个的对象,这些对象也是第一层级的格式,层层嵌套最终形成一个数据集合用作加载tree。name和children是必须的属性,其他的属性根据我们的实际需求具体添加。
简单数据模式:
var nodes = [{name:"第一层级",id:0,pId:null},{name:"第二层级",id:1,pId:0},{name:"第一层级",id:2,pId:0}]
简单数据模式的数据是一个数组对象,数组中的每一个对象都必须包括name,id,pid,name用作显示当前的节点名称,id表示当前的节点的唯一标识可用来做关联父级节点的桥梁,pid也是用来做父子节点的桥梁的,在默认情况下如果pid为null则当前的这个对象表示是tree的顶层节点。其他的属性根据我们的实际需求可以自行添加。
zTree的数据集合中常用的属性
name:表示当前的节点名称
id:用作节点的唯一标识
pid:和id互相对应表示当前节点是哪一个节点的子节点(在简单JSON格式中使用)
childred:里面的数据表示当前数据节点的子节点(在标准JSON格式中使用)
icon:表示当前节点的图标
iconClose,iconOpen:节点在收缩/展开是的图标
noCheck:表示当前节点前面的radio/checkbox是否显示 true表示不显示
其他的属性根据我们的实际需求可以通过查看API来了解,除了zTree提供给我的属性外,我们可以在节点属性中添加任何的属性来方便我们的使用,比如我们需要使用一个remark的字段,我们就可以在节点属性添加该属性。
zTree的设置
在zTree中常用的设置属性为:data,check,callback其他的属性功能可以通过查看API来使用。
定义一个简单的设置:
var setting = {
data:{//表示tree的数据格式
simpleData:{
enable:true,//表示使用简单数据模式
idKey:"id",//设置之后id为在简单数据模式中的父子节点关联的桥梁
pidKey:"pId",//设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
rootId:"null"//pid为null的表示根节点
}
},
view:{//表示tree的显示状态
selectMulti:false//表示禁止多选
},
check:{//表示tree的节点在点击时的相关设置
enable:true,//是否显示radio/checkbox
chkStyle:"checkbox",//值为checkbox或者radio表示
checkboxType:{p:"",s:""},//表示父子节点的联动效果
radioType:"level"//设置tree的分组
},
callback:{//表示tree的一些事件处理函数
onClick:handlerClick,
onCheck:handlerCheck
}
}
zTree的常用API使用
zTree所有的API都是都是由zTree的实例来调用的,所以在使用API的时候我们首先要获得我们想要操作的tree对象。
获取树对象的完成方式为:var treeObj = $.fn.zTree.getZTreeObj("tree"),参数为DOM的ID。
expandAll:展开或者折叠节点使用方式为 treeObj.expandAll(true) - >展开所有节点,设置为false为折叠所有节点。
getCheckedNodes:获得勾选的或者未勾选的节点使用方式为 treeObj.getCheckedNodes(true) - >获取所有勾选的节点,设置为false为所有未勾选的节点。
getNodeByParam:通过节点属性来获取一个节点使用方式为 treeObj.getNodeByParam("prop","value","parent"),第一个参数表示根据的属性名称,第二个参数表示属性值,第三个参数表示父级节点,
如果是在全局的范围内检索第三个参数设置为null即可。
getNodesByParam:和getNodeByParam使用方式一样,只不过getNodesByParam可以获得多个节点。
在实际开发过程中我们可以根据具体的需求去查看zTree的API文档,介绍的非常详细。
zTree的回调函数
我们定义好回调函数,在setting里面配置好即可:
function handlerClick(event,treeId,treeNode){
use treeId and treeNode to do sth……
}
每一个回调都可以接受三个参数,第一个参数表示事件,第一个参数很少使用,第二个参数表示当前的树Id我们可以用这个参数来获取tree对象,进而使用zTree的API,第三个参数表示当前的作用节点,treeNode包括当前节点的所有属性。
zTree完整示例
假如我们从服务器获取到了一个数据对象,里面包括班主任,和所有学生,班主任和学生是一个一对多的关系
原始数据如下:
var data = {
teacher:[
{id:0,name:"张老师",sex:"男"},
{id:1,name:"李老师",sex:"男"},
{id:2,name:"王老师",sex:"女"}
],
student:[
{id:0,name:"学生A",sex:"男",tId:0},
{id:1,name:"学生B",sex:"男",tId:0},
{id:2,name:"学生C",sex:"女",tId:1},
{id:3,name:"学生D",sex:"女",tId:1},
{id:4,name:"学生E",sex:"男",tId:2},
{id:5,name:"学生F",sex:"女",tId:2}
]
}
setting我们就采用上线的设置
DOM结构如下:
<div>
<ul class="ztree" id="des_school"></ul>
</div>
构建tree:
function initTree(){
var teacherList = data.teacher;
var studentList = data.student;
var treeData = [];
treeData.push({id:"root",name:"学校",pId:null});
for(var i=0,il=teacherList.length;i<il;i++){
teacherList[i].pId = "root";
treeData.push(teacherList[i]);
}
for(var i=0,il=studentList.length;i<il;i++){
studentList[i].id = "s"+studentList[i].id;
studentList[i].pId = studentList[i].tId;
treeData.push(studentList[i]);
}
$.fn.zTree.init($("#des_school"),setting,treeData);
}
$(function(){
initTree();
})
zTree简单使用的更多相关文章
- zTree简单实现
用zTree简单实现从后台传数据生成树 1.在jsp上引入js,jsp的head完整的部分 <%@ page language="java" contentType=&quo ...
- zTree简单使用和代码结构
1.页面使用元素代码 <input type="text" id="key" class="Side_Toput2" name=&qu ...
- ZTree简单粗暴快速使用
是什么:功能强大的树形插件 tip:查资料时痛苦的地方,自我改进 1.没有注明版本:版本不对应导致配置完成后各种无端的错误,特别难查找,运气好能找到英文的解答 2.没有写明配置文件,或者不指明配置文件 ...
- zTree使用技巧与详解
zTree--Jquery 树插件,是在后台管理页面中常使用到的插件. 使用效果图: 核心代码: zTree配置: var setting = { data:{simpleData:{enable:t ...
- 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用
1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf' ...
- ztree多种数据包装以及相关设置
首先来一个完整的ztree代码 html代码 <form id="addTreeDataFrm" method="post" class="fo ...
- BOS物流管理系统-第一天
BOS物流管理系统-第一天-系统分析.环境搭建.前端框架 BoBo老师 整体项目内容目标: 对项目概述的一些理解 亮点技术的学习 注意学习方式:优先完成当天代码. 其他内容. 最终: 学到新的技术,会 ...
- zTree入门-最简单的树
最近发现项目中很多地方都是树形菜单,而这些树形菜单都是使用树形插件zTree来制作的,所以就想自学一下zTree,参照官方文档写了一个简单的案例,使用zTree做了 一个最简单的树形结构. 案例:zT ...
- 简单Ztree的实现————不连接数据库版
Ztree可以去官网去下载相应的版本和API,我这里就简单的介绍下它的实现以及因为Ztree的小例子印发的Js问题,稍后我会在博客中写JS的异步问题, 我这里用的是MVC4.0,好了正文开始,上代码 ...
随机推荐
- docker 数据管理数据卷
1,数据卷 数据卷是一个可供容器使用特殊目录,他将主机操作系统目录直接映射容器 1,在容器内创建一个数据卷 在使用docker run命令的时候,使用-v标记就可以创建一个数据卷,多次重复使用-v可以 ...
- 设置UCHome注册登陆退出的跳转页自定义
UCHome 默认注册.登录成功后跳转到 http://www.xxx.com/home/space.php?do=home 退出后会跳转到站点的首页,即 http://www.xxx.com/hom ...
- docker搭建oracle 11.2.0.3.0
dockerfile 如下: FROM oraclelinux:-slim ARG ORACLE_BASE=/opt/oracle ARG ORACLE_HOME=/opt/oracle/produc ...
- Docker Compose 入门使用指南
Compose is a tool for defining and running multi-container Docker applications. With Compose, you us ...
- 自定义查询语句SpringData
虽然官方的API中给我们提供了很多关键字的查询,但是还是不够灵活,因为我们在项目中,会遇见奇葩的业务,我们需要用SpringData中的一个@Query注解. 使用@Query自定义查询 这种查询可以 ...
- Keras实践:模型可视化
Keras实践:模型可视化 安装Graphviz 官方网址为:http://www.graphviz.org/.我使用的是mac系统,所以我分享一下我使用时遇到的坑. Mac安装时在终端中执行: br ...
- Bootstrap抽样(自展法)
Bootstrap又称自展法,是用小样本估计总体值的一种非参数方法,在进化和生态学研究中应用十分广泛.例如进化树分化节点的自展支持率等. Bootstrap的思想,是生成一系列bootstrap伪样本 ...
- Python中的MySQL接口:PyMySQL & MySQLdb
MySQLdb模块只支持MySQL-3.23到5.5之间的版本,只支持Python-2.4到2.7之间的版本 PyMySQL支持 Python3.0以后的版本 PyMySQL https://pypi ...
- RESTful源码笔记之RESTful Framework的APIview, Viewset总结分析
0x00 引言 官方文档:http://www.django-rest-framework.org/drf为我们提供强大的通用view的功能,本博客对这些view进行简要的总结分析.首先,我们看一下 ...
- Migrating from Spring 3 to Spring 4 - org.springframework.scheduling.quartz.CronTriggerBean
I'm trying to migrate from spring 3.0.5 to spring 4.1.X . Spring 3 has Class named as "org.spri ...