Struts2+sitemesh下搭建jsTree1.0的示例
jsTree是一款强大的构建树状菜单的jQuery插件，项目中使用它做了树状菜单的复选框，自己研究了一下，做了个示例在此记录。
先从官网（http://plugins.jquery.com/project/jstree）下载压缩包jsTree.v.1.0rc_0.zip，文档：http://www.jstree.com/documentation。当然，下载的压缩包里也有一些文档和demo。
1、将压缩包解压后放到工程webapp下（本人放到了webapp/js/jsTree路径），可以去掉_demo和_docs文件夹。
2、创建页面jsTree.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jsTree测试</title> <mce:script type="text/javascript" src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js"></mce:script> <mce:script type="text/javascript" src="js/jsTree/lib/jquery.cookie.js" mce_src="js/jsTree/lib/jquery.cookie.js"></mce:script> <mce:script type="text/javascript" src="js/jsTree/lib/jquery.hotkeys.js" mce_src="js/jsTree/lib/jquery.hotkeys.js"></mce:script> <mce:script type="text/javascript" src="js/jsTree/jquery.jstree.js" mce_src="js/jsTree/jquery.jstree.js"></mce:script> <mce:script type="text/javascript"><!-- var tree; $(function(){ tree=$("#divtree").jstree({ plugins:[ "themes", "json_data","checkbox","ui" ],//指定使用哪些插件 //"json_data":{["data":"New node","state":""}]} json_data:{ //使用json_data插件设置构建jstree的数据源 data:[{ "attr": { "id" : "2950179"},"state": "closed","children" : [{ "attr": { "id" : "2950181"},"data": "用户查看","state": "closed"},{ "attr": { "id" : "2950183"},"data": "用户增加"},{ "attr": { "id" : "2950185"},"data": "用户删除"}],"data": "用户管理"},{"attr": { "id": "2950187"},"state": "closed",children : [{ "attr": { "id": "2950189"},"data": "角色查看"},{ "attr": { "id": "2950191"},"data": "角色增加"},{ "attr": { "id": "2950193"},"data": "角色删除"}],"data": "角色管理"}],//json格式，加载静态数据 ajax:{ //使用ajax加载数据，如果和data同时使用则只在打开未加载的子节点时起作用 url:"book!getTree.action", //ajax获取数据的url async:false } }, themes:{ //themes插件设置 theme : "default", //设置theme主题，默认是"default"，可选值：default、apple、classic、default-rtl url : false, //设置theme css文件的路径 dots : true, //是否显示虚线点 icons : true //是否显示节点前的图标，$("a > ins.jstree-icon") }, ui:{initially_select:["2950181","2950185","2950187"]},//设置初始化选中的节点列表 core:{loading:"加载数据中...", initially_open:["2950179"]} //设置初始化打开状态的节点列表 }) .bind('click.jstree', function(event) { //绑定click事件 //$("#divtree").jstree("get_checked").each(function(i,node){alert(node.id);});//查看每个被选中节点的id属性值 }); }); // --></mce:script> </head> <body> <div id="divtree"></div> </body> </html>
3、创建使用ajax异步获取节点的Action--BookAction.java
public class BookAction implements Action { @Override public String execute() throws Exception { return SUCCESS; } public String getTree() throws IOException { String result = "[{ /"attr/": { /"id/" : /"100/"},/"state/": /"open/",/"children/" : [{ /"attr/": { /"id/" : /"101/"},/"data/": /"子节点1/"},{ /"attr/": { /"id/" : /"102/"},/"data/": /"子节点2/"}],/"data/": /"节点1/"},{ /"attr/": { /"id/" : /"200/"},/"data/": /"节点2/"}]"; HttpServletResponse response = ServletActionContext.getResponse(); response.setDateHeader("Expires", 0); response.addHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setContentType("text/plain;charset=UTF-8"); response.getWriter().write(result); response.getWriter().flush(); return null; } }
效果如图：
遇到问题：做好页面后在FireFox3.6下显示正常，但是在IE7下虚线中夹有实线，而且节点不能折叠。开始以为是js文件有问题，找了半天发现是使用了sitemesh的缘故，我的sitemesh页面很简单
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %> <html> <head> <decorator:head /> </head> <body> <decorator:body /> <p><small>使用了sitemesh页面装饰器</small></p> </body> </html>
但是，在IE7下的效果是：
--空行的三角表示已经折叠了，但是下面的节点仍然显示着。。。
在网上搜索了半天也没有找到解决办法，感觉应该是css出问题了，但是在IE下也没办法调试，无奈只能在这个页面不使用sitemesh了：在sitemesh的配置文件中添加一句
<excludes>
<pattern>/jsTree.jsp</pattern>
</excludes>
ok，暂时解决了问题，后续还要注意查找一下冲突的具体原因。
PS：
1、项目中需要获取选取节点的文本，开始采用$("#"+node.id+" a").first().text();来获取，发现获取的文本前面有空格，而且保存到数据库后这个空格变成了乱码，使用Firebug调试发现是“<ins> </ins>”造成的。尝试在程序后台使用String.trim()去掉空格没有成功，想了半天试着使用javascript的trim()函数，令人惊喜的是成功了。所以，获取jsTree节点文本的正确写法是：$("#"+node.id+" a").first().text().trim(); --2011-09-15添加