摘要：前言是一个依靠实现的多功能树插件。不同的树目录根据不同的数据，在服务器端编写好不同的，将其配置在这里即可。依赖获取的数据类型，默认值。依赖用于对返回数据进行预处理的函数。详细说明参见文档代码还是树插件使用方法与例子中的那个，不在重复粘贴。
前言
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。
网址：http://www.ztree.me/v3/main.p...
上回说到，在大型项目中，往往需要不同的用户看到不同的目录，不同的地区显示不同的目录等等，面对这些庞大的数据，需要生成不同结构的树目录，你不能一个一个定义这些配置来满足那么多数据需求，这就需要异步加载子节点的的父节点，通过构造treeNode的 JSON 数据对象方法来实现，如果你不嫌我啰嗦，接下来会给大家讲述这个方法。
setting配置按照如下配置来构造ztree:
//树初始化
var myTreeSetting = {
view: {
showLine: true,
selectedMulti: false,
dblClickExpand: false
},
async: {
enable: true,
type: "get",
dataType:"json",
url:"/server/basic/major/info/findmajortree.json",
autoParam:["id=pId"],
dataFilter: filter
},
data: {
simpleData: {
enable: true,
idKey:"id",
pIdKey:"pId",
rootPId:0
}
}
};
解释：
setting.async.url [ 依赖 jquery.ztree.core ]
Ajax 获取数据的 URL 地址，默认值："".设置固定的异步加载 url请注意地址的路径，确保页面能正常加载。
url 内也可以带参数，这些参数就只能是通过 get方式提交了，并且请注意进行data格式。不同的树目录根据不 同的数据，在服务器端编写好不同的url，将其配置在这里即可。
setting.async.dataType[ 依赖 jquery.ztree.core]
Ajax 获取的数据类型，默认值："text"。这里我使用了json。
setting.async.dataFilter[ 依赖 jquery.ztree.core ]
用于对 Ajax 返回数据进行预处理的函数。之后代码中会给出filter的定义。
详细说明参见：zTree API 文档 http://www.ztree.me/v3/api.php
代码html：
还是zTree -- jQuery 树插件 使用方法与例子中的那个html，不在重复粘贴, 。
js:
var treeNodes;
$(document).ready(function() {
initTree($("#planTree"));
});
//树初始化
var myTreeSetting = {
view: {
showLine: true,
selectedMulti: false,
dblClickExpand: false
},
async: {
enable: true,
type: "get",
dataType:"json",
url:"/server/basic/major/info/findmajortree.json",
autoParam:["id=pId"],
dataFilter: filter
},
data: {
simpleData: {
enable: true,
idKey:"id",
pIdKey:"pId",
rootPId:0
}
}
};
//初始化树，包括回调函数
function initTree(anchor){
//初始化节点
treeNodes = $.fn.zTree.init(anchor, classTreeSetting);
}
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i
如此，就可以实现了。
任它数据再多，树结构再复杂，这一个js就足以配置许多想要的书目录了。
效果如下：
后记
在页面上放这样一个树目录当然不是为了放在那里观看的，例如，你想要点击树中的某个节点，页面上的列表数据刷新为对应的数据，等功能，都可以通过以下方法来完成。
在myTreeSetting中配置 callback，定义点击事件。
callback: {
beforeClick: getCurrentNode,
onClick : zTreeOnClick
}
在js中定义这些函数:
function getCurrentNode(treeId, treeNode) {
curNode = treeNode;
zTreeOnClick(curNode);
}
function zTreeOnClick(treeNode){
//此处编写需要完成的业务逻辑代码
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86289.html
摘要：简介是一个依靠实现的多功能树插件。使用说明下载文件将需要使用的相关的文件分别放置到相应目录，并且保证相对路径正确。页面分别在和中引入文件，如代码所示。设置是否显示节点的图标。 简介 zTree 是一个依靠 jQuery 实现的多功能 树插件。 网址：http://www.ztree.me/v3/main.p... 上面的网址里有ztree的详细介绍、Demo 演示、API 文档、入门指...
摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...
摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...
摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...
阅读 2342·2019-08-30 15:44
阅读 1263·2019-08-30 13:01
阅读 3310·2019-08-30 11:22
阅读 3095·2019-08-29 15:23
阅读 1616·2019-08-29 12:22
阅读 3369·2019-08-26 13:58
阅读 3442·2019-08-26 12:17
阅读 3480·2019-08-26 12:16
