如何在数组中移动一组项目？

Question

I've a table of students, sorted by room. In every room are students, divided into groups.

I'd like to change the position of a group within a room by clicking "up" or "down". I've an attempt below, but it seems to be very dirty and is not working. Here's the jsFiddle : http://jsfiddle.net/vHhxV/

I'd like to have a short, clean and simple solution.

Table of students:

# 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

My attempt (same as: 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>

Answer 1

我认为最好在数组中添加一个顺序索引来说明元素的顺序，而不是重新排列数组元素本身。

Answer 2

This will meet your defined requirements. It does NOT consider the room (that is another question), and simply moves the rows in a group as you have specified up or down IF there are rows above or below that can effect the position.

Note: I took some liberty with your markup etc. to make my job easier, added classes etc. and code - whacked that array push thing to just use an array constant.

This solution highlights the rows moved/considered with some CSS while it works - remove that CSS if you do not wish it :)

Test fiddle: 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'));
    });
});

Answer 3

A NEW working fiddle to move groups, exactly as you asked, is http://jsfiddle.net/acturbo/8nZUx/5/ :)

jQuery :

$(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();
});