JQuery的JSTree（下篇）

接上篇：

PART C.

最后，再介绍一种带有checkbox功能效果的JSTree

 $.ajaxSetup({cache:false});
    $("#checktreeToshow").tree({
    data  : {
        //内容同上，略过。
      },
       ui : {
        //作者提供了checkbox效果的主题包，引入项目并指明包的位置
       theme_path  : "<%=request.getContextPath() %>/css/themes/",
        //指出主题包的名字，如checkbox，或者是apple（苹果操作平台下的效果主题）
       theme_name : "checkbox",
       //理论上指定了主题包的位置和主题包的名字就可以使用带有checkbox功能的JSTree了，但我却并没有得到我想要的效果，所有的节点被点击时无法被勾选。似乎主题包内的change.js没有响应。因此我临时做了个比较糟糕的实现，就是写一个function checkChange(NODE, TREE_OBJ)函数，函数内容为checkbox主题包中change.js文件提供的onchange函数内容。自定义的checkChange函数即将你所操作的NODE节点的checkbox的勾选状态取反。因为我的onchange没有勾选效果，所以手工的添加了checkChange函数来实现。同理，我想要在节点的子节点加载进来后根据父节点是否被勾选来决定加载进来的子节点的勾选状态，于是onopen函数也做了调整，不过这里的调整并不完善，有许多细节的瑕疵，如果你是JSTree的高手，欢迎交流经验。
        context:{visible : function (NODE, TREE_OBJ) {
                    return false;
                }}
  },
      lang:{
           loading:"目录加载中……"
   },
   callback:
   {
   onchange : function (NODE, TREE_OBJ) {
                                          checkChange(NODE, TREE_OBJ);
                                          },
   onopen:function(NODE, TREE_OBJ){
                                       var $this = $(NODE).is("li") ? $(NODE) : $(NODE).parent();
                                       var status=($this.children("a").attr("class").substring(0,7));
                                       var tree=$.tree_reference("checktreeToshow");
                                       if($(NODE).attr("where")=="0")
                                       {
                                           if(status=="checked")
                                           {   
                                               checkChange(NODE, TREE_OBJ);
                                               checkChange(NODE, TREE_OBJ);
                                           }
                                       }
                                       else
                                       {
                                           if(status=="checked")
                                           {   
                                               //NODE=$(tree.parent(NODE));
                                               $this = $(NODE).is("li") ? $(NODE) : $(NODE).parent();
                                               status=($this.children("a").attr("class")).substring(0,7);
                                               if(status=="checked")
                                               {
                                               checkChange(NODE, TREE_OBJ);
                                               checkChange(NODE, TREE_OBJ);
                                               }
                                           }
                                       }
                                     }                                                        
   }     
 
});
}

  下面是我自定义的checkChange函数，函数体为主题中change.js文件提供的函数内容：

function checkChange(NODE, TREE_OBJ)
{
 var $this = $(NODE).is("li") ? $(NODE) : $(NODE).parent();
 if($this.children("a.unchecked").size() == 0) {
   TREE_OBJ.container.find("a").addClass("unchecked");
 }
 $this.children("a").removeClass("clicked");
 if($this.children("a").hasClass("checked")) {
   $this.find("li").andSelf().children("a").removeClass("checked").removeClass("undetermined").addClass("unchecked");
   var state = 0;
 }
 else {
   $this.find("li").andSelf().children("a").removeClass("unchecked").removeClass("undetermined").addClass("checked");
   var state = 1;
 }
 $this.parents("li").each(function () {
   if(state == 1) {
     if($(this).find("a.unchecked, a.undetermined").size() - 1 > 0) {
       $(this).parents("li").andSelf().children("a").removeClass("unchecked").removeClass("checked").addClass("undetermined");
       return false;
     }
     else $(this).children("a").removeClass("unchecked").removeClass("undetermined").addClass("checked");
   }
   else {
     if($(this).find("a.checked, a.undetermined").size() - 1 > 0) {
       $(this).parents("li").andSelf().children("a").removeClass("unchecked").removeClass("checked").addClass("undetermined");
       return false;
     }
     else $(this).children("a").removeClass("checked").removeClass("undetermined").addClass("unchecked");
   }
 });
}

  以上为个人的一点小总结，可以给我作为备忘以便以后再使用。如果你也在使用JQuery的JSTree，希望能对你有些许帮助，同时它更多的内容我也在不断尝试中。

 

   最后再说一下，JSTree下载后下载包中会自带JQuery的jquery.js文件，使用这个肯定没问题，但如果你的项目已经存在了jquery.js文件，有可能会出现$("#" + this.container.attr("id") + " li").live is not a function     tree_component.js (第 1028 行)  【注： 该异常捕获于FF浏览器，使用的JSTree为v0.9.6】，因为JSTree对JQuery的版本还是有依赖性的，作者对此异常的解释为：“It is the jQuery version that is used. You need to use the supplied jQuery (or the latest from http://jquery.com) . Version 1.2.6 does not support live events (they are introduced in 1.3).”


JSTree下载地址：http://jstree.googlecode.com/files/jsTree.v.0.9.8.zip

评论

3 楼 tk_zhang 2010-12-03  

Javakeith 写道

那些JS放在哪位置？为什么我的页面显示不了呢？LZ能给我个Demo吗？js本来就不好，JSON也不了解，麻烦了LZ！

上篇中有介绍！

2 楼 Javakeith 2010-12-03  

那些JS放在哪位置？为什么我的页面显示不了呢？LZ能给我个Demo吗？js本来就不好，JSON也不了解，麻烦了LZ！

1 楼 signs228 2010-04-21  

请问,如何让checkbox和default两个样式同时存在?
或者说,我想在checkbox前面放置文件夹或者文件的图标.