javascript - 对彼此链接的多行进行排序(包括 fiddle 示例)

Question

如何使用 sorttable.js 对多行(带有 colspan 的行，链接到目标排序行)进行排序

我尝试稍微修改源代码以支持多行，但它破坏了 row 数据的 Array 中包含的数据的基本排序。这是 sorttable.js (my attempt at multiple rows) 的修改版本

我想要实现的目标

<table id="data_table" class="sortable">
    <colgroup>
        <col clas="item1" />
        <col class="item2" />
        <col class="item3" />
    </colgroup>
    <thead>
        <th class="item1">Item 1</th>
        <th class="item2">Item 2</th>
        <th class="item3">Item 3</th>
    </thead>
    <tbody>
        <tr id="row-item-0" class="item_row" data-sorttable_row_key="0" data-sorttable_original="true" >
            <td class="item1">Data 1</td>
            <td class="item2">Data 2</td>
            <td class="item3">Data 3</td>
        </tr>
        <tr id="row-item-0-1" class="item_row"  data-sorttable_row_key="0" data-sorttable_original="false" >
            <td colspan="3">
                Details regarding Data 1,2,3
            </td>
        </tr>
        <tr id="row-item-1" class="item_row" data-sorttable_row_key="1" data-sorttable_original="true" >
            <td class="item1">Data 4</td>
            <td class="item2">Data 5</td>
            <td class="item3">Data 6</td>
        </tr>
        <tr id="row-item-1-1" class="item_row"  data-sorttable_row_key="1" data-sorttable_original="false" >
            <td colspan="3">
                Details regarding Data 4,5,6
            </td>
        </tr>
        <tr id="row-item-2" class="item_row" data-sorttable_row_key="2" data-sorttable_original="true" >
            <td class="item1">Data 1</td>
            <td class="item2">Data 2</td>
            <td class="item3">Data 3</td>
        </tr>
        <tr id="row-item-2-1" class="item_row"  data-sorttable_row_key="2" data-sorttable_original="false" >
            <td colspan="3">
                Details regarding Data 1,2,3
            </td>
        </tr>
        <tr id="row-item-3" class="item_row" data-sorttable_row_key="3" data-sorttable_original="true" >
            <td class="item1">Data 4</td>
            <td class="item2">Data 5</td>
            <td class="item3">Data 6</td>
        </tr>
        <tr id="row-item-3-1" class="item_row"  data-sorttable_row_key="3" data-sorttable_original="false" >
            <td colspan="3">
                Details regarding Data 4,5,6
            </td>
        </tr>
    </tbody>
</table>

Sortable Multiple Rows (jsfiddle) (看起来它可以工作，因为它可以带有排序的链接行，但它不能，因为排序完全不正确)

Sortable Multiple Rows (using single rows, doesn't work) (jsfiddle)

Pastebin for Sortable Code used in above JSFiddles

支持什么

<table id="data_table" class="sortable">
    <colgroup>
        <col clas="item1" />
        <col class="item2" />
        <col class="item3" />
    </colgroup>
    <thead>
    <tr>
        <th class="item1 sorttable_alpha">Item 1</th>
        <th class="item2 sorttable_alpha">Item 2</th>
        <th class="item3 sorttable_alpha">Item 3</th>
    </tr>
    </thead>
    <tbody>
        <tr id="row-item-0" class="item_row">
            <td class="item1">Data 1</td>
            <td class="item2">Data 2</td>
            <td class="item3">Data 3</td>
        </tr>
        <tr id="row-item-1" class="item_row">
            <td class="item1">Data 4</td>
            <td class="item2">Data 5</td>
            <td class="item3">Data 6</td>
        </tr>
      <tr id="row-item-2" class="item_row">
            <td class="item1">Data 1</td>
            <td class="item2">Data 2</td>
            <td class="item3">Data 3</td>
        </tr>
        <tr id="row-item-3" class="item_row">
            <td class="item1">Data 4</td>
            <td class="item2">Data 5</td>
            <td class="item3">Data 6</td>
        </tr>
    </tbody>
</table>

Sortable using the default code (jsfiddle)

Pastebin for above JsFiddle (对原始内容进行了轻微修改，以便在单元格内更好地支持 ELEMENT)。

理想情况下，我在这个问题的答案中寻找的是:

• 可以实现我正在寻找的内容的库，
• 解决我的 sorrtable.js 修改中的错误。

Answer 1

您可以完全避免编辑 sorttable.js 脚本。

相反，在表的 thead 上创建一个点击事件，这会在 sorttable.js 对所有行进行排序后将 colspan 行移动到位:

$('.sortable thead').click(function() {
  var sortable = $(this).closest('.sortable');

  sortable.find('tr:has(td[colspan])').each(function() {
    var key = $(this).data('sorttable_row_key'),
        link = sortable.find('tr:not(:has(td[colspan]))[data-sorttable_row_key=' + key + ']');

    $(this).insertAfter(link);
  });
});

我使用过 jQuery，因为你在 Fiddle 中链接到了它。如果您更喜欢普通的 JavaScript 解决方案，请告诉我。

Working Fiddle