2013-05-19 5 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> 

Здесь я хочу переместить строки, которые проверяются из таблицы 1 в таблице 2, когда я нажимаю на оных и точно так же перемещать строки, которые проверяются из таблицы 2 в таблице 1, когда я нажимаю на Вытащите , Я нашел аналогичный пример по этой ссылке http://jsfiddle.net/AkVTw/1/, но это не работает в моей jsp.

Было бы очень полезно, если вы можете предложить мне пример кода для реализации этой функции, используя jQuery/javascript.

Я также хотел бы знать, можно ли реализовать эту функциональность, используя s: optiontransferselect тег в стойках 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

Когда вы помещаете кнопки в теги формы. Вы должны добавить «return false»; от линии до конца событий кнопки. Потому что после пожара события клика также начинается отправка формы. Поэтому, когда вы добавляете «return 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"); 
}); 
Смежные вопросы