对相互链接的多行进行排序（包括 fiddle 个示例）

Question

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

我试图稍微修改源代码以支持多行，但它破坏了包含在 Array of 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)（它看起来有效，因为它可以携带 链接行 进行排序，但它不是因为排序完全不正确）

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 脚本。

相反，在 table 的 thead 上创建一个点击事件，它将 colspan 行移动到 after 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

对相互链接的多行进行排序（包括 fiddle 个示例）

Sorting multiple rows linked with one another (fiddle examples included)

javascript

sorting

html-table

sorttable.js