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

jQueryTree -- 基于jQuery的面向对象的树

jQueryChromeCSSJavaScriptASP.net 
阅读更多
1.使用jquery，但没有遵循jquery编码风格，因为面向对象更易于维护，可扩展性更强。
2.节点DOM延迟生成。
3.可以通过节点生成前回调函数实现各种树形，满足大部分需求，只要你需要的是一个树形的展现形式。
5.节点删除，移动，添加兄弟节点/添加后代节点，均提供api，实现简单。
6.默认带有多选，单选模式，并可以组合使用。
7.打开节点可以用多种方式，甚至可以自编程。
8.已灵活性为诉求。

还有许多尚未完成的功能，因为项目中用不到，例如：异步加载.拖动排序.
希望大家多提建议!以让我改进。
DEMO和js文件均在附件中
谢谢lqixv兄，大家可以从 http://www.03soft.com/jQueryTree/ 预览效果。

分享到：
| javascript贪吃蛇
评论
20 楼 satanultra 2011-05-11  
emoshoushou 写道
如果您方便的话加一下QQ309413458，当面向您请教一下？

已经加你了~ 你可以看我的iteye博客 里边有一个新版的tree 可以支持异步加载
19 楼 emoshoushou 2011-05-11  
如果您方便的话加一下QQ309413458，当面向您请教一下？
18 楼 emoshoushou 2011-05-11  
上面的数据格式是这样的newData =[{"content":"仲磊","id":"zhonglei","deptId":575},{"content":"张彦红","id":"zhangyanhong","deptId":575},{"content":"蔡皓","id":"caihao","deptId":575}]
17 楼 emoshoushou 2011-05-11  
    问一下，当取到的节点 newData 为平级的多个时，该怎么处理，
比如newData=[{userName=仲磊, userId=zhonglei, deptId=575}, {userName=张彦红, userId=zhangyanhong, deptId=575}, {userName=蔡皓, userId=caihao, deptId=575}];
   这个该怎么加到树上，是treeEx.appendTo($("#"+id),json);么$("#"+id)取到的是要加载新节点的树节点。json为类似newData 的数据
    我出来的是只有一个节点。而且是undefined
16 楼 emoshoushou 2011-05-11  
1请问，我想在点击图标的时候，异步加载子节点，应该怎么加？
2.我在onSelect: function (node){}里加一个异步加载。比如我下边取了数据然后加载到树上，为啥 appendTo($("#"+id),json);这句在IE报错呢 
   错误消息: 缺少对象

$.ajax({
   url: "<%=path %>/deptJsonTreeAction.do? method=getDeptUsersTreeListQuery&deptId="+id,
    cache: false,
    success: function(json){
           appendTo($("#"+id),json);
           }
});
15 楼 satanultra 2011-05-06  
1,是把相应的属性改为 id和content
2，对
3，对
4，它主要是为了适应不同的json格式，如果你按照我的json结构，那基本可以不用这个东西。
5，双击确实没有！这我记下来了！嘿嘿
14 楼 emoshoushou 2011-05-06  
首先，谢谢 satanultra大哥！！！还有点问题，想问问，呵呵
   1.就是说把pretreatment: function (node){}方法里的id和content改为合适的id和name就可以了，对不对？
    2.我想加一个点击事件，是应该加在哪呢，是onSelect吗？onSelect:function(node){var source = $(node).data("source"); getDeptUsersTreeQuery(source.id,source.content);}
    3.parent: parent这是干什么的，是树在页面中的父元素，是树root节点的的DOM么。但具体是控制的，比如把parent改为别的，会出现什么效果？
     4.pretreatment是控制source中data的输入么？
     5.还有就是加一个双击事件怎么加，
大哥！麻烦那您了，小弟看您的插件，看不明白，不好意思，小弟是在太笨了，一点不会！！！！
13 楼 satanultra 2011-05-06  
emoshoushou 写道
     satanultra大哥，我看了你例子，有点不明白。小弟新手，麻烦之处，请多多见谅！
 
