本文共 7383 字,大约阅读时间需要 24 分钟。
1 核心文件 核心文件: 核心包 ( jquery.ztree.core-3.x.js ) 两个扩展包: 复选框功能包 ( jquery.ztree.excheck-3.x.js ) 编辑功能包 ( jquery.ztree.exedit-3.x.js ) 合并包= 核心包 + 两个扩展包(jquery.ztree.all-3.x.js) 使用 zTree v3.x 时,核心包必须加载,扩展包根据需要进行加载;这种结构有利于今后不断开发 zTree 的各种辅助功能或工具,而不影响基本功能。
2 css文件 zTree v3.x 只使用一个 zTreeStyle.css 文件,为了尽量避免样式冲突,将 zTree 容器的 className 设置为 'ztree' v3.x 中对于主要 DOM ( li、ul、+/-图标、a ) 的 className 增加了 level 输出,可以针对不同等级的节点设定独立的样式
3 img 图片 zTree v3.x 将主要图标都合并为一个图片,利用图片切割方式显示图标
4 zTree 数据 参考API treeNode对象的定义;
5 编写html页面 1) "<!DOCTYPE html>" 是必需的! 2) zTree 的容器 className 别忘了设置为 "ztree" 3) 入门成功后,就可以按照顺序去看 Demo 了,直接看看源码,应该能看懂的 示例如下: <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="demoStyle/demo.css" type="text/css"> <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.core-3.x.js"></script> <SCRIPT LANGUAGE="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> </HEAD> <BODY> <div> <ul id="treeDemo" class="ztree"></ul> </div> </BODY> </HTML>
6 zTree 对 jQuery 的版本有要求吗? 基本来说没有要求,zTree 在开发中使用 jQuery 1.4.4;目前简单测试过 jQuery 1.3 ~ 1.6.1 应该都能正常使用,如果发现和 jQuery 的兼容问题,还请及时 Email: 通知我。
如果希望有更好的动画效果,更高的运行效率,可以选择 jQuery 1.6.x;如果希望能有减少 js 代码,使用基本功能,那么可以选择 mini 版较低版本的jQuery,大家就各取所需吧。
zTree 中提供的是未经压缩的 jQuery 1.4.4,主要是开发时便于调试。 * 如需自行下载 jQuery,请访问:
7 css 样式异常怎么办? 产生样式冲突的可能性很多,在这次 v3.0 的制作过程中,又更加深入了这方面的了解,大概总结如下: 1、异常原因: 页面上自定义的 css 与 zTree 的 css 产生冲突 页面上使用其他插件的 css 与 zTree 的 css 产生冲突 修改 zTree 的 css 错误影响了 zTree 2、解决方案: 由于 css 冲突的可能性太多,与其说是解决方案,不如说是处理建议。 A、避免针对 id 进行样式设定,尽量采用 class 设置。 因为针对 id 设定的样式等级太高,zTree 的样式肯定会被覆盖。 B、zTree 默认的样式不可能将全部 css 定义都重新设置一遍,所以难免有遗漏,如果被遗漏的样式影响了效果,那么请在 zTreeStyle 内增加上对应的设置内容,而且一旦出现这种情况,也希望你能通知我,谢谢。 C、如果以上都不能解决,那么再看看是否有命名规则冲突,导致了样式冲突 D、最后再看看是否自己修改的 zTree 样式出现了错误 E、以上答案均无效,那么就请与我联系吧。
8 对象结构
将以下源码转化为类图如下:
// 1 原型$.fn.zTree $.fn.zTree = { consts // 常量对象; _z // zTree v3.x 内部的全部方法都可以通过 $.fn.zTree._z对象进行调用 getZTreeObj(treeId) // 根据treeId获取zTreeObj destroy(treeId) // 根据treeId销毁tree init: function(obj, zSetting, zNodes) { // 初始化方法,返回zTreeObj对象; ... var zTreeTools = { // 参考API的zTreeObj对象说明,是指API的zTreeObj对象; setting : setting, // zTree 对象使用的 setting 配置数据,详细请参考 “setting 配置详解”中的各个属性详细说明 addNodes : function(parentNode, newNodes, isSilent) { // 添加节点。 ... }, cancelSelectedNode : function(node) { // 取消节点的选中状态。 view.cancelPreSelectedNode(setting, node); }, destroy : function() { // 1、用此方法可以销毁 zTreeObj 代表的 zTree。 // 2、销毁当前页面全部的 zTree,也可以使用 $.fn.zTree.destroy() 方法。 // 3、重新使用已经被销毁的树,必须要使用 init 方法进行初始化。 view.destroy(setting); }, expandAll : function(expandFlag) { // 展开 / 折叠 全部节点 expandFlag = !!expandFlag; view.expandCollapseSonNode(setting, null, expandFlag, true); return expandFlag; }, expandNode : function(node, expandFlag, sonSign, focus, callbackFlag) { // 展开 / 折叠 指定的节点 ... }, getNodes : function() { // 获取 zTree 的全部节点数据 return data.getNodes(setting); }, getNodeByParam : function(key, value, parentNode) { // 根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象集合 if (!key) return null; return data.getNodeByParam(setting, parentNode?parentNode[setting.data.key.children]:data.getNodes(setting), key, value); }, getNodeByTId : function(tId) { // 根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象 return data.getNodeCache(setting, tId); }, getNodesByParam : function(key, value, parentNode) { // 根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象集合 if (!key) return null; return data.getNodesByParam(setting, parentNode?parentNode[setting.data.key.children]:data.getNodes(setting), key, value); }, getNodesByParamFuzzy : function(key, value, parentNode) { // 根据节点数据的属性搜索,获取条件模糊匹配的节点数据 JSON 对象集合 if (!key) return null; return data.getNodesByParamFuzzy(setting, parentNode?parentNode[setting.data.key.children]:data.getNodes(setting), key, value); }, getNodesByFilter: function(filter, isSingle, parentNode, invokeParam) { // 根据自定义规则搜索节点数据 JSON 对象集合 或 单个节点数据 isSingle = !!isSingle; if (!filter || (typeof filter != "function")) return (isSingle ? null : []); return data.getNodesByFilter(setting, parentNode?parentNode[setting.data.key.children]:data.getNodes(setting), filter, isSingle, invokeParam); }, getNodeIndex : function(node) { // 获取某节点在同级节点中的序号(从0开始) if (!node) return null; var childKey = setting.data.key.children, parentNode = (node.parentTId) ? node.getParentNode() : data.getRoot(setting); for (var i=0, l = parentNode[childKey].length; i < l; i++) { if (parentNode[childKey][i] == node) return i; } return -1; }, getSelectedNodes : function() { // 获取 zTree 当前被选中的节点数据集合 var r = [], list = data.getRoot(setting).curSelectedList; for (var i=0, l=list.length; i<l; i++) { r.push(list[i]); } return r; }, isSelectedNode : function(node) { // 是否选中的节点 return data.isSelectedNode(setting, node); }, reAsyncChildNodes : function(parentNode, reloadType, isSilent) { // 强行异步加载父节点的子节点。[setting.async.enable = true 时有效]已经加载过的父节点可反复使用此方法重新加载。请通过 zTree 对象执行此方法。 ... }, refresh : function() { // 刷新 zTree ... }, removeChildNodes : function(node) { // 清空某父节点的子节点。 ... }, removeNode : function(node, callbackFlag) { // 删除节点。 ... }, selectNode : function(node, addFlag) { // 选中指定节点 ... }, transformTozTreeNodes : function(simpleNodes) { // 将简单 Array 格式数据转换为 zTree 使用的标准 JSON 嵌套数据格式。 return data.transformTozTreeFormat(setting, simpleNodes); }, transformToArray : function(nodes) { // 将 zTree 使用的标准 JSON 嵌套格式的数据转换为简单 Array 格式。(免去用户自行编写递归遍历全部节点的麻烦) return data.transformToArrayFormat(setting, nodes); }, updateNode : function(node, checkTypeFlag) { // 更新某节点数据,主要用于该节点显示属性的更新。 ... } } root.treeTools = zTreeTools; data.setZTreeTools(setting, zTreeTools);
if (root[childKey] && root[childKey].length > 0) { view.createNodes(setting, 0, root[childKey]); } else if (setting.async.enable && setting.async.url && setting.async.url !== '') { view.asyncNode(setting); } return zTreeTools; } };
// 2 配置对象setting _setting = { // 默认的setting treeId: "", // zTree 的唯一标识,初始化后,等于 用户定义的 zTree 容器的 id 属性值。 treeObj: null, // zTree 容器的 jQuery 对象,主要功能:便于操作。 view: { // 显示设置 addDiyDom: null, autoCancelSelected: true, dblClickExpand: true, expandSpeed: "fast", fontCss: {}, nameIsHTML: false, selectedMulti: true, showIcon: true, showLine: true, showTitle: true, txtSelectedEnable: false }, data: { // 配置设置 key: { children: "children", name: "name", title: "", url: "url" }, simpleData: { enable: false, idKey: "id", pIdKey: "pId", rootPId: null }, keep: { parent: false, leaf: false } }, async: { // 异步加载配置 enable: false, contentType: "application/x-www-form-urlencoded", type: "post", dataType: "text", url: "", autoParam: [], otherParam: [], dataFilter: null }, callback: { // 回调配置 beforeAsync:null, beforeClick:null, beforeDblClick:null, beforeRightClick:null, beforeMouseDown:null, beforeMouseUp:null, beforeExpand:null, beforeCollapse:null, beforeRemove:null, onAsyncError:null, onAsyncSuccess:null, onNodeCreated:null, onClick:null, onDblClick:null, onRightClick:null, onMouseDown:null, onMouseUp:null, onExpand:null, onCollapse:null, onRemove:null }
转载地址:http://iupwn.baihongyu.com/