Jquery树形菜单插件之JsTree
环境：0.98版本。
0.98版本可以在官方下载，也可以在这里下载：http://files.cnblogs.com/china-li/jsTree.v.0.9.8.zip。
下载后，打开jsTree.v.0.9.8\reference\index.html，可以看到其详细文档。
一、引入文件
需要引入的文件：
- _lib/jquery.js
- _lib/css.js
- source/tree_component.js
- source/tree_component.css
必须先引入jquery文件。也可以直接引入_lib/_lib.js文件，这个文件包含了jquery.js css.js还有cookie插件等。
二、如何创建
创建树，有两种方式，通常用的是$('#demo1').tree({});
三、实例
我略去了api和配置项的详细讲解，而是在示例中一一指明。
首先，JsTree要获取数据，数据的获取形式大致三种：静态，动态，ajax。
1、静态很好理解，就是原本就存在的数据。例如，一个原本就存在的html文档：
<div id="demo1" class="demo tree tree-default" style="direction: ltr; ">
<ul class="ltr">
<li id="phtml_1" class="closed"><a href="#">Root node 1</a>
<ul>
<li id="phtml_2" class="leaf"><a href="#" style="background-image:url('../media/images/ok.png');">Custom icon</a></li>
<li id="phtml_3" class="leaf"><a href="#">Child node 2</a></li>
<li id="phtml_4" class="last leaf"><a href="#">Some other child node 111</a></li>
</ul>
</li>
<li id="phtml_5" class="last leaf"><a href="#" class="">Root node 2</a></li>
</ul>
</div>
当然，这个html文档遵循了JsTree的规范，不是随意的。我们利用这个原来存在的数据，直接就能生成树：
$(function () {
$("#demo1").tree();
});
还有我们可以利用json静态数据和xml静态数据来实现树：
$("#demo2").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson_1" }, state: "open", data: "Root node 1", children : [
{ attributes: { id : "pjson_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson_3" }, data: "Child node 2" },
{ attributes: { id : "pjson_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson_5" }, data: "Root node 2" }
]
}
});
$(function () {
$("#demo3").tree({
data : {
type : "xml_nested", // or "xml_flat"
xml : '<root><item id="pxml_1" ><content><name ><![CDATA[Root node 1]]></name></content><item id="pxml_2" ><content><name icon="../media/images/ok.png" ><![CDATA[Custom icon]]></name></content></item><item id="pxml_3" ><content><name ><![CDATA[Child node 2]]></name></content></item><item id="pxml_4" ><content><name ><![CDATA[Some other child node]]></name></content></item></item><item id="pxml_5" ><content><name ><![CDATA[Root node 2]]></name></content></item></root>'
}
});
});
只要在页面上留id是demo2和demo3的div即可，里面不用有内容，一切都是JsTree自动加载的。
解释属性：
- data 一个大配置项，里面配置数据有关的选项
- type 类型。可选值： json, xml_flat（平整的xml）, xml_nested（嵌套的xml）, predefined（预定义，如html）
- json，xml 数据源，如上显示
2、动态加载。就是从其他文件中加载数据，利用url配置即可。例如从服务端xml文件获取数据：
$(function () {
$("#demo4").tree({
data : {
type : "xml_flat", // or "xml_nested" or "json"
url : "1_xml_flat.xml"
}
});
});
同样，也可以从struts2的action中获取xml，或者获取json。
3、ajax加载数据。这个是重点，涉及到的东西比较多。ajax动态加载的原理是，先加载顶级节点，当点击顶级节点的时候，根据传到后台的id获取顶级节点的子节点集合。它不是一下子把所有的节点都加载，而是通过这种方式加载数据。这样无疑是节省资源的做法，降低了服务器压力，同时进入页面的等待时间也大大降低。
先看一下一个完整的例子，然后解释属性：
$(function(){
$.ajaxSetup({cache:false}); //ajax信息不缓存
$("#divForTree").tree({
data:{
type : "json",
url : "<%=path%>/admin/doList.do",//每次获得数据从这个链接
async : true,//动态加载数据
async_data : function(NODE) {
//请求数据时带的参数列表，可通过getParameter获得。
return {parentId : getId($(NODE))};
}
},
lang : {
loading : "目录加载中..." //加载的时候显示
},
rules : {
multiple : 'ctrl' //允许通过ctrl多选。
},
ui : {
context:{ //右键菜单
visible:function(node,tree_obj){
return false; //返回-1表示不可用；false表示不显示
}
},
theme_name : "classic" //主题。themes下的四种主题
},
callback : { //事件
onselect : function(node) {
$.tree_reference('divForTree').toggle_branch($(node));
},
error : function(TEXT, TREE_OBJ) {
alert(TEXT);
}
}
});
});
先看大配置项：
- data 数据
- lang 标志
- rules 规则
- ui 界面
- callback 回调函数，事件
小配置项，都有注释。文档中则有详细讲解。我是在节点被选中的时候（onselect），让节点打开或关闭。后台获取的数据，前台使用getId()方法得到parentId。因为每个节点的id在数据库中都是数字，而纯数字不符合css命名规范，所以我在每个id上都加了一个‘n’。前台解析的时候，getId()方法如下：
function getId(node){ var id = node.attr('id'); if(id){ id = $.trim(id.substring(1)); }else{ id = 0; } return id; }
第一次，获取的是0，显示的是顶级节点。
后台需要创建一个工具类，这个工具类依照JsTree规则：
public class JsTreeNode { public static String STATE_OPEN = "open"; public static String STATE_CLOSED = "closed"; private String id; private String state; private String data; private int hasChild; //...省略getter，setter }
在struts2的返回页面，用标签迭代，输出json：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> [ <s:iterator value="listNodes" > {"attributes":{"id":"${id}"} <s:if test="hasChild == 1"> ,"data":"${data}","state":"${state}","children":[{}] </s:if> <s:else> ,"data": { "title" : "${data}"/*,"icon":"http://www.cnblogs.com/style/test/img/st_node.gif"*/} </s:else>} , </s:iterator> ]
如果有子节点，则显示state,如果没有，则输出title就行。后面注释的icon是自定义的图像，可有可无。
其中，JsTree中有几个api，比较重要：
$.tree_reference('demo1').selected //前面是当前tree的引用，selected表示被选择的节点
$.tree_reference('demo1').opened //被打开的节点集合
$.tree_reference('demo1').selected_arr //如果在rules下定义了允许多选，这个属性才有用。表示被选择的节点集合
$.tree_reference('demo1').refresh() //刷新节点
open_branch($(node)) //模拟打开一个节点
close_branch(node) //模拟关闭
open_all() //打开所有
close_all() //关闭所有
rename() //重命名
remove() //删除
next() //获得下一个节点
prev() //前一个节点
parent() //父节点
children() //子节点集合
get_next() //
get_prev() //
get_left() //
get_right() //获得选中节点的上下左右
cut() //剪切
copy() //复制
paste() //粘贴
其他的，看文档自己研究！
多一句：1.0使用插件形式来组合的，可以直接使用这个版本！
另外，推荐一个国产Tree插件：ZTree。