树状插件 Jquery-zTree的基本用法

最新推荐文章于 2024-03-09 21:49:48 发布

jazwoo

最新推荐文章于 2024-03-09 21:49:48 发布

阅读量6.8k

点赞数

分类专栏： js/ajax

js/ajax 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

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: hunter.z@263.net 通知我。

如果希望有更好的动画效果，更高的运行效率，可以选择 jQuery 1.6.x；如果希望能有减少 js 代码，使用基本功能，那么可以选择 mini 版较低版本的jQuery，大家就各取所需吧。

zTree 中提供的是未经压缩的 jQuery 1.4.4，主要是开发时便于调试。
* 如需自行下载 jQuery，请访问：http://docs.jquery.com/Downloading_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
}
}

详细API参考文档：http://www.ztree.me/v3/api.php

jazwoo

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
树状插件 Jquery-zTree的基本用法

【简介】zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件兼容 IE、FireFox、Chrome 等浏览器在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一次性静态生成和 Ajax 异步加载两种方式支持多种事件响应及反馈支持 Tree 的节点移动、编辑、删除支持任意更换皮肤 /
复制链接

扫一扫