`
zhyi_12
  • 浏览: 98927 次
  • 性别: 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  
写的非常好!支持原创!

相关推荐

Global site tag (gtag.js) - Google Analytics