您的位置：首页 > 其它

zTree的简单使用

2011-11-27 13:48 239 查看

官方地址：http://baby666.cn/hunter/zTree.html

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件,下载了看一下demo,确实强悍,这给Web开发人员带来了福音,具体使用比较简单,手册中和demo中都有，不过demo一般示范比较复杂，容易分散注意力，反而搞得人不知道如何下手。

我们来看zTree核心函数的一段使用文档：

返回值: zTreePluginzTree(setting, [zTreeNodes])

目录: [zTree 核心函数]概述

这个函数接受一个 JSON 格式的数据对象 setting 和一个 JSON 格式的数据对象 zTreeNodes，从而建立 Tree。

对于用户在 Web 页面上建立 Tree，就是通过这个函数实现的，对于后期的代码控制，则通过返回的 zTreePlugin 对象操作即可。

需要显示 Tree 的 Web 页面需要加载 jquery-1.4.2.js / jquery.ztree-2.6.js / zTreeStyle.css 这三个文件。

请注意设置 Tree 的容器样式 class="tree"，其中 tree 这个名称，可以根据需要随意修改，别忘了修改 css 中对应名字就是了，对于容器如果需要增加其他特殊样式，可根据自己的需要进行修改。
需要使用系列图标请加载 zTreeIcons.css。
页面需要进行 W3C 申明，例如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

参数

settingJson

zTree 的参数配置数据，详细请参见参数说明 -> setting 详解

zTreeNodes (可选)JSON

zTree 的参数配置数据，详细请参见参数说明 -> zTreeNodes 详解；

如果将节点数据直接放在 setting.root.nodes 下，或者全部从异步获取节点数据，则不需要传递此参数。

示例

描述：

简单创建 zTree 演示

setting 举例:

var setting = {
showLine: true,
checkable: true
};

普通 zTreeNodes 举例:

var zTreeNodes = [
{ "name":"google", "url":"http://g.cn", "target":"_blank"},
{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
];

带有父子关系的标准 zTreeNodes 举例:

var zTreeNodes = [
{"id":1, "name":"test1", "nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111, "name":"test111"}
]},
{"id":12, "name":"test12"}
]},
......
];

带有父子关系的简单 Array 格式的 zTreeNodes 举例（使用简单 Array 格式的数据请参考 isSimpleData ）:

var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
......
];

Html 对象:

<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>

初始化 Tree:

var zTree = $("#tree").zTree(setting, zTreeNodes);

-------------------------------------------------------------------------------------------------------------------------------------------------

以上来自手册，看的出来使用非常简单，只要懂javascript和json语言就没有任何问题，下面是我的一些实验：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="demoStyle/demo.css" type="text/css"></link>
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.ztree-2.6.js"></script>
<script type="text/javascript">
var setting1 = {showline:true,checkable:true};
//json
var zTreeNodes1 = [
{ "name":"google", "url":"http://g.cn", "target":"_blank"},
{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
];
var zTreeNodes2 = [
{id:1,name:'手机',nodes:[
{id:11,name:'诺基亚',nodes:[
{id:111,name:'C6(音乐版)'},
{id:112,name:'X6(导航版)'},
{id:113,name:'5230(世博版)'}
]},
{id:12,name:'三星'},
{id:13,name:'索爱'},
{id:14,name:'多普达'}
]},
{id:2,name:'电脑'},
{id:3,name:'家电'}
];
window.onload=function(){
$("#treeDemo1").zTree(setting1,zTreeNodes1);
$("#treeDemo2").zTree({showline:true,checkable:false},zTreeNodes2);
};
</script>
</head>
<body>
<div class="zTreeDemoBackground" style="float:left;">
<ul id="treeDemo1" class="tree" style="float:left;"></ul>
</div>
<div class="zTreeDemoBackground"  style="float:left;">
<ul id="treeDemo2" class="tree"></ul>
</div>

</body>
</html>

运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航