1.首先在页面上有<ul/>标签

<ul id="tree" class="ztree"></ul>

2.定义ztree的配置参数

var setting = {
//check属性放在data属性之后,复选框不起作用
check: {
enable: true
},
data: {
simpleData: {
enable: true
},
}
};

3.获得ztree所要绑定的数据,可以使用静态数据也可以使用ajax获取的数据
a)Ztree的数据有两种格式,标准格式如下:
标准的 JSON 数据需要嵌套表示节点的父子包含关系
例如:

var nodes = [
{
name: "父节点1",
open:true,
children: [
{name: "子节点1"},
{name: "子节点2"}
]
}
];

  

b)简单数据格式如下(推荐使用):
简单模式的 JSON 数据需要使用 id/pId表示节点的父子包含关系,如使用其他属性设置父子关联关系请参考setting.data.simple内各项说明
例如:

var nodes = [
{id:1, pId:0, name: "父节点1"},
{id:11, pId:1, name: "子节点1"},
{id:12, pId:1, name: "子节点2"}
];

简单数据的id,pId,name,title都可以在setting的data中进行配置,指定相应的字段。

在setting的data中配置simpleData为enable:true即表示使用简单数据格式,不配置或配置为false则为标准数据格式.

var setting = {
data: {
simpleData: {
enable: true
}
}
};

  

4.初始化ztree生成树

$.fn.zTree.init($("#tree"), setting, nodes);

第一个参数是<ul/>id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据.

5.zTreeObj树对象
zTreeObj是树的对象,获取到zTreeObj对象后就可以使用ztree的N多方法来操作树,获取方式:
var treeObj = $.fn.zTree.getZTreeObj("tree"); //参数为树的id
具体方法都有哪些参见api的zTreeObj部分

a)zTreeObj.getNodeByParam(key, value, parentNode)根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象。
Key:需要精确匹配的属性名称
Value:需要精确匹配的属性值,可以是任何类型,只要保证与 key 指定的属性值保持一致即可
parentNodeJSON:搜索范围,指定在某个父节点下的子节点中进行搜索,忽略此参数,表示在全部节点中搜索

返回值JSON
匹配精确搜索的节点数据
1、如无结果,返回 null
2、如有多个节点满足查询条件,只返回第一个匹配到的节点
vartreeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByParam("id", 1, null);

b)zTreeObj.getNodes()获取zTree的全部节点数据,返回值Array(JSON)
vartreeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();

c)zTreeObj.getSelectedNodes()获取zTree当前被选中的节点数据集合,返回值Array(JSON)
vartreeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();

d)zTreeObj.expandAll(flag) 展开/折叠全部节点
flag Boolean true表示展开,false表示折叠
返回值Boolean

返回值表示最终实际操作情况
true 表示展开全部节点
false 表示折叠全部节点
null 表示不存在任何父节点

vartreeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.expandAll(true);

e)zTreeObj.expandNode(treeNode, expandFlag, sonSign, focus, callbackFlag)展开/折叠指定的节点
treeNodeJSON:需要展开 / 折叠的节点数据
请务必保证此节点数据对象是zTree内部的数据对象
expandFlagBoolean
expandFlag = true 表示展开节点
expandFlag = false 表示折叠节点
省略此参数,则根据对此节点的展开状态进行 toggle 切换

sonSignBoolean
sonSign = true 表示全部子孙节点进行与expandFlag相同的操作
sonSign = false 表示只影响此节点,对于其子孙节点无任何影响
sonSign = false 且treeNode.open = expandFlag时,不会触发回调函数,直接返回
省略此参数,等同于 false

focusBoolean
focus = true 表示展开 / 折叠操作后,通过设置焦点保证此焦点进入可视区域内
focus = false 表示展开 / 折叠操作后,不设置任何焦点
省略此参数,等同于 true

callbackFlagBoolean
callbackFlag = true 表示执行此方法时触发beforeExpand / onExpand或beforeCollapse / onCollapse事件回调函数
callbackFlag = false 表示执行此方法时不触发事件回调函数
省略此参数,等同于 false
返回值Boolean
返回值表示最终实际操作情况
true 表示展开节点
false 表示折叠节点
null 表示不是父节点

vartreeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) {
treeObj.expandNode(nodes[0], true, true, true);
}

