基于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

 

转载于:https://www.cnblogs.com/longterm/archive/2013/01/12/2858085.html