2013-05-19 19 views
1

我有兩個表顯示兩個列表。這是我的jsp如何在struts 2中將一個表的內容轉移到另一個表中?

<%@page contentType="text/html;charset=UTF-8"language="java"pageEncoding="UTF-8"%> 
<%@taglib prefix="s"uri="/struts-tags"%> 
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>Insert title here</title> 

</head> 
<body> 
<s:form name="tableForm"method="post"> 
<th> 
<s:submit action="verify" key="Add"></s:submit> 

</th> 
<table id="one"> 
<thead> 
<tr> 
<th ></th> 
<th> Id</th> 
<th>Name</th> 
<th>Status</th> 
<th>Type</th> 
<th>RollUp Type</th> 
<th>System</th> 
</tr> 
</thead> 
    <tbody> 
    <s:iterator value="formList1"> 
     <tr> 
     <td><s:checkbox name="checked" fieldValue="%{#attr.ID}" theme="simple" ></s:checkbox> 
</td> 
<td><s:property value="ID"/></td> 
<td><s:property value="NAME"/></td> 
<td><s:property value="STATUS"/></td> 
<td><s:property value="TYPE"/></td> 
<td><s:property value="ROLLUPTYPE"/></td> 
<td><s:property value="UNIT"/></td> 

     </tr> 
     </s:iterator> 
    </tbody> 
</table> 

<table id="two"> 
<thead> 
<tr> 
<th ></th> 
<th> Id</th> 
<th>Name</th> 
<th>Status</th> 
<th>Type</th> 
<th>RollUp Type</th> 
<th>System</th> 
</tr> 
</thead> 
    <tbody> 
    <s:iterator value="formList2"> 
     <tr> 
     <td><s:checkbox name="checked" fieldValue="%{#attr.ID}" theme="simple" ></s:checkbox> 
</td> 
<td><s:property value="ID"/></td> 
<td><s:property value="NAME"/></td> 
<td><s:property value="STATUS"/></td> 
<td><s:property value="TYPE"/></td> 
<td><s:property value="ROLLUPTYPE"/></td> 
<td><s:property value="UNIT"/></td> 

     </tr> 
     </s:iterator> 
    </tbody> 

</table> 
<s:a href="#" id="add">add &gt;&gt;</s:a> 
    <s:a href="#" id="remove">&lt;&lt; remove</s:a> 
</s:form > 
</body> 
</html> 

在這裏,我想,當我點擊添加和從表2中籤表1中的行,當我點擊刪除同樣動動那從表1覈對表2的行。我在這個鏈接http://jsfiddle.net/AkVTw/1/上找到了一個類似的例子,但它在我的jsp中無法使用。

如果你可以使用jQuery/javascript爲我推薦一些示例代碼來實現這個功能將會非常有幫助。

我還想知道是否有可能使用來實現此功能s:optiontransferselect標籤在struts 2中?

回答

4

你可以做到這一點與jQuery容易。 Jquery具有這種類型功能的「appendTo」功能。

$(document).ready(function(){ 
    $('#add').on("click", function(){ 
     $('#one tbody input:checked').parent().parent().appendTo("#two tbody"); 
    }); 

    $('#remove').on("click", function(){ 
     $('#two tbody input:checked').parent().parent().appendTo("#one tbody"); 
    }); 
}); 

我創建了Demo Link。你可以測試它。

+0

這工作正是我想要的,但當我把它放在

它不起作用,爲什麼這樣? – user2077648

+0

@ user2077648因爲他的代碼取決於你的表格的結構,而我的表格沒有。我的答案也是第一個,他的基本上和我的一樣。如果您嘗試在下面使用我的答案,它應該可以解決您的問題。 – MorningDew

+2

將按鈕放入窗體標記中時。您必須添加「返回false」;行結束按鈕事件。因爲點擊事件觸發後,也就是表單提交正在啓動。因此,當您添加「返回false」時,您將取消表單提交事件。 –

2

如果您想簡單地克隆選中的行並將它們和表1同時移動到表2,則可以使用.clone(),或者如果您想將它們從第一個表中移出並移動它們到第二個表,你可以使用appendTo(); 的jsfiddle:http://jsfiddle.net/eFaca/

$("#addRows").click(function(){ 
$("#table").find("input:checked").closest("tr").appendTo("#table2"); 
}); 
$("#removeRows").click(function(){ 
$("#table2").find("input:checked").closest("tr").appendTo("#table"); 
}); 
相關問題