JQuery的JSTree使用

 PART A.

来看一个普通的树：

$(function () {
    $.ajaxSetup({cache:false});//这个是为了树的准确性做的一个缓存区清理的工作
   $("#divForTree").tree({//从这里开始初始化JSTree
    data  : {
        type  : "json",//支持如xml等多种类型，这里是获取JSON格式数据源
        url   : src,//每次获得数据从这个链接
        async : true,//动态加载数据
        async_data : function (NODE) {//请求数据时带的参数列表，可通过getParameter获得。
                                        return { parent_Id : $(NODE).attr("id") || 0}
                                     }
      },
      lang:{
           loading:"目录加载中……"  //在用户等待数据渲染的时候给出的提示内容，默认为loading
            },
       ui:{//在这个option中设置context来控制JSTree的右键操作，如果在context的visible函数内始终返回false则表示在任何节点的右键都无效。
           context:{visible : function (NODE, TREE_OBJ) {
                    return false;
                }}
           },
   callback : {//响应函数，如节点被选中的onselect，还有onopen,onload,beforeopen等很多可定义内容。
        onselect: function(node) {
            //自定义操作
         
        }
    }
 
});
});

再看一下JSON的数据吧，可以在后台JAVA程序段获得一个根据实际情况如当前打开节点的ID作为parent_id获取它的子节点List。然后在一个JSP中迭代这个List（这里的迭代利用了Struts2的标签）：

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
[
<s:iterator  value="noteslist"  >
{
    attributes: { id : ${id} },
    data: "${name}" ,state: "closed"
}
,
</s:iterator>
]

  现在看一个带有右键操作的树形菜单

$(document).ready(function(){
    $.ajaxSetup({cache:false});
    $("#browser").tree({
    data  : {
        type  : "json",
        url   : src,
        async : true,
        async_data : function (NODE) {
                                        return { parent_Id : $(NODE).attr("id") || 0}
                                     }
      },
      lang:{
           loading:"目录加载中……"
            },
      rules:
      {
      draggable   : "all"   //这个设置可以使得节点进行拖动操作
      },
      ui:{
           context     : [ //自定义右键操作的可操作内容
            {
                id      : "create",
                label   : "添加下级目录", //右键弹出菜单的此项操作屏显字样
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, //允许节点被右击时出现操作菜单
                icon    : "<%=request.getContextPath() %>/css/themes/default/create.png",//右键弹出菜单的此项操作图标
                action  : function (NODE, TREE_OBJ) {
                                                //进行此项操作，将有这个函数事件被响应
                                                     }
            },
            "separator"//这个是在两个操作之间画一条分隔线
           ,
            {
                id      : "edit",
                label   : "编辑目录信息",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/image/reg2.gif",
                action  : function (NODE, TREE_OBJ) {
                                                    openWindow(‘myurl‘,‘‘,‘‘,function(){treeRefresh($(NODE).attr("id"));});
                                                    }
            },
            "separator"
            ,
            {
                id      : "privilege",
                label   : "设置目录权限",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/css/themes/default/rename.png",
                action  : function (NODE, TREE_OBJ) {
                                                    openWindow(‘myurl‘,‘‘,‘‘,function(){treeRefresh($(NODE).attr("id"));});
                                                    }
            },
            "separator",
            {
                id      : "delete",
                label   : "删除",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/css/themes/default/remove.png",
                action  : function (NODE, TREE_OBJ) {
                                                    var tree=$.tree_reference("browser");
                                                    openWindow(‘myurl‘,‘‘,‘‘,function(){
                                               //下边的.parent()和.refresh()均为v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，这些将不被支持。
                                                    NODE=$(tree.parent(NODE));
                                                    if($(NODE).attr("id")==undefined){
                                                        tree.refresh();
                                                    }else{
                                                        TreeRefresh();
                                                    }
                                                    });
                                                    }
            },
            "separator",
            {
                id      : "others",
                label   : "其他操作",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/css/images/cut.png",
                action  : function (NODE, TREE_OBJ) {
                                                    alert("暂无可提供操作。");
                                                    }
            }
            ]
      },
   callback : {
         onselect: function(node) {
            //(a);
          
        }
    }
 
});
function treeRefresh(nodeid){
                     var rid=nodeid;
                    var tree=$.tree_reference("browser");
                    var par_node=tree.parent($("#"+rid));
                    tree.refresh(par_node);
}
});

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，希望能对你有些许帮助，同时它更多的内容我也在不断尝试中。