简述如何制作 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  

支持了 树哥