`
superobin
  • 浏览: 9563 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

JQUERY树,超简单,自带载入jQuery库

阅读更多
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(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提示恶意网站,可能是因为图床的网站有问题,但是引用的图肯定没问题的。
分享到:
评论

相关推荐

    非常简单的Jquery 树

    首先,"JQuery树"是指利用JQuery库来实现的一种可视化组件,它通常以层级结构展示数据,可以用于展现目录结构、组织架构或者数据库中的树状数据。这种组件能够帮助用户以直观的方式浏览和操作复杂的数据。 在描述中...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery超漂亮树形控件

    1. 引入jQuery库、`widgetTreeList.js`以及相应的CSS文件。 2. 在HTML中创建一个容器元素,作为树形控件的占位符。 3. 初始化树形控件,传递必要的数据源和配置选项。 4. 使用提供的API和事件处理函数来响应用户的...

    jquery树形插件

    1. **jQuery库**:文件`jquery-1.4.2.js`是jQuery的核心库,提供了丰富的DOM操作、事件处理和动画效果等功能,为树形插件提供了基础支持。 2. **zTree插件**:`jquery-ztree-2.5.js`和`jquery-ztree-2.5.min.js`是...

    jquery 树形菜单

    - `ul2tree.html`:这是一个HTML文件,很可能包含了用于展示树形菜单的HTML结构,以及引用jQuery库和自定义脚本(可能是`ul2tree.0.1.1.js`)的代码。HTML中可能会使用`&lt;ul&gt;`和`&lt;li&gt;`元素来定义菜单的层级关系。 - `...

    jquery树形菜单例子

    要使用jQuery Light Treeview,首先需要在你的项目中引入jQuery库和插件的JavaScript文件。确保在页面的`&lt;head&gt;`部分或`&lt;body&gt;`的底部引入,以确保在执行任何依赖于jQuery的代码之前,jQuery已经加载完成。 ```html...

    Jquery 树形菜单

    "Jquery"是前面提到的JavaScript库,它使得前端交互更加简单和流畅。"ASP.NET"是微软开发的Web应用框架,提供了全面的开发工具和服务,支持多种编程语言,如C#或VB.NET。 在提供的压缩包文件中,"OtisMVCBlog.sln...

    jQuery树形插件下拉列表选择框.zip

    《jQuery树形插件下拉列表选择框:深入解析与应用》 ...通过灵活的数据封装和强大的jQuery库,开发者可以轻松实现具有层级结构的下拉选择功能。理解和掌握这个插件的使用,对于提升网页应用的用户体验具有重要意义。

    JQuery树形下拉菜单

    不错的jquery树形下拉菜单,在此跟大家分享一下。希望提出宝贵意见……

    jQuery树插件演示族谱Family tree和日程安排

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。本文将深入探讨jQuery树插件在构建族谱(Family Tree)和日程安排(Scheduling)中的应用。 一、jQuery树...

    asp.net-jquery树

    jQuery库如jQuery UI或jstree等插件,提供了方便的方法来构建和操作树形结构。 4. **事件处理**:jQuery允许添加事件监听器,如点击、展开/折叠节点等。通过绑定`.click()`事件,可以实现节点被点击时执行特定的...

    jquery的树形结构

    1. **引入jQuery和jQuery Tree插件**:在HTML文件中,你需要引入jQuery库和jQuery Tree的CSS及JS文件。确保它们在HTML头部正确链接,以便页面加载时能正常工作。 ```html &lt;script src="https://code.jquery....

    jsTreeSelect jquery 树形下拉菜单

    **jsTreeSelect:jQuery实现的树形下拉菜单** jsTreeSelect是一款基于jQuery的插件,它能够将传统的下拉菜单转变为交互式的树形结构,为用户提供了更丰富的选择体验。这种树形下拉菜单在数据层级关系复杂时特别有用...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    jquery动态生成树

    1. **初始化页面**:在HTML页面中,你需要包含jQuery库、treeview插件的CSS和JavaScript文件,以及用于展示树结构的基本HTML元素,通常是一个无序列表。 2. **发送Ajax请求**:使用jQuery的`$.ajax`或`$.getJSON`...

    简单jquery树形

    要使用"简单jQuery树形"插件,首先需要在HTML文件中引入jQuery库和插件的JS和CSS文件。然后,在DOM加载完成后初始化树形结构,一般在`$(document).ready()`或`$(window).load()`中进行。代码可能如下: ```html ...

    jquery树形表格插件

    1. **引入依赖**:在HTML文件中添加jQuery库和插件的脚本链接。 2. **准备数据**:将数据以JSON或其他格式组织为树结构。 3. **初始化插件**:在jQuery的$(document).ready()函数中,调用插件的初始化方法,并传递...

    jQuery树形结构菜单代码.zip

    通过研究和理解这些文件,你可以掌握如何结合HTML、CSS和JavaScript,特别是jQuery库,来实现一个功能完善的树形菜单。如果你有编程基础,可以尝试修改代码以适应自己的需求,比如添加更多动画效果、优化性能或者...

    JQuery 实现XML树形菜单

    首先,需要在HTML文件中引入jQuery库(如`jquery-1.2.6.js`),然后编写JavaScript代码来处理XML数据。具体步骤如下:\n\n1. 加载XML文件:使用jQuery的`$.ajax()`或`$.get()`方法加载XML文件(如`work.xml`)。\n2....

    jQuery树形结构菜单代码

    在网页设计领域,jQuery是一种广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本资源提供了一款jQuery实现的树形结构菜单代码,适用于后台管理系统和其他需要层次展示数据的应用。树形结构...

Global site tag (gtag.js) - Google Analytics