6.treeNode树节点对象
每一个treeNode对象都有N多属性和方法,具体参见api的treeNode部分

常用示例:
a)treeNode.isParent判断节点是否是父节点
b)treeNode.name节点名称
c)treeNode.children获取节点的子节点数据集合
d)treeNode.getParentNode获取父节点
e)treeNode.level获取节点的层级,根节点的level为0
f)treeNode.tId生成的树的节点的html id,区别于主键id
g)treeNode.parentTId获取的父节点的tId
h)绑定到树上的其他字段可以通过treeNode对象直接获取,如:treeNode.phone

jQuery Ztree基本用法的更多相关文章

  1. jq生成目录文件树jQuery Ztree基本用法

    转自:http://www.cnblogs.com/linjiqin/p/4547452.html 1.首先在页面上有<ul/>标签 ? 1 <ul id="tree&qu ...

  2. Jquery zTree的使用

    <%@ page language="java" pageEncoding="utf-8"%><%@taglib prefix="s ...

  3. 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

    1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf'   ...

  4. C#使用Jquery zTree实现树状结构显示_异步数据加载

    JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/dem ...

  5. jQuery.zTree的跳坑记录

    最近项目用到树型结构的交互,一开始并不打算选择zTree,为了项目进度我妥协了,这一妥协后果就是我进坑了,在2天的挣扎中,我终于跳出坑了,活了下来,有一些感慨纪录下来. 有一个业务场景需要2个树型结构 ...

  6. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

  7. jquery.cookie.js 用法

    jquery.cookie.js 用法   一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 j ...

  8. JQuery ztree 异步加载实践

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...

  9. jQuery+zTree加载树形结构菜单

    jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...

随机推荐

  1. 面向服务体系架构(SOA)和数据仓库(DW)的思考基于 IBM 产品体系搭建基于 SOA 和 DW 的企业基础架构平台

    面向服务体系架构(SOA)和数据仓库(DW)的思考 基于 IBM 产品体系搭建基于 SOA 和 DW 的企业基础架构平台 当前业界对面向服务体系架构(SOA)和数据仓库(Data Warehouse, ...

  2. 三天没有写题了,罪过!--Hash Table Start

    (1)Island Perimeter 解题思路: 在矩阵上循环并记录岛(1)的个数;如果当前节点是岛,则检查其是否具有任何右邻居或下邻居,有的话邻居计数加1 ;岛的周长结果为islands * 4 ...

  3. zabbix快速安装

    运维什么的其实感觉根本没有什么好写的了,因为太简单了嘛,尤其是这个监控,整得那么麻烦要干嘛,不过貌似很多人喜欢这个,我就随手写一点吧 环境:centos7.2.1511最简安装,就是什么都不选直接就开 ...

  4. DUILIB 背景贴图

    贴图的描述 方式有两种    // 1.aaa.jpg    // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...

  5. flash builder关掉自动编译功能

    菜单栏 项目,里面有个自动构建,把√去掉就ok了

  6. CMS为什么采用“标记-清除”算法

    分代式GC里,年老代常用mark-sweep:或者是mark-sweep/mark-compact的混合方式,一般情况下用mark-sweep,统计估算碎片量达到一定程度时用mark-compact. ...

  7. 1.Java内存区域

    Java虚拟机在执行java程序的过程中会把他管理的内存划分为若干个不同的数据区域各自用途.创建以及销毁时间各不相同.有的随着虚拟机进行的启动而存在,有的区域依赖于线程的启动和结束而建立以及销毁.如图 ...

  8. hdu4738 Caocao's Bridges

    http://acm.hdu.edu.cn/showproblem.php?pid=4738 题目大意:曹操赤壁之战大败,于是卷土重来.为了避免水上作战,他在长江上建立了一些岛屿,这样他的士兵就可以在 ...

  9. 管理权限<八>

    权限:如果用户要访问其它方案的对象,则必须为其授予对象的权限.为权限  权限 权限是指执行特定类型 sql 命令或是访问其它方案对象的权利,包括系统权限和对象权限两种. 系统权限  系统权限介绍 ...

  10. tp 中关于大小写的问题

    ThinkPHP3.2.3升级的若干问题和注意事项(持续更新) 现把ThinkPHP3.2.2在升级到3.2.3的过程中需要注意和可能的问题整理如下: (无论如何,在升级之前请确认备份) 1.首先3. ...