1.如果不是例子上的数据源，该怎么处理呢比如一个list里放了多个对象，每个对象都有id，父id，name。
2. parent:parentid 树的父节点。parentid 是对象的父id对应的key么
3.我用json  action传的数据，结果之出来树的根结点，其他的没出来是怎么回事


1,只要你给的数据源可遍历的（数组,list）就可以，唯一的麻烦可能是你对象的属性和我需要的不符合，这时候需要用到 
treeEx4 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "checkbox&single",
							pretreatment: function (node) {
								//因为这里传来的是一个数据对象引用，为了不破坏原有对象所以返回一个新对象，如果没有return，则默认用原始数据.
								return {
									id: "dataId" + node.id,	//把"id"转换为"dataId_id"
									content: "<span class='tree-content'>-- " + node.content + " --</span>",	//给内容外边加上一个span
									children: node.children
								};
							}
						});

这里的pretreatment回调函数，这个函数的作用是每次生成节点前，都会把你当初给我的数据源中对应这个节点的相应的元素传递过来，因为我生成将节点需要"id"和"content"两个属性，"content"为必须既节点显示内容.所以你要用你数据结构中的相对应于这两个属性的属性组成一个新的对象return，树自然可以生成了。
2,parent是一个dom对象，不是id，是树在页面中的父元素。
3,这个不好说，最好让我看下源代码。
12 楼 emoshoushou 2011-05-05  
     satanultra大哥，我看了你例子，有点不明白。小弟新手，麻烦之处，请多多见谅！
 
1.如果不是例子上的数据源，该怎么处理呢比如一个list里放了多个对象，每个对象都有id，父id，name。
2. parent:parentid 树的父节点。parentid 是对象的父id对应的key么
3.我用json  action传的数据，结果之出来树的根结点，其他的没出来是怎么回事
11 楼 lqixv 2011-02-16  
superobin 写道
恩，看到了，多谢楼上，看代码楼主的确下了功夫，注释和javadoc写的都不错。搞ui就是功夫活
另外问下楼上，这种空间哪儿能搞到。。。


买的，空间只需要几十元，但只能支持 asp/.net/php
10 楼 satanultra 2011-02-15  
谢谢 lqixv 兄！
9 楼 superobin 2011-02-15  
恩，看到了，多谢楼上，看代码楼主的确下了功夫，注释和javadoc写的都不错。搞ui就是功夫活
另外问下楼上，这种空间哪儿能搞到。。。
8 楼 lqixv 2011-02-15  
不错，下来看了一下，代码少而清晰！

