基于jQuery的树结构,允许多选、单选


  需要一个可以选择部门的功能,开始选用的是easyUI tree,不过最后被嫌弃了,只好寻找更优的解决方法,当然也可以通过异步加载的方式来避免一次性载入速度慢的问题,但这不在考虑范围内。

  终于在《打造基于jQuery的高性能TreeView》中找到了一个不错的东东,具体就不用多说,看原文就可以。http://www.cnblogs.com/xuanye/archive/2009/10/26/1590250.html

  这里要讨论的就是如何将现有的插件改造成自己想要的,原插件是多选的,而这里选择部门只需要选择一个就可以了,简单点可以通过限定最终的选定的结果数量来限制,但是选择框还是checkbox,既然要用那么就整像样点,所以就来动手改造成radio的形式,原插件扩展也是非常容易的,只需要做简单的修改就可以满足自己的要求。

  1、首先是插件的设置,一处是覆盖checkbox的0、1状态的图标,用准备好的radio来替换,另一处就是覆盖checkbox的点击方法

 1 var o = {
 2                 showcheck: true,          
 3                 theme: "bbit-tree-lines", //bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows
 4                 icons: ["radio_0.gif", "radio_1.gif", "checkbox_2.gif"],
 5                 oncheckboxclick:function(item){
 6                     $("#tree").clear();
 7                     var s = item.checkstate != 1 ? 1 : 0;
 8                     $("#tree").nodeclick(item,s);
 9                     return true;
10                 }
11             };

  2、需要在插件里增加2个方法,就是前面点击事件用到的方法

 1 //重置所有选中项
 2     $.fn.clear = function() {
 3         if (this[0].t) {
 4             return this[0].t.clear();
 5         }
 6         return null;
 7     };
 8     //节点点击
 9     $.fn.nodeclick = function(item,s) {
10         if (this[0].t) {
11             this[0].t.check(item,s);
12         }
13     };

  3、 我采用的数据是用java后台输出json,对象的属性首页字母输出是小写,原插件的子结点名为ChildNodes,我这边改成了childNodes。

效果图如下:

 

 http://files.cnblogs.com/longterm/treeview_radio.rar

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM