对彼此链接的多行进行排序（包括小提琴示例）

Question

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

我尝试稍微修改源以支持多行，但它破坏了包含在 Array 的 row 数据中的数据的基本排序。这里是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)（看起来它可以工作，因为它可以携带 linked row 与排序，但它不是因为 sort 完全不正确）

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（包含对原始版本的轻微修改，以便在cells 中提供更好的 ELEMENT 支持）。

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

• 图书馆做我正在寻找的，
• 我的 sorrtable.js 修改中的错误解决方案。

Answer 1

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

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

$('.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