zTree(setting, [zTreeNodes])

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);