部屋ごとに並べられた学生のテーブルがあります。すべての部屋には学生がいて、グループに分けられています。
「上」または「下」をクリックして、ルーム内のグループの位置を変更したいと考えています。以下で試してみましたが、非常に汚れているようで、機能していません。ここに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>