- 浏览: 345147 次
- 性别:
- 来自: 北京
最新评论
-
javabro:
求告知,ztree中自己在点onclick () 通过获取tI ...
本人从今以后不再维护这里的博客, 只在 开源中国 进行发布 -
sinoyang:
使用的时候发现与bootstrap冲突了,蛋疼死了,改哪个都不 ...
JQuery Tree插件——zTree v3.5.16 版 发布 -
clear_yang:
jquery.ztree.excheck.min.js:15 ...
JQuery Tree插件——zTree v3.5.02 版 发布 -
路人NFTS:
请教个问题,ztree 支持异步加载的扩展么? 因为跨域,IE ...
JQuery Tree插件——zTree v3.5.16 版 发布 -
kainever7:
页面初始化时,通过<iframe src=". ...
JQuery Tree插件——zTree v3.5.16 版 发布
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
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 Tree插件——zTree v3.5.16 版 发布
2014-03-09 20:09 33115zTree v3.5.16 发布,继续缓慢的修正 bug ... -
JQuery Tree插件——zTree v3.5.15 版 发布
2013-10-21 09:30 14107zTree v3.5.15 发布,继续 ... -
JQuery Tree插件——zTree v3.5.14 版 发布
2013-06-29 00:36 7033在 v3.5.13 中由于个人疏漏,产生了一个比较严重 ... -
JQuery Tree插件——zTree v3.5.13 版 发布
2013-06-02 21:43 6643近期由于工作繁忙,所以一直没有发布 v3.5.13 ... -
JQuery Tree插件——zTree v3.5.12 版 发布
2013-03-11 11:13 13229为了学习如何在 jQuery Plugin 发布,反 ... -
JQuery Tree插件——zTree v3.5.02 版 发布
2013-01-28 10:34 10483首先要告诉大家,在 jQuery 发布了插件注册功能 ... -
zTree v3.5 Css 详解
2012-12-24 09:37 17982zTree 的 css 文件 ... -
JQuery Tree插件——zTree v3.5.01 版 发布
2012-12-21 10:37 3755赶着天黑前,赶紧发布 v3.5 的补丁,修正目前 ... -
JQuery Tree插件——zTree v3.5 正式版 发布
2012-11-20 09:50 13930由于国庆之后一直忙于公司的项目,因此将 zTre ... -
JQuery Tree插件——zTree v3.4 正式版 发布
2012-09-03 10:55 7488这次 v3.4 主要还是修改一些细节 bug, ... -
JQuery Tree插件——zTree v3.3 正式版 发布
2012-07-16 12:54 8720这次 zTree v3.3 继续 ... -
JS 代码调试经验总结(菜鸟必读)
2012-06-12 18:03 19934前言:不知不觉写了很多,希望你能耐心看完这篇文章 ... -
启用新域名—— zTree.me
2012-05-24 14:11 2116折腾一上午,终于启用 新域名 zTree.me 欢迎各 ... -
JQuery Tree插件——zTree v3.2 正式版 发布
2012-05-14 13:53 6910因最近本人工作较忙,所以 v3.2 拖了很久,还 ... -
JQuery Tree插件——zTree v3.1 正式版 发布
2012-02-14 10:22 16916选在情人节发布 zTree v3.1,希望 zT ... -
CSS Sprites 使用注意之—— 避免因浏览器放大导致的图片异常
2012-02-02 14:34 2716近日有朋友说,将浏览器放大后,会发现 zTree 出现 ... -
IE 下 css 设置透明度造成 input 内光标异常的问题
2012-02-01 14:01 4098zTree v3.0 正式版发 ... -
zTree v2.x 升级 v3.0 之 异步加载 与 添加节点的错误分析
2012-01-13 16:34 4451(补充: 计划 v3.1 中修改进行异步加载的逻辑 ... -
JQuery Tree插件——zTree v3.0 正式版 发布
2012-01-10 09:39 6367在大家的帮助 和 关注下,今天 zTree v3 ... -
国庆前,zTree 开发推迟
2011-09-19 09:20 2620大家好,由于本人工作原因,国庆前会相当忙,因此 zTr ...
相关推荐
1.4.4.js jquery.ztree.exhide.js jquery.ztree.exedit.js jquery.ztree.excheck.js jquery.ztree.core.js jquery.ztree.all.js
1. **基本使用**:ZTree的使用首先需要引入jQuery库和zTree的CSS、JS文件。然后通过HTML元素(通常是`<ul>`和`<li>`)创建树的基础结构,并使用JSON数据格式定义节点信息。这些信息包括节点ID、父ID、文本、图标等。...
v3.x版本是其最新迭代,提供了丰富的功能和优化的性能,适用于各种需要展示层级关系的场景,如文件目录、组织架构、权限管理等。 ZTree的核心特性包括: 1. **动态加载**:ZTree支持按需加载子节点,减轻了初次...
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
在"zTree-V3"版本中,zTree不仅优化了性能,还增加了更多的配置选项和扩展功能,以满足开发者多样化的开发需求。 1. **数据处理**: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...
用于生成树形组件,javaScript的一个插件,用于使用树形的下拉组件!
.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...
1. **核心JS文件**:zTree的核心功能主要由几个JavaScript文件实现,如`jquery.ztree.core.js`、`jquery.ztree.excheck.js`、`jquery.ztree.exedit.js`等。`core.js`提供了基础的树形结构处理,而`excheck.js`和`...
是一个js,ztree实现权限管理所需的,可自行去ztree官网下载
使用zTree时,首先需要引入jQuery和zTree的CSS及JS文件,然后设置JSON格式的数据,最后调用zTree的初始化方法。例如: ```html <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet"> <script src="js/...
是一个js文件,zTree实现权限分配所需,可去ztree官网自行下载
ztree添加功能,使其支持字体图标,核心文件jquery.ztree.core.js,欢迎下载。
2. `jquery.ztree.excheck.js` 或 `jquery.ztree.exedit.js`:这两个文件是ZTree的扩展功能库,分别提供了复选框和编辑功能。如果你的树形菜单需要支持节点的多选或者编辑节点信息,那么需要引入这两个文件中的一个...
《zTree:一款强大的JavaScript树形菜单库》 zTree是一款功能强大且广泛应用的JavaScript库,主要用于构建树形菜单和数据展示。它以其高效的性能、丰富的功能和灵活的配置选项,深受开发者的喜爱。在“zTree_v3.zip...
本想0分分享的,但是下拉选项中最少是1分,没办法
ZTree.js就是这样一款专门用于Web端实现树形结构的JavaScript库,它提供了丰富的功能,包括节点的增删改查、复选框的选择和父子节点联动等。本文将深入解析ZTree.js的核心特性及其使用方法。 一、ZTree.js简介 ...