struts2 + jquery ajax simpleTree
邵麒
<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>欢迎登录</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style>
body
{
font: normal 12px arial, tahoma, helvetica, sans-serif;
margin:0;
padding:20px;
}
.simpleTree
{
margin:0;
padding:0;
/*
overflow:auto;
width: 250px;
height:350px;
overflow:auto;
border: 1px solid #444444;
*/
}
.simpleTree li
{
list-style: none;
margin:0;
padding:0 0 0 34px;
line-height: 14px;
}
.simpleTree li span
{
display:inline;
clear: left;
white-space: nowrap;
}
.simpleTree ul
{
margin:0;
padding:0;
}
.simpleTree .root
{
margin-left:-16px;
background: url(simpleTree/images/root.gif) no-repeat 16px 0 #ffffff;
}
.simpleTree .line
{
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(simpleTree/images/line_bg.gif) 0 0 no-repeat transparent;
}
.simpleTree .line-last
{
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(simpleTree/images/spacer.gif) 0 0 no-repeat transparent;
}
.simpleTree .line-over
{
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(simpleTree/images/line_bg_over.gif) 0 0 no-repeat transparent;
}
.simpleTree .line-over-last
{
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(simpleTree/images/line_bg_over_last.gif) 0 0 no-repeat transparent;
}
.simpleTree .folder-open
{
margin-left:-16px;
background: url(simpleTree/images/collapsable.gif) 0 -2px no-repeat #fff;
}
.simpleTree .folder-open-last
{
margin-left:-16px;
background: url(simpleTree/images/collapsable-last.gif) 0 -2px no-repeat #fff;
}
.simpleTree .folder-close
{
margin-left:-16px;
background: url(simpleTree/images/expandable.gif) 0 -2px no-repeat #fff;
}
.simpleTree .folder-close-last
{
margin-left:-16px;
background: url(simpleTree/images/expandable-last.gif) 0 -2px no-repeat #fff;
}
.simpleTree .doc
{
margin-left:-16px;
background: url(simpleTree/images/leaf.gif) 0 -1px no-repeat #fff;
}
.simpleTree .doc-last
{
margin-left:-16px;
background: url(simpleTree/images/leaf-last.gif) 0 -1px no-repeat #fff;
}
.simpleTree .ajax
{
background: url(simpleTree/images/spinner.gif) no-repeat 0 0 #ffffff;
height: 16px;
display:none;
}
.simpleTree .ajax li
{
display:none;
margin:0;
padding:0;
}
.simpleTree .trigger
{
display:inline;
margin-left:-32px;
width: 28px;
height: 11px;
cursor:pointer;
}
.simpleTree .text
{
cursor: default;
}
.simpleTree .active
{
cursor: default;
background-color:#F7BE77;
padding:0px 2px;
border: 1px dashed #444;
}
#drag_container
{
background:#ffffff;
color:#000;
font: normal 11px arial, tahoma, helvetica, sans-serif;
border: 1px dashed #767676;
}
#drag_container ul
{
list-style: none;
padding:0;
margin:0;
}
#drag_container li
{
list-style: none;
background-color:#ffffff;
line-height:18px;
white-space: nowrap;
padding:1px 1px 0px 16px;
margin:0;
}
#drag_container li span
{
padding:0;
}
#drag_container li.doc, #drag_container li.doc-last
{
background: url(simpleTree/images/leaf.gif) no-repeat -17px 0 #ffffff;
}
#drag_container .folder-close, #drag_container .folder-close-last
{
background: url(simpleTree/images/expandable.gif) no-repeat -17px 0 #ffffff;
}
#drag_container .folder-open, #drag_container .folder-open-last
{
background: url(simpleTree/images/collapsable.gif) no-repeat -17px 0 #ffffff;
}
.contextMenu
{
display:none;
}
</style>
<script type="text/javascript" src="<%=basePath %>simpleTree/js/jquery.js"></script>
<script type="text/javascript" src="<%=basePath %>simpleTree/js/jquery.simple.tree.js"></script>
<script type="text/javascript">
var simpleTreeCollection;
$(document).ready(function(){
simpleTreeCollection = $('.simpleTree').simpleTree({
autoclose: true,
afterClick:function(node){
//alert("id-"+node.attr('id')+"text-"+$('span:first',node).text());
var treeId=node.attr('id');
$.ajax({
type: "post",
dataType: "json",
data: {treeId: treeId},
url: "treeAjax!loadTree.do",
success: function(data){
if(data.treeInfo.treeInfo.treeId==1)
{
$('#afartherId').val(data.treeInfo.treeId);
$('#treeName').val("");
$('#description').val("");
}
else
{
$('#afartherId').val(data.treeInfo.treeInfo.treeId);
$('#treeName').val(data.treeInfo.treeName);
$('#description').val(data.treeInfo.descripe);
}
}
});
},
/*afterDblClick:function(node){
//alert("text-"+$('span:first',node).text());
},
afterMove:function(destination, source, pos){
//alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos);
},*/
afterAjax:function()
{
//alert('Loaded');
},
animate:true
//,docToFolderConvert:true
});
/*$.ajax({
type: "post",
dataType: "json",
data: {},
url: "treeAjax!load.do",
success: function(data){
alert(data);
$("#simTree").html(data);
//$('.simpleTree').simpleTree();
}
}); */
$("#addTree").click(function(){
var fartherId=$("#afartherId").val();
var treeName=$("#treeName").val();
var description=$("#description").val();
$("#"+fartherId).html("");
//$("#simTree").html("");
//alert($("#simTree").html());
$.ajax({
type: "post",
dataType: "json",
data: {fartherId: fartherId,treeName:treeName,description:description},
url: "treeAjax!addTree.do",
success: function(data){
// alert("添加成功！"+fartherId+"-"+data);
$("#"+fartherId).html(data);
//$("#simTree").html(data);
$('.simpleTree').simpleTree({
autoclose: true,
afterClick:function(node){
//alert("id-"+node.attr('id')+"text-"+$('span:first',node).text());
var treeId=node.attr('id');
$.ajax({
type: "post",
dataType: "json",
data: {treeId: treeId},
url: "treeAjax!loadTree.do",
success: function(data){
if(data.treeInfo.treeInfo.treeId==1)
{
$('#afartherId').val(data.treeInfo.treeId);
$('#treeName').val("");
$('#description').val("");
}
else
{
$('#afartherId').val(data.treeInfo.treeInfo.treeId);
$('#treeName').val(data.treeInfo.treeName);
$('#description').val(data.treeInfo.descripe);
}
}
});
},
/*afterDblClick:function(node){
//alert("text-"+$('span:first',node).text());
},
afterMove:function(destination, source, pos){
//alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos);
},*/
afterAjax:function()
{
//alert('Loaded');
},
animate:true
//,docToFolderConvert:true
});
}
});
});
});
</script>
</head>
<body>
<s:form action="tree.do" method="post">
<div class="div_table">
<table class="table_query" border="1" cellspacing="0"
cellpadding="0">
<tr >
<td class="td_query" align="left" valign="middle" style="width: 240px">
<div style="overflow: auto;height:300px;">
<ul class="simpleTree" id="simTree">
<s:property value="treeString" escape="false"/>
</ul>
</div>
</td>
<td class="td_query" valign="top" align="left" >
<table align="center">
<h1>添加treeNode</h1>
<tr>
<td>父节点Id：<s:textfield name="afartherId" id="afartherId" readonly="true"/></td>
</tr>
<tr>
<td>节点名称：<s:textfield name="treeName" id="treeName"/></td>
</tr>
<tr>
<td>描述：<s:textfield name="description" id="description"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="添加" id="addTree" />
</td>
</tr>
<tr style="text-align: center; font-color:red">
<td colspan="2">
<s:fielderror cssClass="error"/>
<s:actionerror cssClass="error"/>
<s:actionmessage cssClass="error"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</s:form>
</body>
</html>
类似资料：