为了方便大家看效果图，现在我把楼主的 demo 放到了这个地方，大家可以看看 demo：
http://www.03soft.com/jQueryTree/
7 楼 satanultra 2011-02-15  
superobin 写道
var oriData = [
                {myId:0,myParent:null,myTitle:'text0'},
                {myId:1,myParent:0,myTitle:'text1'},
                {myId:2,myParent:0,myTitle:'text2'},
                {myId:3,myParent:1,myTitle:'text3'},
                {myId:4,myParent:1,myTitle:'text4'},
                {myId:5,myParent:3,myTitle:'text5'},
                {myId:6,myParent:3,myTitle:'text6'},
                {myId:7,myParent:4,myTitle:'text7'}
            ];
            
            var scpt = document.createElement("script");
            scpt.onload = scpt.onreadystatechange = function() {
                if(this.readyState && this.readyState.toLowerCase() != "loaded") {
                    return;
                }
                jQuery.noConflict();
                (function($) {
                    function organizeTree(data,idKey,parentKey) {
        				var tmp = {};
        				$(data).each(function() {
        					tmp[this[idKey]]=this;
        				});
        				var root;
        				$(data).each(function () {
        					if(this.__parentNode = tmp[this[parentKey]]) {
        						(this.__parentNode.__childNodes||(this.__parentNode.__childNodes=[])).push(this);
        					} else {
        						root = this;
        					}
        				});
        				return root;
        			}
        			function createTree(data,offset,titleKey,prepend1,prepend2,prepend3) {
        				offset = offset||20;
        				titleKey = titleKey || 'title';
        				var tmp = $("<div>");
        				var children = data.__childNodes||[];
        				var text = (data[titleKey]||"").valueOf();
        				var titleLayer = $("<div>").appendTo(tmp).html(children.length?prepend1+text:prepend3+text)
        					.css("cursor","pointer").attr("isTitle","true").css("line-height","20px");
        				var subLayer = $("<div>").css("margin-left",offset+"px").appendTo(tmp);
        				$(children).each(function() {
        					createTree(this,offset,titleKey,prepend1,prepend2,prepend3).appendTo(subLayer);
        				});
        				if(children.length) {
        					titleLayer.toggle(function() {
        						titleLayer.html(prepend2+text);
        						subLayer.hide("fast");
        					},function() {
        						titleLayer.html(prepend1+text);
        						subLayer.show("fast");
        					});
        				};
        				return tmp;
        			}
        			$(function() {
        				var root = organizeTree(oriData,'myId','myParent');
        				createTree(root,20,
                            'myTitle',"<img src='http://www.destroydrop.com/javascripts/tree/example/img/folderopen.gif'/>",
                            "<img src='http://www.destroydrop.com/javascripts/tree/example/img/folder.gif'/>","<img src='http://www.destroydrop.com/javascripts/tree/example/img/page.gif'/>"
                        ).appendTo($("<div style='width:300px'></div>").appendTo(document.body));
        			});
                })(jQuery);
            }
            scpt.src="http://code.jquery.com/jquery-1.5.min.js";
            document.body.appendChild(scpt);

我贴个能立竿见影看到效果的，大家打开浏览器控制台，把上面代码贴进去执行即可（什么？没有控制台？IE8 F12,chrome ctrl+shift+j，如果还没有，那就算了）
如果chrome提示恶意网站，可能是因为图床的网站有问题，但是引用的图肯定没问题的。

还有这种方法！你真聪明！
6 楼 superobin 2011-02-15   
var oriData = [
                {myId:0,myParent:null,myTitle:'text0'},
                {myId:1,myParent:0,myTitle:'text1'},
                {myId:2,myParent:0,myTitle:'text2'},
                {myId:3,myParent:1,myTitle:'text3'},
                {myId:4,myParent:1,myTitle:'text4'},
                {myId:5,myParent:3,myTitle:'text5'},
                {myId:6,myParent:3,myTitle:'text6'},
                {myId:7,myParent:4,myTitle:'text7'}
            ];
            
            var scpt = document.createElement("script");
            scpt.onload = scpt.onreadystatechange = function() {
                if(this.readyState && this.readyState.toLowerCase() != "loaded") {
                    return;
                }
                jQuery.noConflict();
                (function($) {
                    function organizeTree(data,idKey,parentKey) {
        				var tmp = {};
        				$(data).each(function() {
        					tmp[this[idKey]]=this;
        				});
        				var root;
        				$(data).each(function () {
        					if(this.__parentNode = tmp[this[parentKey]]) {
        						(this.__parentNode.__childNodes||(this.__parentNode.__childNodes=[])).push(this);
        					} else {
        						root = this;
        					}
        				});
        				return root;
        			}
        			function createTree(data,offset,titleKey,prepend1,prepend2,prepend3) {
        				offset = offset||20;
        				titleKey = titleKey || 'title';
        				var tmp = $("<div>");
        				var children = data.__childNodes||[];
        				var text = (data[titleKey]||"").valueOf();
        				var titleLayer = $("<div>").appendTo(tmp).html(children.length?prepend1+text:prepend3+text)
        					.css("cursor","pointer").attr("isTitle","true").css("line-height","20px");
        				var subLayer = $("<div>").css("margin-left",offset+"px").appendTo(tmp);
        				$(children).each(function() {
        					createTree(this,offset,titleKey,prepend1,prepend2,prepend3).appendTo(subLayer);
        				});
        				if(children.length) {
        					titleLayer.toggle(function() {
        						titleLayer.html(prepend2+text);
        						subLayer.hide("fast");
        					},function() {
        						titleLayer.html(prepend1+text);
        						subLayer.show("fast");
        					});
        				};
        				return tmp;
        			}
        			$(function() {
        				var root = organizeTree(oriData,'myId','myParent');
        				createTree(root,20,
                            'myTitle',"<img src='http://www.destroydrop.com/javascripts/tree/example/img/folderopen.gif'/>",
                            "<img src='http://www.destroydrop.com/javascripts/tree/example/img/folder.gif'/>","<img src='http://www.destroydrop.com/javascripts/tree/example/img/page.gif'/>"
                        ).appendTo($("<div style='width:300px'></div>").appendTo(document.body));
        			});
                })(jQuery);
            }
            scpt.src="http://code.jquery.com/jquery-1.5.min.js";
            document.body.appendChild(scpt);

