jQuery Ztree基本用法

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

时间: 2024-10-12 19:05:40

jQuery Ztree基本用法的相关文章

JQuery ztree 异步加载实践

本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说这篇博客还算规整! 准备工作 1 JQuery ZTree,下载地址 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象,下载地址 我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-

jQuery的基本用法:

随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名 的有Prototype.YUI. jQuery.mootools.Bindows以及国内的JSVM框架等, jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 于 2006 年初创建 的,它有助于简化 JavaScript 以及Ajax 编程. 它具有如下一些特点: 1. 代码简练.语义易懂.学习快速.文档丰富. 2. jQuery是一个轻量

jquery——zTree, 完美好用的树插件

Demo 这绝对是我见过最完美的tree了,尽管是国产货,但一点不输国外产品,国外的还没有见过这么强的. __________________________________________________________________________________ 以下是简单的使用demo: <!DOCTYPE html> <html> <head> <title>ZTREE DEMO - Standard Data </title> &l

jQuery $.post $.ajax用法

jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示. callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法). type (Stri

MVC4 jquery 样式 主题 用法(案例)

MVC4已经自带了jquery,新建的项目,基本上什么都不用添加就可以运行,跑项目.(集成了那么多东西,jquery,modernizr,自带的默认权限,生成的模板,但是缺没有一个统一的文档或者什么去介绍已经集成的东西,怎么个用法 各种百科) 第一步: [项目]-[管理NuGet程序包] 点击更新 输入jquery ui 然后更新jquery ui插件到最新版本 第二步: 在项目中 [view]-[Shared]-[_Layout.cshtml] 公共界面 统一引用 方便以后修改. @Scrip

jQuery Template的用法

Javascript代码中不要包含HTML: var div = document.getElementById("my-div"); div.innerHTML = "<h3>Error</h3><p>Invalid e-mail address.</p>"; 在Javascript代码中完全隔绝HTML很难,这一点可以根据实际情况来权衡使用.Javascript 模版技术就是一种有效隔离HTML和Javascrip

AngularJS 利用directive集成JQuery ZTree

前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么. JQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件. AngularJS功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能. 因此,花了一点时间做了

jquery中cookie用法实例详解(获取,存储,删除等)

这篇文章主要介绍了jquery中cookie用法,结合实例详细分析了jQuery操作cookie的获取,存储,删除等操作,并附带了Jquery操作Cookie记录用户查询过信息实现方法,需要的朋友可以参考下 本文实例讲述了jquery中cookie用法.分享给大家供大家参考,具体如下: cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使用方法. 使用JQuery操作cookie时 发生取的值不正确的问题: 结果发现co

jQuery trigger one用法

jQuery trigger one用法: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName()