Question

说我有这个HTML：

<table>
  <tr>
    <th>Sort Order</th>
    <th>Name</th>
  </tr>

  <tr class="item" id="item_1">
    <td class="sortorder">1</td>
    <td>ABC</td>
  </tr>

  <tr class="item" id="item_2">
    <td class="sortorder">2</td>
    <td>DEF</td>
  </tr>

  <tr class="item" id="item_3">
    <td class="sortorder">3</td>
    <td>XYZ</td>
  </tr>
</table>

我想要的是让用户能够通过拖放对表中的行进行排序（排除带有<th>的第一行，因此所有具有类.item的行）他们，然后更新他们的排序顺序。

例如，如果用户将DEF拖到第一个位置并且ABC替换它，我希望DEF的排序顺序为1，而ABC则代之以2。

如何做到这一点？

如果需要，我可以将所有项目分别存储在javascript数组或对象中，这样我就可以循环遍历它们，并在用户更改排序顺序时更新每个项目的排序顺序。

Answer 1

您可以使用jQuery UI的可排序列表。它在浏览器中得到很好的支持，并有很多选项和回调。他们在他们的示例中使用了一个列表，但您可以轻松地使用表格。

jQuery UI可排序文档 - http://jqueryui.com/demos/sortable/
可排序的教程/指南 - http://www.petefreitag.com/item/736.cfm

示例：

$('table').sortable({
    items : '.item',
    update : function(event, ui)
    {
        alert('sort order updated');

        // Display sort order - also checkout serialize() method in jQuery UI Docs
        alert('sort order: ' + $(this).sortable('toArray').toString());
    }
});

Answer 2

jQuery有几个已编写的表排序插件：

如何通过javascript / jquery对表行列表进行排序？

2 个答案: