`
zhyi_12
  • 浏览: 99875 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

使用jquery做树组件

阅读更多

  最近整理了一下树,使用jquery插件的方式重写。感觉比以前仅仅基于jquery写看的舒服多了。和以前一样还是借用treeview 的样式。    

 目前实现的功能和准备移植能的功能:

  1. 树的按层初始化(通过expanded属性可以控制节点的默认展开)
  2. 根节点的可控显示(通过初始化参数 isShowRoot控制)
  3. 支持单独为每一个节点设置展开、关闭和图标文件(属性fileIcon、folderIcon、openFolderIcon
  4. 支持复选框(youiChecked属性控制)
  5. 树的点击动作(通过youiAction属性关联注册动作,事件 默认为click ,通过actionHandle属性控制,可以为dblclick
  6. 动态读取(src属性,未完成,还在考虑那种方式比较好,只实现了简单的id和text的读取。
  7. 拖放(属性draggable控制 依赖jquery 的ui组件 draggable,简单的实现,未完善)
  8. 树的搜索根据路径查找节点(支持未读取数据方式的查找展开,以前实现的速度比较慢,改动比较大,还在想用什么方法比较好)

action注册:

 

html 代码
  1. <li youiAction="showStatusBar" youiChecked="true" id="2703000000004"><a><span>2703000000004失业率(月度数据)span>a>li>  

 

js 代码
  1. jQuery.actionFactory.register("showStatusBar",function(checked){   
  2.     alert(this.options.text);   
  3.     if(checked=="true"){   
  4.         alert("显示状态栏");   
  5.     }else{   
  6.         alert("隐藏状态栏");   
  7.     }   
  8. });  

2703000000004失业率(月度数据)

增加功能:

  1. 动态读取(xml数据集格式)
  2. xml数据附加其他属性到树节点
  3. 节点定位openPath
js 代码
  1. $("#demoTree").load("template.html",function(){   
  2.     var templateTree = $(this).youiTree({   
  3.         treeMapObject:{   
  4.             mapId   :'fileId',   
  5.             mapText :'fileName',   
  6.             mapPid  :'parentFileId'   
  7.         },   
  8.         attributes:'filePath'   
  9.     });   
  10.     templateTree.openPath("t1/t11/t21");   
  11.     $(this).show();   
  12. });  
  • 大小: 52.5 KB
  • youi树.rar (48 KB)
  • 描述: 增加了源码
  • 下载次数: 1246
分享到:
评论
7 楼 zhyi_12 2011-12-03  
herowj 写道
楼主这个是国家统计数据库项目吧???


曾经参与过这个项目,有点年头了。你是?
6 楼 herowj 2011-12-03  
楼主这个是国家统计数据库项目吧???
5 楼 magicyz 2010-05-07  
楼主可不可以讲的更加详细一点,如何使用!~~~
4 楼 zhyi_12 2009-12-14  
mikyviky 写道
谢谢楼主 为什么我运行您的程序 在ie浏览器下 树表 总是loading加载状态 火狐下面没问题呢?

这个版本里面ie下需要在 web容器里面跑 才能读取xml数据
3 楼 mikyviky 2009-12-14  
谢谢楼主 为什么我运行您的程序 在ie浏览器下 树表 总是loading加载状态 火狐下面没问题呢?
2 楼 mikyviky 2009-12-14  
谢谢楼主 
1 楼 gongmingwind 2008-12-10  
写的非常好!支持原创!

相关推荐

    jquery_tree 树形组件

    本文将深入探讨jQuery中的一个经典树形组件——jQuery Tree,帮助开发者更好地理解和应用这一工具。 jQuery Tree组件是基于流行的JavaScript库jQuery构建的,它为开发者提供了在网页上创建交互式、可操作的树状结构...

    jquery做的多级树

    **jQuery实现的多级树结构详解** ...通过理解和掌握上述代码,你可以根据项目需求进行定制和扩展,创建出符合业务场景的多级树组件。无论是在文件管理、导航菜单还是其他层级关系的展示中,这个方法都能发挥重要作用。

    jquery超漂亮树形控件

    在实际开发中,使用这个jQuery树形控件可能涉及以下步骤: 1. 引入jQuery库、`widgetTreeList.js`以及相应的CSS文件。 2. 在HTML中创建一个容器元素,作为树形控件的占位符。 3. 初始化树形控件,传递必要的数据源和...

    使用jquery实现树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用。 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才能够...

    jquery动态生成树

    2. **发送Ajax请求**:使用jQuery的`$.ajax`或`$.getJSON`方法向Struts2 action发起请求,获取目录树的JSON数据。 3. **处理服务器响应**:当Struts2 action处理完请求后,会返回JSON数据。在jQuery的success回调...

    jquery树形展示服务端目录结构树组件

    本文将深入探讨“jQuery树形展示服务端目录结构树组件”,这是一个利用jQuery实现的功能,用于在前端展示服务器的目录结构,使得用户可以直观地浏览和操作文件系统。 首先,我们要了解的核心知识点是jQuery ...

    jquery-treegrid 树形表格组件

    jQuery TreeGrid 是一款强大的树形表格组件,适用于需要展示层次化数据的场景。通过合理的配置和扩展,它可以为你的Web应用提供灵活、高效的表格管理功能。记得保持对组件的维护和更新,以便充分利用其新特性并避免...

    jquery mobile 树插件

    同时,你还可以结合 jQuery Mobile 的其他组件,如对话框、表单等,构建更复杂的交互场景。 ### 文件结构分析 在提供的 `jqm-tree-master` 压缩包中,通常包含以下内容: 1. **CSS 文件**:用于定义树形插件的...

    JS树,树组件,javascript树

    - jQuery UI的Treeview:基于jQuery的树组件。 - Angular UI Tree:适用于AngularJS应用的树组件。 - React Treebeard:适用于React应用的可定制化树组件。 - Vue.js的Vuetree:专门为Vue.js设计的树组件。 - ...

    jquery文件树

    "jQuery文件树"是一种在网页上以树状结构展示文件目录和文件的交互式组件,常用于文件管理系统、文档库或者资源导航等场景。它利用jQuery库的强大功能,结合HTML、CSS和JavaScript实现动态的、可操作的文件目录展示...

    基于c#、jquery开发的treeView目录树组件

    基于c#、jquery开发的treeView目录树组件,最大的特点是可以将树节点的显示状态以ajax方式,保存到用户session里,即使页面刷新,树的显示状态也不会丢失,效率极佳。 扩展性也非常好,组件的html和css分离,很简洁...

    jquery 组件大全

    **jQuery组件大全** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在本篇文章中,我们将探讨一系列基于jQuery的组件,这些组件能够帮助开发者快速构建功能丰富的...

    jquery 表格树

    在IT领域,jQuery是一款非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在本话题中,我们将深入探讨如何使用jQuery实现...通过实践和学习,你可以创建出既实用又美观的表格树组件。

    基于jquery的树形插件

    **基于jQuery的树形插件**是前端开发中常用的一种组件,它可以帮助开发者在网页上构建出层次结构清晰、交互性强的目录或组织结构。在本文中,我们将深入探讨这种插件的工作原理、优势以及如何在项目中进行有效集成。...

Global site tag (gtag.js) - Google Analytics