我贴个能立竿见影看到效果的，大家打开浏览器控制台，把上面代码贴进去执行即可（什么？没有控制台？IE8 F12,chrome ctrl+shift+j，如果还没有，那就算了）
如果chrome提示恶意网站，可能是因为图床的网站有问题，但是引用的图肯定没问题的。
5 楼 guoling09 2011-02-15  
谢了，不错的教程！
4 楼 lqixv 2011-02-14  
为了方便大家看效果图，现在我把楼主的 demo 放到了这个地方，大家可以看看 demo：
http://www.03soft.com/jQueryTree/
3 楼 guoyingqiang 2011-02-14  
谢谢。多多的
2 楼 fhx007 2011-02-14  
例子很好，值得学习
1 楼 TonyBug 2011-02-12  
挺不错的一个例子，目前正在学习jquery呢！对我的帮助很大，谢谢分享！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    spring3+hibernate3+jquerytree

    标题中的"spring3+hibernate3+jquerytree"是一个集成开发环境的示例，它结合了Spring 3.x框架、Hibernate 3.x持久层框架以及jQuery Tree库，用于构建Web应用程序。接下来，我们将深入探讨这三个关键组件及其相互作用...

    jquery-easyui-1.3.5 源码

    源码采用面向对象编程，封装了组件的核心功能和交互逻辑。 - **CSS 样式**：`themes` 目录下的CSS文件定义了组件的样式，包括基本样式和主题样式。通过修改这些文件，可以定制自己的UI风格。 - **插件机制**：...

    基于C# + jQuery的树形控件

    1. **C#**: C#是微软开发的一种面向对象的编程语言，广泛用于Windows应用开发，尤其是ASP.NET框架下的Web应用程序。在这个项目中，C#主要负责处理服务器端逻辑，如数据获取、处理和响应。 2. **jQuery**: jQuery是...

    ajax动态树tree

    【Ajax动态树Tree详解】 Ajax动态树（Tree）是一种在Web应用中常用的数据展示方式，它以树形结构展示信息，允许用户通过交互操作进行数据的添加、删除、拖曳和修改。这种技术通常结合了AJAX（Asynchronous ...

    ssm+mysql+easyui-tree省市区三级联动

    EasyUI是一套基于jQuery的UI库，提供了一系列易于使用的组件，如表格、树形控件等。在本项目中，`easyui-tree`被用于展示省市区的树形结构。树形控件能够清晰地展示三级联动的关系，用户可以通过点击节点来选择省市...

    jQuery Easyui 1.3.4中文API

    - **代码组织**: 如何编写结构清晰、易于维护的JavaScript代码，遵循模块化和面向对象的设计原则。 8. **兼容性与跨平台** - jQuery EasyUI通常兼容主流浏览器，包括IE、Firefox、Chrome、Safari等。 - 移动端...

    Table2JSONTree_C#根据TABLE产生JSON树_jsontree2table_

    C#是Microsoft开发的一种面向对象的编程语言，广泛用于Windows桌面应用、Web应用和游戏开发。在C#中，可以使用ADO.NET库来与各种类型的数据库（如SQL Server、Oracle、MySQL等）进行交互。ADO.NET提供了一套组件，...

    ExtJS4中文教程2 开发笔记 chm

    基于jquery的跨域调用文件 ================================= 7款强大的Javascript网格插件 Javascript 汉字编码转换 Javascript 面向对象之封装 Javascript 面向对象之构造函数的继承 Javascript 面向对象之非...

    基于JavaScript的圣诞树开源源码设计.zip

    6. **面向对象编程**：项目可能采用了面向对象的编程方式，定义了`Tree`、`Branch`或`Decoration`等类，每个类代表一种元素，并封装了各自的行为和属性。这样可以提高代码的可读性和可维护性。 7. **模块化**：随着...

    javascript 树控件 比较好用

    - QooXdoo是一个面向对象的JavaScript库，它的Tree Widget采用OOP风格编写。 - 这个树控件允许自定义样式，可以模仿文件系统的视觉效果。 - 支持动态添加子节点和键盘导航，增强了用户体验。 3. **jsTree** - ...

    struts2Tree

    Struts2Tree是一个基于Struts2、Hibernate和Spring框架实现的树形结构组件。这个组件在Web应用中常用于展示层级关系的数据，如组织架构、菜单系统等。它结合了这三个流行的Java EE技术，提供了强大的数据管理和用户...

    框架整体说明1

    - `class`和`js`中的`new`和`initialize`：这是面向对象编程中的概念，`class`用于定义类，`new`用于创建类的实例，而`initialize`通常是构造函数，用于初始化新创建的对象。 - `UI`部分的`CompMgr.regComp`、`UI....

    java学习资源哇哇哇

    它具有简单性、面向对象、健壮性、安全性、平台独立性等特点，被广泛应用于Web开发、移动应用（特别是Android应用）、大型企业级系统等领域。 #### 2. Java 学习资源推荐 - **官方文档**：Java 官方网站提供了详尽...

    jQuery EasyUI 1.4.5 版 API 中文.pdf

    **jQuery EasyUI** 是一个基于 jQuery 的 UI 库，它提供了一套丰富的用户界面组件，使得开发者能够快速地构建出具有高度交互性的网页应用。此文档为 **jQuery EasyUI 1.4.5版本** 的官方API文档中文版，由 Richie696...

    jquery miniui 3.0

    同时，利用 .NET 的强类型和面向对象特性，可以更好地组织和管理代码，提高开发效率。总的来说，jQuery MiniUI 3.0 是一个理想的工具，可以帮助开发者在 .NET 环境下构建出具有现代化界面的高质量 Web 应用。

    JavaEE技术面试常见问题.doc

    - **HQL**：面向对象的查询语言。 - **Criteria**：灵活构建查询条件。 - **Native SQL**：直接使用SQL。 #### Spring 1. **SSH整合** - **SSH**：Struts+Spring+Hibernate的缩写，是经典的Java Web开发架构...

    ssm项目结合zTree实现异步加载树。

    zTree是一个基于jQuery的树插件，它提供了丰富的配置选项和API，支持多种数据格式，包括JSON、XML等，同时具备异步加载数据的能力，能够动态地根据用户的操作加载子节点，显著提升了用户体验。在SSM项目中结合zTree...

    Extjs基础教程

    6. **树**（Tree）：用于展示分层次的数据结构。 7. **表单**（Form）：包含多个控件用于收集用户输入信息。 #### 五、总结 Extjs 作为一种强大的前端框架，不仅提供了丰富的 UI 组件，还支持 MVC 架构模式，有助...

    miftree和mootools实例和文档

    MooTools是一个轻量级的JavaScript框架，其设计目标是提供面向对象的开发方式和强大的工具集，使得JavaScript编程更加简洁和高效。MooTools包含以下主要模块： 1. **Core**：基础核心，提供基本的类系统、事件处理...

Magicbox
Global site tag (gtag.js) - Google Analytics