文档章节

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

zTree
 zTree
发布于 2012/06/29 15:53
字数 961
阅读 1984
收藏 18


    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 中将发布的几个新的扩展库....

© 著作权归作者所有

共有 人打赏支持
zTree

zTree

粉丝 831
博文 21
码字总数 21754
作品 1
朝阳
技术主管
私信 提问
加载中

评论(18)

cwsone
cwsone

引用来自“zTree”的评论

引用来自“senge”的评论

上面的代码,真心没有看懂

这仅仅是针对 zTree v3 版本的扩展方式,如果你不了解 zTree 那么看不懂没什么的。 如果你研究了 zTree 的源码以及结构以后,还是感觉看不懂,那么不排除是我写的内容有问题,请告诉我。

其实Ztree我从2.3的时候就开始在项目中使用,只是从来没有学习过源码,如时间充许,还请指教哦!
zTree
zTree

引用来自“senge”的评论

上面的代码,真心没有看懂

这仅仅是针对 zTree v3 版本的扩展方式,如果你不了解 zTree 那么看不懂没什么的。 如果你研究了 zTree 的源码以及结构以后,还是感觉看不懂,那么不排除是我写的内容有问题,请告诉我。
cwsone
cwsone
上面的代码,真心没有看懂
Overlord
Overlord
终于做了这个教程了,以前也参照了做过,3.1升级到3.2后又大改了一次
夜聆风
夜聆风
像楼主学习 :)
DSP-Eye
DSP-Eye

引用来自“zTree”的评论

呵呵,怎么忽然就这么多人来看文章了...感谢各位!正在努力中!

Ztree项目做得很好,很喜欢,支持
南北024
南北024
zTree在我们业务线得到大力推广,支持一下
冷血
冷血
zTree确实是不错的。虽然我们系统中还没使用,但是还是很看好的。
zTree
zTree
呵呵,怎么忽然就这么多人来看文章了...感谢各位!正在努力中!
winfang
winfang
顶啊,这东西虽然还没用过,看起来就不错
【开源访谈】zTree 作者张其纲访谈实录

关于开源访谈 开源访谈是开源中国推出的一系列针对国内优秀开源软件作者的访谈,以文字的方式记录并传播。我们希望开源访谈能全面的展现国内开源软件、开源软件作者的现状,着实推动国内开源...

虫虫
2012/07/31
12.1K
56
ztree根据ID自动展开到指定节点。

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String type= request.getParameter("type"); %> 以......

小乞丐
2013/06/06
16.8K
9
Sitemesh与Jquery冲突,求解

项目中用了SiteMesh,后来需要用到ZTree,请看demo ZTree Demo $(document).ready没反应,请高手帮忙

john_sz
2013/12/30
102
1
JQuery Tree插件——zTree v3.0 beta 发布

终于可以将 zTree v3.0 beta 发布出来了,在这里首先感谢大家对 zTree 的支持。 这次 zTree v3.0 改动相当的大,包括:js 的代码架构;包括 css 调整;当然还有采用了延迟加载技术后,对性能...

zTree
2011/09/05
2.1K
20
Jquery结合Ztree生成树

Ztree的api http://www.ztree.me/v3/api.php Ztree的网上demo http://www.ztree.me/v3/demo.php#102 Ztree的本地demo http://yunpan.cn/cLUREC8yghHRs 访问密码 9440 1、添加样式、js <link ......

CurtainRight
2015/11/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 自定义你的空间

通过对你的空间进行界面的自定义能够让你的空间更加出类拔萃。 如果你具有空间管理员权限,你可以修改你空间的颜色配色,添加你自己的空间标识,选择是否在你空间中显示边栏。或者你可以进入...

honeymose
今天
1
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
5
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部