使用Jquery，Ajax+Struts+Spring+Ibatis写的一个无限级树，供大家参考一上
日期：2014-05-16 浏览次数：20804 次
使用Jquery，Ajax+Struts+Spring+Ibatis写的一个无限级树，供大家参考一下
先看看jsp页面，tree.jsp,Code如下：
再就是javascript，tree.js,如下:
先看看jsp页面，tree.jsp,Code如下：
<%@ page contentType="text/html;charset=UTF-8" %>
<%
String context = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>树状菜单</title>
<link type="text/css" href="<%=context%>/css/tree/tree.css" rel="stylesheet" rev="stylesheet" />
<%@ include file="/common/commonTop.jsp"%>
<script type="text/javascript" src="<%=context%>/script/tree/tree.js"></script>
<script type="text/javascript">
function locationHref(functionID,functionUrl,forwardUrl,functionUrlParam){
if(selectHrefID!=""){
document.getElementById(selectHrefID+"_href").style.background="";
}
selectHrefID = functionID;
document.getElementById(functionID+"_href").style.background="#0CA4CF";
document.getElementById(functionID+"_href").target='mainFrame';
document.getElementById("functionUrl").value=functionUrl;
document.getElementById("functionUrlParam").value=functionUrlParam;
document.getElementById(functionID+"_href").href=forwardUrl+"?functionUrl="+functionUrl+"&functionUrlParam="+functionUrlParam;
}
</script>
</head>
<body leftmargin="10" topmargin="0">
<input type="hidden" id="functionUrl" value="">
<input type="hidden" id="functionUrlParam" value="">
<input type="hidden" name="action" id="action" value="treeQuery">
<input type="hidden" name="url" id="url" value="<%=context%>/admin/treeAction.do">
<table>
<tr>
<td>
<div id="selectStoreType" style="display: none">
<select id="selectType"></select>
</div>
</td>
</tr>
<tr>
<td>
<div id="selectMsg"></div>
</td>
</tr>
<tr>
<td>
<div id="treemenu" style="width:100%; height:auto;">
<div id="tree" style="display: none" align="left">
<img src="<%= context %>/images/ajax-loader.gif">请稍等...
</div>
</div>
</td>
</tr>
</table>
</body>
</html>再就是javascript，tree.js,如下:
var selectTypeID = "";
$(document).ready(function(){
storeTypeAjax();
$("#selectType").change(function(){
$("#tree").html(" <img src=\"<%= context %>/images/ajax-loader.gif\">请稍等...");
selectTypeID = $("#selectType").val();
treeNodeAjax("0","tree",selectTypeID);
});
});
//用于控制超级链接的背景色
var selectHrefID = "";
//异步生成树
function treeNodeAjax(functionID,nodeID,storeTypeID){
$("#selectMsg").hide();
$("#"+nodeID).show();
$.ajax({
type: "post",//使用get方法访问后台
dataType: "javascript",//返回文本格式的数据
url: $("#url").val(),//要访问的后台地址
data: "action="+$("#action").val()+"&function_id="+functionID+"&store_type_id="+storeTypeID,//要发送的数据
complete :function(){$(nodeID).show();},//AJAX请求完成时显示提示
error:function(msg){alert('加载错误');},
success: function(msg){//msg为返回的数据，在这里做数据绑定
if(msg.indexOf("1003")!=-1){
$("#selectMsg").html("<font color=red> "+msg+"</font>");
$("#selectMsg").show();
$("#"+nodeID).hide();
}else{
var msgarray = msg.split("|");
var htmlNode = "";
for(var i=0;i<msgarray.length;i++){
var msgelement = msgarray[i].split(",");
htmlNode += creatTreeNode(msgelement[0],msgelement[1],msgelement[2],msgelement[3],msgelement[4],msgelement[5],msgelement[6]
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
