重新排序表列？

Question

有谁知道使用 jQuery 对表列重新排序的方法吗？

我的意思不是排序 - 我的意思是动态地在表格中向左或向右移动整个列。

我知道出色的dragtable plugin，但我不需要允许用户移动列的东西，我需要以可配置方式进行重新排序的东西。

Answer 1

这个想法是遍历表的所有行（tr）并交换所需的 td。让我们交换第 2 列和第 4 列：

$('table tr').each(function() {
    var tr = $(this);
    var td1 = tr.find('td:eq(1)'); // indices are zero-based here
    var td2 = tr.find('td:eq(3)');
    td1.detach().insertAfter(td2);
});

我希望这会有所帮助。

Answer 2

这段代码应该适合你。

$("table tr").each(function () {
    $(this).find("td").eq(1).after($(this).find("td").eq(0));
});

---

编辑：如果您将 $(this).find("td") 分配给一个变量，这将提供更好的性能。但是上下文只有一个 tr。所以我认为只要给出这个想法就足够了。

$("table tr").each(function () {
    var rows = $(this).find("td");
    rows.eq(1).after(rows.eq(0));
});

Answer 3

通读dragtable插件的源代码，作者提到实际移动表格列的算法源于comp.lang.javascript新闻组的讨论。讨论在这里：Swapping table columns。

在该线程中，OP 不是询问重新排序的 UI 方面，而是帮助调试他已经编写的用于交换两列的函数。进一步讨论，它发展成代码，使您能够传递特定的列排序，并让代码计算所有必要的交换/移动，以从当前排序到指定的排序。

它不是 jQuery（c.l.js 上的大多数海报都非常不喜欢它以及大多数其他 JS 框架），因此它是您希望可以适应您的需求并包含在任何地方的代码。

Answer 4

我将它与 jQueryUI 结合使用以获得一些很棒的拖放操作：

(function() {
    var local = {};
    local.containment = 'parent';
    local.revert = true;
    $('body thead th').draggable(local);
    $('body thead th').droppable({
        drop: dropZone
    });
    function dropZone(myEvent, myUI ) {
        var head = {};

        head.dragIndex = myUI.draggable.index();
        head.dropIndex = $(this).index();
        head.rows = $(this).closest('thead').find('tr');
        head.cellIndex = head.rows.find('th').length-1;
        head.rows.each(processTableHeaderRows);

        function processTableHeaderRows(index, element) {
            var row = {}

            row.tr = $(element);
            row.drag = row.tr.find('th:eq(' + head.dragIndex + ')');
            row.drop = row.tr.find('th:eq(' + head.dropIndex + ')');
            if (head.dropIndex === head.cellIndex) {
                row.drag.detach().insertAfter(row.drop);
            } else {
                row.drag.detach().insertBefore(row.drop);
            }
        }
        // Same thing here for td instead of th
        $(this).closest('table').find('tbody > tr').each(processRows);
        function processRows(index, element) {
            var row = {};

            row.tr = $(element);
            row.drag = row.tr.find('td:eq(' + head.dragIndex + ')');
            row.drop = row.tr.find('td:eq(' + head.dropIndex + ')');
            if (head.dropIndex === head.cellIndex) {
                row.drag.detach().insertAfter(row.drop);
            } else {
                row.drag.detach().insertBefore(row.drop);
            }
        }
    }
})();

试图让它在jsFiddle 中工作，但我做不到。不过可以在my website 上工作！