ztree入门

最新推荐文章于 2021-07-29 17:19:53 发布

会打球的程序员

最新推荐文章于 2021-07-29 17:19:53 发布

阅读量266

点赞数

分类专栏： ztree

本文链接：https://blog.csdn.net/qq_36223657/article/details/52881422

版权

ztree 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">首先说一下ztree的特点</span>

● zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载

● 采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀

● 兼容 IE、FireFox、Chrome、Opera、Safari 等

● 支持 JSON 数据

● 支持静态和 Ajax 异步加载节点数据

● 支持任意更换皮肤 / 自定义图标(依靠css)

● 支持极其灵活的 checkbox 或 radio 选择功能

● 提供多种事件响应回调

● 灵活的编辑(增/删/改/查)功能，可随意拖拽节点，还可以多节点拖拽哟

● 在一个页面内可同时生成多个 Tree 实例

异步节点树Ztree的优点在于如果树的节点数量异常多，如果还使用同步加载，数据量非常大，效率低下，更糟糕的是会出现IE异常。

异步加载，仅仅只加载当前级的节点，当用户点击下一级时候，才会异步加载数据。

其次我们引入一下ztree的核心文件我们用到的版本为 zTree v3.x

zTree v3.x 有 3 个 js 文件，一个核心包 ( jquery.ztree.core-3.x.js )，两个扩展包 -- 复选框功能包 ( jquery.ztree.excheck-3.x.js ) & 编辑功能包 ( jquery.ztree.exedit-3.x.js )

zTree v3.x 只使用一个 zTreeStyle.css 文件，为了尽量避免样式冲突，将 zTree 容器的 className 设置为 'ztree'

zTree 使用 JSON 数据，关于数据部分请认真查看 API 文档 "treeNode 节点数据详解" 中的内容，并且在 Demo 中也都可以看到 treeNode 的定义

创建第一个简单的树:

引入核心js文件

<scripttype="text/javascript"src="jquery-1.4.2.js"></script>

<scripttype="text/javascript"src="jquery.ztree.core-3.x.js"></script>

js代码

<SCRIPTLANGUAGE="JavaScript">

var zTreeObj;

// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）

var setting ={};

// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

var zNodes =[ {name:"test1", open:true, children:

[ {name:"test1_1"},{name:"test1_2"}

]},

{name:"test2", open:true, children:[

{name:"test2_1"},{name:"test2_2"}

]} ];

$(document).ready(function(){

zTreeObj =$.fn.zTree.init($("#treeDemo"), setting, zNodes);

});

</SCRIPT>

body中代码

<BODY>

<div>

<ulid="treeDemo" class="ztree"></ul>

</div>

</BODY>

注意：
zTree 的容器 className 别忘了设置为 "ztree"

完成建立一个简单的树。

其中 zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);为建立树的方法。固定写法。更改其中参数即可，通常情况是默认值，只需要将树的容器ID传入，以及setting，和zNodes参数传入即可。

#treeDemo为 zTree 的 DOM 容器

Setting

zTree 的配置数据，具体请参考 “setting 配置详解”中的各个属性详细说明

zNodesArray(JSON) / JSON

zTree 的节点数据，具体请参考 “treeNode 节点数据详解”中的各个属性详细说明

1、v3.x 支持单独添加一个节点，即如果只新增一个节点，不用必须包在数组中

2、如果需要异步加载根节点，可以设置为 null 或 [ ]

以上为API详解。

标准的 JSON 数据需要嵌套表示节点的父子包含关系

例如：
var nodes = [
	{name: "父节点1", children: [
		{name: "子节点1"},
		{name: "子节点2"}
	]}
];

其中格式为JSON形式 当某个节点拥有children属性时，此节点为父节点，需要嵌套节点，格式不变，如有多重嵌套以此类推。

默认展开的节点，请设置 treeNode.open 属性
无子节点的父节点，请设置 treeNode.isParent 属性

其他属性说明请参考 API 文档中 "treeNode 节点数据详解

API有详细的方法以及属性提供使用，感谢作者的辛苦付出。

API以及Js文件下载地址为：http://www.treejs.cn/v3/demo.php

会打球的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录