[英]How to generate sequence id and move table rows up or down and dynamically adjusting each row's sequence ID?
1. I have two tables table1 and table2, here when you click Add button, it moves the rows that are checked from table1 to table2. 1.我有两个表table1和table2,当你点击添加按钮时,它会将检查的行从table1移动到table2。 I have to generate a sequence Id ranging from 1 to n from top to bottom as the contents get added to table2 from table1.当内容从 table1 添加到 table2 时,我必须从上到下生成一个从 1 到 n 的序列 ID。 How do I generate this sequence id as I move rows from table1 to table2 ?当我将行从 table1 移动到 table2 时,如何生成这个序列 ID?
2. Secondly, I have to shift the rows in table2 up and down using the UP & DOWN buttons respectively. 2.其次,我必须分别使用 UP 和 DOWN 按钮来上下移动 table2 中的行。 The issue is that I need to change the sequence values depending on where the table rows are moved to.问题是我需要根据表行移动到的位置来更改序列值。 For example: if I move row down 1 row, the sequence value must change from 1 to 2. However, the first rows sequence value needs to change from 2 to 1, so the sequence order from 1 to n is always maintained, regardless of how of the rows are moved around.例如:如果我将 row 向下移动 1 行,则序列值必须从 1 变为 2。但是,第一行的序列值需要从 2 变为 1,因此始终保持从 1 到 n 的序列顺序,无论如何移动行。
Any ideas would be greatly appreciated.任何想法将不胜感激。
This is the jsp :这是jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#add').on("click", function(){
$('#one tbody input:checked').parent().parent().clone().appendTo("#two tbody");
return false;
});
$('#remove').on("click", function(){
$('#two tbody input:checked').parent().parent().remove();
return false;
});
$(".up,.down").click(function(){
var row = $('#two tbody input:checked').parents("tr:first");
if ($('#two tbody input:checked').is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
//return false;
});
});
</script>
</head>
<body>
<table id="one" style="border:1px solid red;">
<caption>Table 1</caption>
<thead>
<tr>
<th></th>
<th >ID</th>
<th> Name</th>
<th>System</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>12</td>
<td>Sam</td>
<td>FSS</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>87</td>
<td>Harry</td>
<td>MSS</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>23</td>
<td>Rita</td>
<td>MVV</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>65</td>
<td>Tom</td>
<td>RDD</td>
</tr>
</tbody>
</table>
<table id="two" style="border:1px solid green;">
<caption>Table 2</caption>
<thead>
<tr>
<th></th>
<th >ID</th>
<th>Sequence No</th>
<th>Name</th>
<th>System</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br><hr><br>
<button id="add">Add</button>
<button id="remove">Remove</button>
<button class="up">UP</button>
<button class="down">DOWN</button>
</body>
</html>
One more thing, here when I click on either UP or DOWN button the row checked moves only down, dont know why?还有一件事,当我点击向上或向下按钮时,选中的行只会向下移动,不知道为什么?
you can do this:你可以这样做:
$('#add').on("click", function(){
var clone=$('#one tbody input:checked').parent().parent().clone();
clone.each(function(){
$(this).appendTo("#two tbody").attr("id",$(this).index());
});
return false;
});
$('#remove').on("click", function(){
$('#two tbody input:checked').parent().parent().remove();
$('#two tbody tr').each(function(){
$(this).attr("id",$(this).index());
});
return false;
});
$(".up,.down").click(function(){
var row = $('#two tbody input:checked').parent().parent();
if ($(this).is(".up")) {
row.each(function(){
var previndex=$(this).prev().index();
if(previndex>=0){
var rowindex=$(this).index();
$(this).attr("id",previndex);
$(this).prev().attr("id",rowindex);
$(this).insertBefore($(this).prev());
}
});
} else {
$(row.get().reverse()).each(function(){
var nextindex=$(this).next().index();
if(nextindex>=0){
var rowindex=$(this).index();
$(this).attr("id",nextindex);
$(this).next().attr("id",rowindex);
$(this).insertAfter($(this).next());
}
});
}
});
I tried to comment the code as best I can to explain what's going on:我试图尽可能地注释代码以解释发生了什么:
jQuery(function($) {
var tableOne = $('#one'),
tableTwo = $('#two'),
sequenceIndex = $('.sequence').index(),
moved = [];
function addChecked(e) {
tableOne.find(':checked').each(function() {
var row = $(this).closest('tr'),
clone;
// check if the row we're trying to
// move has already been moved
if ($.inArray(row[0], moved) < 0) {
// cache this row so we
// know it's been moved
moved.push(row[0]);
// clone and append to table2.
// store original row as data
// so that we can remove from
// cache when rows are removed
clone = row.clone()
.data('orig', row[0])
.appendTo(tableTwo.find('tbody'));
// because table1 doesn't have the same
// number of columns as table2 we have to
// create an extra column within the row
// to hold the sequence num
$('<td/>').insertAfter(clone.find('td').eq(sequenceIndex-1));
}
});
updateSequence();
e.preventDefault();
}
function removeChecked(e) {
tableTwo.find(':checked').each(function() {
var row = $(this).closest('tr'),
// get the index of this row within the cache
position = moved.indexOf(row.data('orig'));
// remove this row from the cache
moved.splice(position, 1);
// remove this row from the DOM
row.remove();
});
updateSequence();
e.preventDefault();
}
function moveUpDown(e) {
var button = $(this),
isUp = button.hasClass('up'),
rows = tableTwo.find(':checked').closest('tr');
if (!isUp) {
// if we're going down we need to
// reverse the row array so that the
// rows don't just switch around
Array.prototype.reverse.call(rows);
}
rows.each(function() {
var checked = $(this),
nextPrev = checked[isUp ? 'prev' : 'next']();
// move the row
if (nextPrev.length) {
checked[isUp ? 'insertBefore' : 'insertAfter'](nextPrev);
}
});
updateSequence();
e.preventDefault();
}
function updateSequence() {
tableTwo.find('tr').each(function() {
var row = $(this),
sequence = row.index()+1;
row.find('td').eq(sequenceIndex).text(sequence);
});
}
$('#add').on('click', addChecked);
$('#remove').on('click', removeChecked);
$('.up, .down').on('click', moveUpDown);
});
I had to modify the HTML slightly also.我还必须稍微修改 HTML。 I just added a .sequence
class to the Sequence Num table header.我刚刚在 Sequence Num 表头中添加了一个.sequence
类。 You can see this working here: http://jsbin.com/ocesop/1/edit你可以在这里看到这个工作:http: //jsbin.com/ocesop/1/edit
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.