`
yueguangyuan
  • 浏览: 337107 次
  • 性别: Icon_minigender_1
  • 来自: 新加坡
社区版块
存档分类
最新评论

My CheckTree 使用YUI check tree实现域的树结构

阅读更多

一、User Story

新的项目中有严格的域控制需求,其实就是要实现一个无限极的树结构,其实以前实现过各种树形结构,什么菜单、权限树、产品目录,但是这次的无限级伸 展的可控制树结构着实难到我了,光是找方法就找了很长时间,以前的级别都是死的,而且单纯的checkbox级联遍历都非常的慢。

二、解决方案的寻找

      A.考虑过xtree,但是反复考虑和看sample,发现这个东西还是不好控制,特别是它的代码非常不好懂,如果要是扩展起来也非常难(上个项目中曾经有同事用过,超级慢不说还很难扩展,他修改的代码我死活看不懂)。

     B.自己去实现,发现这个更难,以前实现3层的树还好,但是代码已经很壮观,而且JSP里面掺杂Java代码和JS代码,简直是失败中的失败……而网上的 例子很多,但是好用的其实并不多,特别是代码会有不兼容Firefox的问题(我是Ubuntu用户)。后来还有朋友传给我他实现的Ajax加载树,但是 发现仍然比较难懂,而且扩展性也不是很好,愁!

      最终选定YUI的checktree,真是有种踏破铁鞋无觅处的感觉,YUI实现了种类繁多的JavaScript应用基础类包,可以方便的扩展使用,因 为代码质量比较高的缘故(代码清晰、文档较全),扩展起来也相对容易些,但是YUI复杂的命名空间和大量的继承也令人很苦恼的说。在实现这棵树以后,还大 量使用其中的Ajax支持包connection,真是相当舒服,感觉已经超过Prototype,还有就是YUI还提供的已经压好的代码包,很贴心 ^^。

三、实现 YUI checktree的改造

     说了不少废话(实际上前面这个过程我用了两天的时间 T_T),现在说说实际功能,由于需要为这棵树提供多种多样的附加功能,所以代码比较大,就放在附件里面,这里写点关键的实现部分。

     1.修改源代码 YUI checktree继承自treeview控件,需要一个叫TaskNode.js的类支持,TaskNode.js继承了 Yohoo.widget.TextNode,是YUI default tree,是采用Div内嵌table实现的,代码写的比较精巧,全是面向对象的实现方法,得益于YUI良好的继承机制,而TaskNode更爽,点击后 的级联效果做的非常漂亮,而且速度惊人的快,完全没有一般checkbox树遍历的慢速,原因是它的所有checkbox都是图片,然后采用css来控 制,妙哉!(其实也有相应的问题,这样的树不大好做disable,一个是图片不好搞,还有就是屏蔽它的onclick方法都不大好改,我目前还不知道怎 么实现,太忙了最近。)

     说修改源代码其实只修改了两个地方,目的是让树结构能多带一些关键数据(原有的树index是子增长的,修改后可以描述主键)。

    A.修改 treeview.js,修改init: function(oData, oParent, expanded)方法,改为init: function(oData, oParent, expanded,oIndex),然后this.index=oIndex,这样在初始化树的时候节点的index可以放一个对象的主键进去,达到区分的效果。

    B.修改TaskNode.js,也就是YAHOO.widget.TaskNode的构造函数增加一个参数,调用上面改的init方法就可以构造一个带有对象主键和名字的树结构。这样构造一个根节点的方法:var node = YAHOO.widget.TaskNode("name",tree.getRoot(),false,false,"id"),很爽

    2.接下来比较麻烦的就是构造树结构,从数据库取出来的数据如何以属性结构展现着实令人难以琢磨,为了这个树结构起初打算使用XML来解析,但是发现构造数据和解析仍然是很难过。

       其实展开树在现在看来还是比较固定的方法:把数据分层,一层一层构造节点。

       然后是构造一棵树的代码:

js 代码
 
  1. tree = new YAHOO.widget.TreeView(treeDiv);   
  2.     for(j=0;j
  3.         var domain = domainList[j];   
  4.         if(j==0){   
  5.             eval("var node" + domain.domainId + "_" + domain.levelId + "= new YAHOO.widget.TaskNode(domain.name,tree.getRoot(), false, false, domain.domainId);");   
  6.         }else{   
  7.             var levelId = parseInt(domain.levelId) - 1;   
  8.             try{   
  9.             eval("var node" + domain.domainId + "_" + domain.levelId + "= new YAHOO.widget.TaskNode(domain.name,eval(node" + domain.domDomainId  + "_" + levelId + "), false, false, domain.domainId);");   
  10.             }catch(e){   
  11.             eval("var node" + domain.domainId + "_" + domain.levelId + "= new YAHOO.widget.TaskNode(domain.name,tree.getRoot(), false, false, domain.domainId);");   
  12.             }   
  13.         }   
  14.     }  

        domainList的结构是一个用JSON转化过来的Java对象数组,具体结构我会在另一篇日志里面记录,这里domain包括domainId、name、parentId、leveleId几个基本的数据。

        比较复杂一点的地方是动态构造节点,因为所有的节点都是在遍历结构集后生成的,每个节点如果没有父节点(这里用的levelId判断),就把 tree.getRoot()这个默认的根节点做为父节点,其他节点只要根据eval("var node" + domain.domainId + "_" + domain.levelId)的结果找到父对象就可以了。另外里面包含了try catch代码,就是应对树结构不够完整的情况,如果某节点层次并不是最低,但是却没有父节点,就把它直接加到根节点上做一个新的根节点,不过这个try catch可能会有隐患,还在考虑其他的解决办法中……

至此一颗区域树已经构造完毕

      3.一些基本的获取数据方法。用到这棵树最常见的就是获取当前状态下选择的值,没有什么好的办法,只能递归,想法参照YUI checktree的Sample,它是用一个递归的循环随机生成4层结构的树,那么在处理这棵树的结构中几乎都是使用递归来完成的,目前不保证数据量十 分大的时候速度会有影响,但是JavaScript本来也不是省油的灯,好在这种区域也就是千百个的,性能影响不那么明显。

      A.取得所有选择的值,该checktree规定每个节点都有一个checkstate,(0=unchecked, 1=some children checked, 2=all children checked),这就给我们递归带来很大方便,如果你遍历到某个节点checkstate是2,那么立马知道以下节点都被选中,拿到这个值就足够,大大 减少递归次数。所以取得选择结果的方法:

js 代码
 
  1. var checkResult = new Array(0);   
  2. var topNodes = tree.getRoot().children;   
  3. getResult(topNodes, checkResult);   
  4.   
  5. function getResult(nodes,checkResult){   
  6.   for(var i=0; i
  7.     var node = nodes[i];   
  8.     var checkState = node.checkState;   
  9.     if(checkState == 0){  //结果为零表示没有被选,直接跳出遍历下一节点   
  10.         continue;   
  11.     }else if (checkState == 2){   //表示以下所有节点都被选中   
  12.         checkResult.push(node.index);   
  13.     }else if (checkState == 1){   //表示以下节点部分选中   
  14.         var childNodes = node.children;   
  15.         if(childNodes && childNodes.length>0){   
  16.          getResult(childNodes, checkResult);   
  17.         }   
  18.     }   
  19. }   
  20. }  

 这样返回一个checkResult数组。

         B.默认值选择,一般用于更新树结构的情况,会有一些节点默认被选中,同样也是一个递归就可以

javascript 代码
 
  1. var domains = new Array();   
  2.     if(checkResult.indexOf(";") > 0){   
  3.         domains = checkResult.split(";");   
  4.     } else {   
  5.         domains.push(checkResult);   
  6.     }   
  7.     for(var i = 0; i < domains.length; i++){   
  8.         var domainId = domains[i];   
  9.         tree.getNodeByIndex(domainId).check();   
  10.     }  

      其中传入一个参数checkResult,结构为"1;2;4;5"这样的字串。

      C.构建一个示例,接下来就是看看实际效果,由于现在的区域树里面做了一些信息的描述,为了操作方便,采用JSON进行了封装,后台构造好的POJO直接转化为JSON对象拿到前台来用,然后测试代码这样写:

js 代码
  1. <script>"text/javascript">      
  2.     var testData = '[{"levelId":"1","domDomainId":"root","domainId":0,"coldId":"086","name":"中国"},{"levelId":"2","domDomainId":0,"domainId":2,"coldId":"021","name":"上海"},{"levelId":"2","domDomainId":0,"domainId":57,"coldId":"010","name":"北京"},{"levelId":"2","domDomainId":0,"domainId":6,"coldId":"020","name":"广东"},{"levelId":"3","domDomainId":2,"domainId":3,"coldId":"001","name":"浦东"},{"levelId":"3","domDomainId":6,"domainId":8,"coldId":"002","name":"深圳"},{"levelId":"3","domDomainId":6,"domainId":9,"coldId":"002","name":"珠海"},{"levelId":"3","domDomainId":6,"domainId":7,"coldId":"001","name":"广州"},{"levelId":"3","domDomainId":2,"domainId":63,"coldId":"005","name":"徐汇区"},{"levelId":"3","domDomainId":2,"domainId":61,"coldId":"015","name":"闽行区"}]';      
  3.     var domainList = eval(testData);      
  4.     buildCheckTree("treeDiv1", domainList, false);      
  5. </script>    

 

上面的测试代码中采用JSON数据,是由Ajax请求服务器端产生的结果转化为JSON对象响应给客户端,具体实现方法参照我的另一篇日志:http://www.iteye.com/topic/91077

四、结语

      至此,一个复杂的区域的树结构就完成了,可以做为一种选择方案,YUI checktree的好处在于它的checkbox实现机制不同于以往的方法,采用css图片控制使得复杂而缓慢的遍历变得轻松畅快。在附件中有形成的效果截图和代码包,myCheckTree.js是我根据项目需求写的方法,里面提供了多种获得树结构数据选择结果的方法。如果想生成没有checkbox的话也很简单,把方法名调用 改为buildTree就可以。实现了对这棵区域树的基本操作和数据传递,数据采用Ajax传递至页面,后台使用JSON封装POJO,具体内容有时间将 在下一篇日志里面记录。很多方法还没有仔细测试过,欢迎大家指正!

  • 描述: 初始树演示图片
  • 大小: 12.8 KB
  • 描述: 选择结果演示图片
  • 大小: 20.7 KB
分享到:
评论
10 楼 yueguangyuan 2007-10-31  
可以去网上下到,有几个开源软件可以选,我是用的JSON in Java
访问http://json.org/java/ 下载  不过它只有源码包,建议自己编译好打成jar包放在lib里面使用
9 楼 zybossxx 2007-10-30  
在服务器中转换成JSON的对象要有一个JSON的类包,这个在哪有下呀
8 楼 yueguangyuan 2007-10-07  
当然可以,里面提供了一些选中结果和预先选中的方法,我在tree.js里面有注释的
7 楼 waninfo 2007-10-07  
老大能提供保存和读取这快的代码吗,比如说勾选了以后,把结果保存到数据库,下次读取的时候把上次的结果读出来。做权限用
6 楼 yueguangyuan 2007-07-26  
由于时间和条件的限制,我还一直没有来得及在IE7下面实验这个东西,而且和一般的Ajax框架差不多,大家都推荐Firefox这种对W3C标准支持更好的浏览器,微软这种兼容性真是要人头疼

树添加单击事件,在调用getTreeByAjax()这个方法的时候有个参数addCheckBoxEvent,如果为true就会在每个树节点上支持一个onCheckClick(node)的方法,覆盖掉就可以。
5 楼 sxpyrgz 2007-07-25  
这个树怎么加单击事件啊!
4 楼 pignut_wang 2007-07-19  
我在IE7下直接打开,出错
3 楼 yueguangyuan 2007-07-17  
mpmm 写道
我的意思是把上面的JSON数据转成跟目录树结构一样的代码

还需要多简单阿?   我这没掺杂什么复杂的东西阿
2 楼 mpmm 2007-07-14  
我的意思是把上面的JSON数据转成跟目录树结构一样的代码
1 楼 mpmm 2007-07-14  
老大:还是复杂看不懂 可以提供一个把js代码里的array直接转成JSON的精简版代码给我吗,谢谢? zengke163@163.com

相关推荐

    YUI3 中tree的两种实现

    YUI3 TreeView组件是YUI3核心库的一部分,它允许开发者创建交互式的树结构。这个组件支持节点的添加、删除、展开、折叠,以及自定义节点内容和样式。TreeView的基本使用包括创建实例,定义节点数据,以及绑定事件...

    27款jQuery Tree 树形结构插件

    - Treeview 是一个轻量级的插件,将无序列表转换为可展开和折叠的树结构。 - 它支持无限级别的扩展和动态添加菜单项。 - 根据 MIT 和 GPL 协议开源,允许自由使用和修改,但GPL禁止将修改后的代码用于闭源商业...

    YUI3 实现overlay展开是tree,并且树节点可以拖拽-drag和drop

    为了实现这个功能,我们需要定义树的节点数据模型,然后使用`TreeView`的API来构建和渲染树结构。 然后,拖放(Drag and Drop)功能是`YUI3`的`DD`(Drag & Drop)模块提供的。`DD`模块包括了`Drag`和`Drop`两个...

    使用YUI2.8 实现多选 ,支持Ctrl 和Shift

    使用YUI2.8 仿照JQuery UI 的select插件写的一个函数 详情见我的博客http://hi.baidu.com/hjzheng

    使用YUI2.8 实现多个LI拖拽

    这是对YUI拖拽例子的改编,大家可以去访问的博客 http://hi.baidu.com/hjzheng

    YUI+Ant 实现JS CSS压缩

    标题:“YUI+Ant 实现JS CSS压缩” 在Web开发中,为了提高页面加载速度和优化用户体验,开发者通常会使用代码压缩工具来减少JavaScript(JS)和CSS文件的大小。YUI Compressor是 Yahoo! 推出的一款开源的压缩工具,...

    YUI-EXT使用详解

    **YUI-EXT使用详解** YUI-EXT是基于Yahoo! User Interface Library (YUI)的一个扩展库,专为构建富互联网应用程序(RIA)而设计。YUI-EXT提供了许多高级组件,如表格、菜单、窗口、表单、布局管理器等,极大地丰富...

    《YUI使用文档》汉语版的yui学习材料

    《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。YUI,全称Yahoo! User Interface Library,是Yahoo开发的一个开放源代码的JavaScript库,旨在帮助开发者创建交互式...

    E3tree开发文档

    它还允许轻松集成现有的树形UI,如xtree、ext tree和yuimenu。 为了开始使用E3.Tree,你需要确保系统满足以下条件:JDK 1.4X或更高版本。对于API的使用,仅需要jsp1.2和servlet2.3,而使用taglib则需要jsp2.0和...

    使用yuicompressor压缩及合并js,css静态资源

    本篇文章将深入探讨如何使用Yahoo的开源工具——YUI Compressor来实现这一目标。 YUI Compressor是由Yahoo开发的一款高效且强大的JavaScript和CSS压缩工具。它能够通过删除空格、注释和不必要的字符,以及进行代码...

    yui 资源包

    此外,YUI的延迟加载(LazyLoad)特性,能让非核心模块在需要时才加载,进一步优化资源使用。 总结,YUI 3.9.0 r2是一个强大的前端开发框架,它提供了一整套工具和组件,以应对复杂的界面设计挑战,并通过优化资源...

    yahoo Tree组件

    Yahoo Tree组件是Yahoo UI Library(YUI)中的一部分,它是一个用于构建和管理树形数据结构的JavaScript库。YUI是一个开源的JavaScript和CSS库,旨在帮助开发者创建高性能、可扩展的Web应用程序。在本文中,我们将...

    YUI js方法使用列子

    8. **Module System(模块系统)**:通过YUI的`use`方法,可以按需加载所需模块,实现延迟加载和代码分割。 9. **Utility Functions(实用函数)**:包含各种常用的工具函数,如字符串处理、数组操作、日期时间处理...

    基于yui的layout,tree的demo

    基于yui的layout,tree的一个demo

    yui.rar 例子

    在这个例子中,左中右三个模块的划分,正是通过YUI的Container组件和Grids CSS实现的,它们使得页面结构清晰,代码可读性强。 接下来,我们要讨论的是YUI的模块化设计。YUI遵循了“按需加载”的原则,这意味着...

    yui3-master.zip

    本文将围绕“yui3-master.zip”这个压缩包,深入探讨YUI3的核心概念、结构和实际应用。 1. **模块化设计** YUI3采用了模块化的设计理念,每个功能都被封装为独立的模块,开发者可以根据需要按需加载,降低了整体...

    【YUI组件】基于YUI的表单验证器

    1. **YUI库**:了解YUI的基本结构、模块化设计和如何引入到项目中,是使用YUI表单验证器的前提。 2. **表单验证**:表单验证的常见规则包括非空检查、长度限制、格式验证(如邮箱、电话号码等)和自定义验证函数。 3...

    YUI3.6文档及示例

    通过这些示例,你可以学习如何创建事件监听器、如何使用布局组件构建页面结构、如何实现动画效果以及如何与其他服务通信。同时,文档部分详细阐述了每个模块的用法、参数、返回值和注意事项,是学习和调试YUI的宝贵...

    yui js压缩工具

    YUI Compressor在JavaScript压缩方面,采用了一种称为"词法分析"的技术,它能理解代码结构并智能地进行压缩。例如,它会把多行代码合并成一行,移除空格和换行符,替换长变量名以减少字符数,同时保持代码的可执行性...

    YUI.rar_html_javascript YUI_yui_yui javascript

    1. **滑动效果**:使用YUI的动画模块可以实现元素的平滑移动,常用于导航菜单或滑块展示。 2. **弹出对话框**:YUI的Dialog组件可以创建可定制的对话框,用于提示信息、确认操作等。 3. **下拉菜单**:YUI的Menu组件...

Global site tag (gtag.js) - Google Analytics