我如何排序多行(行与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解决方案,请告诉我。
工作小提琴