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

发布于 2024-11-29 20:42:05 字数 816 浏览 0 评论 0原文

假设我有这个 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>

我想要的是用户能够对表中的行进行排序（不包括带有 的第一行，因此具有类 < 的所有行code>.item) 通过拖放它们，然后更新它们的排序顺序。

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

这怎么能做到呢？

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

原文

Say I have this 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>

What I want is for a user to be able to sort the rows in the table (excluding the first row with the <th>s, so all rows with the class .item) by dragging and dropping them, and then update their sort orders.

E.g if user drags DEF to first position and ABC replaces it, I want DEF's sort order to say 1, and ABC's to say 2 instead.

How can this be done?

If needed, I can have all the items stored seperately in a javascript array or object so I can loop over them and update each item's sort order whenever the user changes the sort order.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

归途 2024-12-06 20:42:05

您可以使用 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());
    }
});

You can use jQuery UI's sortable list. Its well supported across browsers and has many options and callbacks. They use a list in their example but you could just as easily use a table.

jQuery UI Sortable Documentation - http://jqueryui.com/demos/sortable/
Sortable tutorial/guide - http://www.petefreitag.com/item/736.cfm

Example:

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

回复收藏 0 原文