返回值: 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);