根据网上查询资料,经过测试,完成一个简单的树,涉及以下三个页面:tree.jsp
一、tree.jsp页面关键代码
1、引入文件
<link href="bootstrap-3.3.4.css" rel="stylesheet">
<link href="css/bootstrap-treeview.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="js/bootstrap-treeview.js"></script>
2、tree容器
<div id="treeview" ></div>
3、js代码
<script type="text/javascript">
function getNodesData() {//此函数请求后台数据
var data=null;
$.ajax({
url : "tree!getNodesData",
type : "post",
async : false,//同步
dataType : "json",
success : function(jsonData) {
data = jsonData;
}
});
return data;
}
//选择名称为treeview的DIV容器,加载树
$("#treeview")
.treeview({
data: "["+getNodesData()+"]",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
collapseIcon: "glyphicon glyphicon-minus",
expandIcon: "glyphicon glyphicon-plus",
color: "#000000",
backColor: "#FFFFFF",
showIcon: true,
showCheckbox: false,
onhoverColor: "#E8E8E8",
showBorder: true,
showTags: true,
highlightSelected: true,
highlightSearchResults: false,
selectedBackColor: "#8D9CAA",
levels: 3,
tags: ['available'],
onNodeSelected: function(event, data) { //选择节点后的事件处理代码
alert("Hello");
}
});
二、Class类文件,实现数据 读取,此处直接返回一个固定值,需进一步书写
package com.kehai.action;
import javax.servlet.http.HttpServletRequest;
import net.sf.json.JSONObject;
import org.apache.struts2.interceptor.ServletRequestAware;
import com.opensymphony.xwork2.ActionSupport;
public class TreeAction extends ActionSupport implements ServletRequestAware{
private static final long serialVersionUID = 1L;
private HttpServletRequest request;
private String result;
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public String getNodesData(){
result="{text:'p1'}" ;
JSONObject json = JSONObject.fromObject(result);
result = json.toString();
return SUCCESS;
}
public HttpServletRequest getRequest() {
return request;
}
@Override
public void setServletRequest(HttpServletRequest request) {
this.request=request;
}
}
三、struts.xml文件
<action name="tree" class="com.kehai.action.TreeAction">
<result type="json">
<param name="root">result</param>
</result>
</action>