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

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

本文关键字：包括 小提琴 排序 链接      更新时间：2023-09-26

我如何排序多行(行与colspan， 链接到目标排序行)与sorttable.js

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

我想要完成的事情 

<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>

可排序多行(jsfiddle)(看起来它可以工作，因为它可以携带链接行与排序，但它没有，因为排序是完全不正确的)

可排序多行(使用单行，不工作)(jsfiddle)

用于上述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>

使用默认代码(jsfiddle)进行排序

以上JsFiddle的Pastebin(包含对原始的轻微修改，以便在cells中更好地支持ELEMENT)。

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

  • 库做我正在寻找的，

您可以完全避免编辑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，因为你链接到它在你的提琴。如果你更喜欢普通的JavaScript解决方案，请告诉我。

工作小提琴

相关文章：