`
zTreeAPI
  • 浏览: 345645 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

简述如何制作 zTree v3.x 系列的扩展 js 库

阅读更多

 

    zTree v3.x 版本修改了结构,将原先混在一起的代码进行了拆分,调整了内部结构。目前的结构可以比较方便灵活的用插件形式覆盖核心代码或开发自己的新功能,而又不用去特意修改核心代码,也便于以后的 zTree 代码升级。


    因为这两天准备要开始进行 zTree v3.3 中扩展功能的开发,故趁机简单介绍一下如何制作 zTree v3.x 的扩展 js 库。


    为了便于浏览,我利用 jquery.ztree.excheck-3.2.js 的代码结构来讲解。

 

一、扩展库代码最外层结构

 

 

//利用匿名函数 将作用域保护起来
//注意:一定要先加载 jQuery 以及 zTree 的js,最后加载 扩展库。 如果放在一个文件中,也要将 扩展库的代码放在最后
(function($){
   // 在这里面进行全部的操作
   .....
})(jQuery);

 

二、扩展库内部结构

 

    下面的结构可以直接对照 excheck 和 exedit 两个js 来比较,就可以快速了解代码结构,从而开发出自己需要的扩展库了。 另外,对于不需要的功能,完全可以进行相应的删除,避免多余代码。

 

 

(function($){

	//default consts of exLib
	//这里保存 zTree 内部需要的常量
	var _consts = {},

	//default setting of exLib
	//这里保存 zTree 需要的配置信息(完全可以利用这个为自己的项目制作 zTree 的公共默认配置,减少页面代码)
	_setting = {},

	//default root of exLib
	//设置 zTree 内部基本属性(初始化时执行)
	_initRoot = function (setting) {},

	//default cache of exLib
	//设置 zTree 内部的缓存初始化(初始化时执行)
	_initCache = function(treeId) {},

	//default bind event of exLib
	//设置 zTree 内部事件回调函数(初始化时执行)  例如:onCheck等
	_bindEvent = function(setting) {},

	//default event proxy of exLib
	//设置 zTree 事件代理中的处理逻辑,根据不同事件跳转到不同的 handler 处理 ( *** 参考 excheck 代码,如果使用必须 return proxyResult  *** )
	_eventProxy = function(e) { ...  return proxyResult;},

	//default init node of exLib
	//设置 节点数据初始化的处理(加载节点时执行)
	_initNode = function(setting, level, n, parentNode, isFirstNode, isLastNode, openFlag) {},

	//add dom for check
	//专门用于在节点<a>之前生成 DOM 使用,主要用于 checkbox & radio
	_beforeA = function(setting, node, html) {},

	//update zTreeObj, add method of exLib
	//设置 zTreeObj 的各种对外方法,可以制作新的接口也可以覆盖已有接口
	_zTreeTools = function(setting, zTreeTools) {
//		zTreeTools.xxx1 = function() {}
//		zTreeTools.xxx2 = function() {}
	},

	//method of operate data
	//定义 zTree 节点数据操作的方法
	_data = {},

	//method of event proxy
	//定义 zTree 各种事件绑定 & Proxy 的方法
	_event = {},
	
	//method of event handler
	//定义 zTree 事件处理的方法
	_handler = {},
	
	//method of tools for zTree
	//定义 zTree 内部的工具方法
	_tools = {},
	
	//method of operate ztree dom
	//定义 zTree 视图相关的方法
	_view = {},

	//将本扩展库内的方法、属性注入到 core 中
	_z = {
		tools: _tools,
		view: _view,
		event: _event,
		data: _data
	};
	$.extend(true, $.fn.zTree.consts, _consts);
	$.extend(true, $.fn.zTree._z, _z);

	//获取几个主要的全局对象
	var zt = $.fn.zTree,
	tools = zt._z.tools,
	consts = zt.consts,
	view = zt._z.view,
	data = zt._z.data,
	event = zt._z.event;

	//针对 zTree 初始化进行注入新内容
	
	//合并 配置 setting
	data.exSetting(_setting);

	//添加 绑定事件处理
	data.addInitBind(_bindEvent);
	//添加 初始化 Cache 方法
	data.addInitCache(_initCache);
	//添加 初始化 节点数据 方法
	data.addInitNode(_initNode);
	//添加 初始化 事件代理 方法
	data.addInitProxy(_eventProxy);
	//添加 初始化 zTree 内部基本属性 方法
	data.addInitRoot(_initRoot);
	//添加 初始化节点 <A> 之前的DOM 方法
	data.addBeforeA(_beforeA);
	//添加 zTreeObj 对象的对外接口
	data.addZTreeTools(_zTreeTools);

	//对原始内部方法进行功能扩展,但不完全覆盖
//	Override method in core
	
	//这段代码是从 excheck 中直接提取出来的,供参考
//	var _createNodes = view.createNodes;
//	view.createNodes = function(setting, level, nodes, parentNode) {
//		if (_createNodes) _createNodes.apply(view, arguments);
//		if (!nodes) return;
//		view.repairParentChkClassWithSelf(setting, parentNode);
//	}
	
})(jQuery);
 

补充,敬请恭候 v3.3 中将发布的几个新的扩展库....

分享到:
评论
15 楼 liuweihug 2014-06-26  
Ztree教程-asp.net下代码部署及服务端获取数据的例子 - 项目实战 - IT工作生活这点事。Just Such So!
http://www.suchso.com/projecteactual/ztree-jiaocheng-aspnet-demo-ashx.html
14 楼 zTreeAPI 2012-07-09  
ilovejsj 写道
希望针对setting.check.chkStyle=="radio"&&setting.check.radioType=="all"的情况对getTreeCheckedNodes方法做下优化,找到第一个就break

恩,这个有道理呀,马上就去修改
13 楼 ilovejsj 2012-07-09  
希望针对setting.check.chkStyle=="radio"&&setting.check.radioType=="all"的情况对getTreeCheckedNodes方法做下优化,找到第一个就break
12 楼 ilovejsj 2012-07-09  
zTreeAPI 写道
ilovejsj 写道
zTreeAPI 写道
ilovejsj 写道
嗯,明白了,那几个参数我改改tree源代码就可以了。还有个就是拖拽时如果页面有iframe时会加上个div,不过这个层背景是yellow,我想大部份情况还是不希望影响原来的显示。希望默认是transparent或者可以有个地方设置。

你这个情况估计是 有css 干扰导致的,请你检查一下 css吧

jquery.ztree.all-3.2.js第2951行
dragMask = $("<div id='zTreeMask_" + i + "' class='zTreeMask' style='background-color:yellow;opacity: 0.3;filter: alpha(opacity=30);    top:" + r[1] + "px; left:" + r[0] + "px; width:" + obj.offsetWidth + "px; height:" + obj.offsetHeight + "px;'></div>");
建议dragMask = $("<div id='zTreeMask_" + i + "' class='zTreeMask' style='background-color:transparent;......

  OMG!!!! 不好意思,这肯定是当初调试代码后没有及时删除导致的!!!非常感谢你的热心!! 请把 代码中 background-color:yellow;opacity: 0.3;filter: alpha(opacity=30);     这一部分全部删掉吧,因为在 zTreeStyle.css 中有专门针对 zTreeMask 的样式设定

ok,删了
11 楼 zTreeAPI 2012-07-09  
ilovejsj 写道
zTreeAPI 写道
ilovejsj 写道
嗯,明白了,那几个参数我改改tree源代码就可以了。还有个就是拖拽时如果页面有iframe时会加上个div,不过这个层背景是yellow,我想大部份情况还是不希望影响原来的显示。希望默认是transparent或者可以有个地方设置。

你这个情况估计是 有css 干扰导致的,请你检查一下 css吧

jquery.ztree.all-3.2.js第2951行
dragMask = $("<div id='zTreeMask_" + i + "' class='zTreeMask' style='background-color:yellow;opacity: 0.3;filter: alpha(opacity=30);    top:" + r[1] + "px; left:" + r[0] + "px; width:" + obj.offsetWidth + "px; height:" + obj.offsetHeight + "px;'></div>");
建议dragMask = $("<div id='zTreeMask_" + i + "' class='zTreeMask' style='background-color:transparent;......

  OMG!!!! 不好意思,这肯定是当初调试代码后没有及时删除导致的!!!非常感谢你的热心!! 请把 代码中 background-color:yellow;opacity: 0.3;filter: alpha(opacity=30);     这一部分全部删掉吧,因为在 zTreeStyle.css 中有专门针对 zTreeMask 的样式设定
10 楼 ilovejsj 2012-07-08  
zTreeAPI 写道
ilovejsj 写道
嗯,明白了,那几个参数我改改tree源代码就可以了。还有个就是拖拽时如果页面有iframe时会加上个div,不过这个层背景是yellow,我想大部份情况还是不希望影响原来的显示。希望默认是transparent或者可以有个地方设置。

你这个情况估计是 有css 干扰导致的,请你检查一下 css吧

jquery.ztree.all-3.2.js第2951行
dragMask = $("<div id='zTreeMask_" + i + "' class='zTreeMask' style='background-color:yellow;opacity: 0.3;filter: alpha(opacity=30);    top:" + r[1] + "px; left:" + r[0] + "px; width:" + obj.offsetWidth + "px; height:" + obj.offsetHeight + "px;'></div>");
建议dragMask = $("<div id='zTreeMask_" + i + "' class='zTreeMask' style='background-color:transparent;......
9 楼 zTreeAPI 2012-07-08  
ilovejsj 写道
嗯,明白了,那几个参数我改改tree源代码就可以了。还有个就是拖拽时如果页面有iframe时会加上个div,不过这个层背景是yellow,我想大部份情况还是不希望影响原来的显示。希望默认是transparent或者可以有个地方设置。

你这个情况估计是 有css 干扰导致的,请你检查一下 css吧
8 楼 ilovejsj 2012-07-08  
嗯,明白了,那几个参数我改改tree源代码就可以了。还有个就是拖拽时如果页面有iframe时会加上个div,不过这个层背景是yellow,我想大部份情况还是不希望影响原来的显示。希望默认是transparent或者可以有个地方设置。
7 楼 zTreeAPI 2012-07-08  
ilovejsj 写道
ilovejsj 写道
关于拖拽的那几个回调函数beforeDrag,beforeDragOpen,beforeDrop的传参,只有拖拽树treeid,没有目标树id,如果两棵树拖拽我还可以自己判断出来,多于两个就没法了,希望增加目标树id的参数。

还有onDrag,onDrop

beforeDrag、onDrag 中的 treeId 是 被拖拽的节点所在的树 id
beforeDragOpen、beforeDrop、onDrop 的treeId 是 节点被拖拽到目标树Id

这里面最大的问题是当初为了保证以前用户的升级,所以一直没有进行大的调整。 请见谅。预计到 v4.0的时候会对所有的参数进行更合理的调整。
6 楼 ilovejsj 2012-07-07  
ilovejsj 写道
关于拖拽的那几个回调函数beforeDrag,beforeDragOpen,beforeDrop的传参,只有拖拽树treeid,没有目标树id,如果两棵树拖拽我还可以自己判断出来,多于两个就没法了,希望增加目标树id的参数。

还有onDrag,onDrop
5 楼 ilovejsj 2012-07-07  
关于拖拽的那几个回调函数beforeDrag,beforeDragOpen,beforeDrop的传参,只有拖拽树treeid,没有目标树id,如果两棵树拖拽我还可以自己判断出来,多于两个就没法了,希望增加目标树id的参数。
4 楼 soubit 2012-07-04  
好的,谢谢,试试
3 楼 zTreeAPI 2012-07-04  
soubit 写道
请问是否支持jquery 1.4 以上的版本!

当然要支持了,如果你发现有不支持的请及时告诉我!

因为 zTree 仅仅使用 jQuery 的标准方法,并没有使用什么特殊功能。
2 楼 soubit 2012-07-03  
请问是否支持jquery 1.4 以上的版本!
1 楼 只是坎坷 2012-06-29  
支持了 树哥

相关推荐

    jquery.zTree.js.rar

    1.4.4.js jquery.ztree.exhide.js jquery.ztree.exedit.js jquery.ztree.excheck.js jquery.ztree.core.js jquery.ztree.all.js

    ZTree v3.x (JQuery Tree插件)

    1. **基本使用**:ZTree的使用首先需要引入jQuery库和zTree的CSS、JS文件。然后通过HTML元素(通常是`&lt;ul&gt;`和`&lt;li&gt;`)创建树的基础结构,并使用JSON数据格式定义节点信息。这些信息包括节点ID、父ID、文本、图标等。...

    ZTree v3.x (JQuery Tree插件) (API+Demo)

    v3.x版本是其最新迭代,提供了丰富的功能和优化的性能,适用于各种需要展示层级关系的场景,如文件目录、组织架构、权限管理等。 ZTree的核心特性包括: 1. **动态加载**:ZTree支持按需加载子节点,减轻了初次...

    jquery.ztree.exhide.js

    ztree实现模糊查询需要的依赖包:jquery.ztree.exhide.js

    zTree3.x.rar

    zTree3.x.rar zTree3.x.rar zTree3.x.rar zTree3.x.rar zTree3.x.rar zTree3.x.rar zTree3.x.rar zTree3.x.rar

    zTree-V3.rar

    在"zTree-V3"版本中,zTree不仅优化了性能,还增加了更多的配置选项和扩展功能,以满足开发者多样化的开发需求。 1. **数据处理**:zTree 支持动态加载数据,可以按需加载子节点,避免一次性加载大量数据导致页面...

    jquery.ztree

    ztree demo jquery.ztree,jquery.ztree.core.js,jquery.ztree.core-3.5.min.js,jquery.ztree.excheck-3.5.min.js,jquery.ztree.all.min.js,jquery.ztree.exedit.js,jquery.ztree.exhide.min.js,jquery-1.4.4.min...

    jquery.ztree.all.js

    用于生成树形组件,javaScript的一个插件,用于使用树形的下拉组件!

    zTreeStyle.css

    .ztree li span.button.chk.checkbox_false_full { background-position: -5px -5px; } .ztree li span.button.chk.checkbox_false_full_focus { background-position: -5px -26px; } .ztree li span.button.chk...

    jquery.ztree.excheck.js

    是一个js,ztree实现权限管理所需的,可自行去ztree官网下载

    zTree_v3.zip

    1. **核心JS文件**:zTree的核心功能主要由几个JavaScript文件实现,如`jquery.ztree.core.js`、`jquery.ztree.excheck.js`、`jquery.ztree.exedit.js`等。`core.js`提供了基础的树形结构处理,而`excheck.js`和`...

    jquery.ztree.core.js

    是一个js文件,zTree实现权限分配所需,可去ztree官网自行下载

    jQuery zTree 3.5.22

    使用zTree时,首先需要引入jQuery和zTree的CSS及JS文件,然后设置JSON格式的数据,最后调用zTree的初始化方法。例如: ```html &lt;link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet"&gt; &lt;script src="js/...

    jquery.ztree.core.texttree.js

    ztree添加功能,使其支持字体图标,核心文件jquery.ztree.core.js,欢迎下载。

    使用ztree构建树形菜单,需要引入的js及样式文件

    2. `jquery.ztree.excheck.js` 或 `jquery.ztree.exedit.js`:这两个文件是ZTree的扩展功能库,分别提供了复选框和编辑功能。如果你的树形菜单需要支持节点的多选或者编辑节点信息,那么需要引入这两个文件中的一个...

    zTree-zTree_v3.zip

    《zTree:一款强大的JavaScript树形菜单库》 zTree是一款功能强大且广泛应用的JavaScript库,主要用于构建树形菜单和数据展示。它以其高效的性能、丰富的功能和灵活的配置选项,深受开发者的喜爱。在“zTree_v3.zip...

    ZTree.js.rar

    ZTree.js就是这样一款专门用于Web端实现树形结构的JavaScript库,它提供了丰富的功能,包括节点的增删改查、复选框的选择和父子节点联动等。本文将深入解析ZTree.js的核心特性及其使用方法。 一、ZTree.js简介 ...

    zTree_v3.rar zTree_v3.rar ztree-demo演示压缩包

    zTree是一款广泛应用于Web开发中的JavaScript树形插件,它具有丰富的功能和良好的可扩展性。这个名为"zTree_v3.rar"的压缩包包含了zTree的v3版本,是zTree的一个演示示例集合,旨在帮助开发者快速理解和应用zTree的...

Global site tag (gtag.js) - Google Analytics