我有一张学生桌，按房间排序。每个房间都是学生，分成小组。
我想通过点击“向上”或“向下”来更改房间内群组的位置。我在下面尝试，但它看起来很脏，不起作用。这是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>
答案 0 :(得分：2)
我认为最好在数组中添加一个排序索引来说明元素的顺序，而不是重新排列数组元素本身。
答案 1 :(得分：1)
这将符合您定义的要求。它不考虑房间（这是另一个问题），只是按照您指定的向上或向下移动组中的行，如果有上面或下面的行可以影响位置。
注意：我对你的标记等采取了一些自由，以使我的工作更容易，添加类等和代码 - 打破了数组推送只使用数组常量。
这个解决方案突出了一些CSS在行动时移动/考虑的行 - 如果你不希望它删除那个CSS：）
测试小提琴：http://jsfiddle.net/YpcBt/
MARKUP：
<div id="students">Students Table
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Room</th>
<th>Group</th>
<th>Actions</th>
</tr>
</table>
</div>
CSS：
.rowme {
background-color:pink;
}
.movers {
background-color:lime;
}
CODE：
var students = [{
id: 1,
name: "Student 1",
room_id: 5,
age: 29,
classgroup: 1
}, {
id: 2,
name: "Student 2",
room_id: 5,
age: 22,
classgroup: 1
}, {
id: 3,
name: "Student 3",
room_id: 5,
age: 21,
classgroup: 3
}, {
id: 4,
name: "Student 4",
room_id: 5,
age: 25,
classgroup: 3
}, {
id: 5,
name: "Student 5",
room_id: 3,
age: 23,
classgroup: 2
}, {
id: 6,
name: "Student 6",
room_id: 3,
age: 27,
classgroup: 2
}];
function addRows() {
$("#students").find('table tr.student').each(function (i) {
var cgroup = students[i] ? students[i].classgroup : i + ":notfound";
$(this).data('cgroup', cgroup);
});
}
/* build the HTML */
function build() {
/* 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 ahtml = '';
var i = 0;
for (i = 0; i < students.length; i++) {
ahtml += '<tr class="student">';
ahtml += '<td>' + students[i].id + '</td>';
ahtml += '<td>' + students[i].name + ":" + i + '</td>';
ahtml += '<td>' + students[i].age + '</td>';
ahtml += '<td>' + students[i].room_id + '</td>';
ahtml += '<td>' + students[i].classgroup + '</td>';
ahtml += '<td><a href="#" class="move_up" rel="' + students[i].classgroup + '">UP</a> | <a href="#" class="move_down" rel="' + students[i].classgroup + '">DOWN</a></td>';
ahtml += '</tr>';
}
//html += '</table>';
$("#students").find('table').append(ahtml);
addRows();
};
$(document).ready(function () {
build();
/* move group up */
$('#students').on('click', '.move_up', function () {
$('.rowme, .movers').removeClass('rowme movers');
var row = $(this).parents('tr.student');
var mygroup = row.data("cgroup");
$('#students').find('table tr.student').filter(function () {
return $(this).data('cgroup') == mygroup;
}).addClass('movers').first().prev('.student').addClass('rowme');
var moveGroup = $('.rowme').data('cgroup');
$('#students').find('table tr.student').filter(function () {
return $(this).data('cgroup') == moveGroup;
}).addClass('rowme');
$('.movers').insertBefore($('.rowme:first'));
});
/* move group down */
$('#students').on('click', ".move_down", function () {
$('.rowme, .movers').removeClass('rowme movers');
var row = $(this).parents('tr.student');
var mygroup = row.data("cgroup");
$('#students').find('table tr.student').filter(function () {
return $(this).data('cgroup') == mygroup;
}).addClass('movers').last().next('.student').addClass('rowme');
var moveGroup = $('.rowme').data('cgroup');
$('#students').find('table tr.student').filter(function () {
return $(this).data('cgroup') == moveGroup;
}).addClass('rowme');
$('.movers').insertAfter($('.rowme:last'));
});
});
答案 2 :(得分：0)
正如您所问的那样，移动群组的新工作小提琴是http://jsfiddle.net/acturbo/8nZUx/5/：）
$(document).ready(function() {
/* Build the HTML */
function build() {
var students = new Array();
students.push({ order: 1, id: 1, name: "Student 1", room_id: 5, age: 29, group: 1 });
students.push({ order: 2, id: 2, name: "Student 2", room_id: 5, age: 22, group: 1 });
students.push({ order: 3, id: 3, name: "Student 3", room_id: 5, age: 21, group: 3 });
students.push({ order: 4, id: 4, name: "Student 4", room_id: 5, age: 25, group: 3 });
students.push({ order: 5, id: 5, name: "Student 5", room_id: 3, age: 23, group: 2 });
students.push({ order: 6, id: 6, name: "Student 6", room_id: 3, age: 27, group: 2 });
students.push({ order: 7, id: 7, name: "Student 7", room_id: 5, age: 44, group: 3 });
/* 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 class="'+ students[i].group +'">'; // Assign the groupid to the row as a class for easier managment.
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 class="order-col" data-order="' +
students[i].order +
'"><a href="#" class="move_up">UP</a> | <a href="#" class="move_down">DOWN</a></td>';
html += '</tr>';
}
html += '</table>';
$("#students").html(html);
}
/* Move group up */
$(".move_up").live("click", function() {
var currentRow = $(this).parent().parent();
var currentGroupClass = $(currentRow).attr("class");
var prevRow = $(currentRow).prev();
var prevGroupClass = $(prevRow).attr("class");
if (prevGroupClass == undefined){
return;
}
// Find previous group
while (prevGroupClass == currentGroupClass){
prevRow = $(prevRow).prev();
prevGroupClass = $(prevRow).attr("class");
}
// Move the group
$("."+currentGroupClass).insertBefore( $("."+prevGroupClass).first() );
});
/* Move group down */
$(".move_down").live("click", function() {
var currentRow = $(this).parent().parent();
var currentGroupClass = $(currentRow).attr("class");
var nextRow = $(currentRow).next();
var nextGroupClass = $(nextRow).attr("class");
if (nextGroupClass == undefined){
return;
}
// Find next group
while (nextGroupClass == currentGroupClass){
nextRow = $(nextRow).next();
nextGroupClass = $(nextRow).attr("class");
}
// Move the group
$("."+currentGroupClass).insertAfter( $("."+nextGroupClass).last() );
});
console.clear();
build();
});