2007-11-26

使用jquery做树组件

关键字: 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. });  
  • 3b9215f7-2c49-45b0-862d-334a6ada975b-thumb
  • 描述:
  • 大小: 52.5 KB
  • youi树.rar (48 KB)
  • 描述: 增加了源码
  • 下载次数: 87
评论
发表评论

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

zhyi_12
搜索本博客
我的相册
26b4c660-1c68-4701-beed-3637a69b6dfc-thumb
structure
共 1 张
最近加入圈子
存档
最新评论