0
我有一張學生表，按房間排序。在每個房間都是學生，分成小組。如何移動數組中的一組項目？
我想通過點擊「向上」或「向下」來改變房間內的組的位置。我在下面嘗試了一下，但它看起來很骯髒，並且不起作用。這裏的jsFiddle：http://jsfiddle.net/vHhxV/
我想有一個簡短，乾淨，簡單的解決方案。
學生的表：
# Before moving "Group 2" down
Id | Name | Age | Room | Group | Actions
-----------------------------------------------
5 | Student 5 | 23 | 3 | 2 | UP | DOWN
6 | Student 6 | 27 | 3 | 2 | UP | DOWN // <- *Click*
1 | Student 1 | 29 | 5 | 1 | UP | DOWN
2 | Student 2 | 22 | 5 | 1 | UP | DOWN
3 | Student 3 | 21 | 5 | 3 | UP | DOWN
4 | Student 4 | 25 | 5 | 3 | UP | DOWN
# After moving "Group 2" down
Id | Name | Age | Room | Group | Actions
-----------------------------------------------
1 | Student 1 | 29 | 5 | 1 | UP | DOWN
2 | Student 2 | 22 | 5 | 1 | UP | DOWN
5 | Student 5 | 23 | 3 | 2 | UP | DOWN // <- ID 5 and ID 6 moved down,
6 | Student 6 | 27 | 3 | 2 | UP | DOWN // because both are in Group 2.
3 | Student 3 | 21 | 5 | 3 | UP | DOWN
4 | Student 4 | 25 | 5 | 3 | UP | DOWN
我嘗試（同：http://jsfiddle.net/vHhxV/）
<script language="text/javascript">
$(document).ready(function() {
/* Build the HTML */
function build() {
var students = new Array();
students.push({ id: 1, name: "Student 1", room_id: 5, age: 29, group: 1 });
students.push({ id: 2, name: "Student 2", room_id: 5, age: 22, group: 1 });
students.push({ id: 3, name: "Student 3", room_id: 5, age: 21, group: 3 });
students.push({ id: 4, name: "Student 4", room_id: 5, age: 25, group: 3 });
students.push({ id: 5, name: "Student 5", room_id: 3, age: 23, group: 2 });
students.push({ id: 6, name: "Student 6", room_id: 3, age: 27, group: 2 });
/* Sort students by room_id */
students.sort(function(a, b) {
return ((a.room_id < b.room_id) ? -1 : ((a.room_id > b.room_id) ? 1 : 0));
});
var html = '<table>';
html += '<tr><th>Id</th><th>Name</th><th>Age</th><th>Room</th><th>Group</th><th>Actions</th></tr>';
for (var i = 0; i < students.length; i++) {
html += '<tr>';
html += '<td>'+ students[i].id +'</td>';
html += '<td>'+ students[i].name +'</td>';
html += '<td>'+ students[i].age +'</td>';
html += '<td>'+ students[i].room_id +'</td>';
html += '<td>'+ students[i].group +'</td>';
html += '<td><a href="#" class="move_up" rel="' +
students[i].group +
'">UP</a> | <a href="#" class="move_down" rel="' +
students[i].group +
'">DOWN</a></td>';
html += '</tr>';
}
html += '</table>';
$("#students").html(html);
}
/* Move group up */
$(".move_up").live("click", function() {
var group = $(this).attr("rel");
alert("move up: " + group);
/**
What to do here?
Idea:
1. Build an array of the group items (to move up)
2. Build an array of the parent group items (to move down)
3. Re-build the students array, like:
var group = new Array();
// Collect all students of the group that has to move up
var parent_group = new Array();
// Collect all students of the parent group that has to
// move down or be switched with the selected group.
var students_tmp = new Array(); // New students array
var ids = new Array(); // Existing ids
for (var i = 0; i < students.length; i++) {
if (students[i].group == group) {
// Do nothing, because students of this group
// will be added below.
} else if (students[i].group == parent_group) {
// Add group before parent group
for (var k = 0; k < group.length; k++) {
// Add, if not exists
if (jQuery.inArray(group[k].id, ids) == -1) {
students_tmp.push(group[k]); // Add student
ids.push(group[k].id); // Add students id
}
}
// Add parent group after group
for (var k = 0; k < parent_group.length; k++) {
// Add, if not exists
if (jQuery.inArray(parent_group[k].id, ids) == -1) {
students_tmp.push(parent_group[k]); // Add student
ids.push(parent_group[k].id); // Add students id
}
}
} else {
// Add student if not in group or parent group
if (jQuery.inArray(students[i].id, ids) == -1) {
students_tmp.push(students[i]);
ids.push(students[i].id);
}
}
}
students = students_tmp;
build();
*/
});
/* Move group down */
$(".move_down").live("click", function() {
var group = $(this).attr("rel");
alert("move down: " + group);
/**
What to do here?
Idea:
- Same as above (move_up), just reversed
*/
});
build();
});
</script>
<div id="students">...</div>
當您在每行上都有操作項時，您的用戶界面將會混淆不清，無法在組級別上移動。 – 2013-05-08 14:15:02
你說得對。這只是一個虛擬的，但我稍後會改變可用性。謝謝你的建議！ – 2013-05-08 18:08:04