struts2 + jquery ajax simpleTree

最新推荐文章于 2024-09-20 11:14:58 发布
Tankywang
最新推荐文章于 2024-09-20 11:14:58 发布
阅读量136
点赞数
分类专栏： Jquery 文章标签： Ajax jQuery json HTML Struts ViewUI
本文链接：https://blog.csdn.net/Tankywang/article/details/83774974
版权
Jquery 专栏收录该内容
1 篇文章 0 订阅
订阅专栏

<%@ 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>