TableSorter 2.0.3 Colspan问题
-
19-09-2019 - |
题
我使用TableSorter 2.0.3的几个问题。
第一个问题是当我在桌子上设置一个colspan。基本上,当我这样做时,它并不能对各个列进行排序。
<table>
<thead>
<th colspan="3"></th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
我遇到的第二个问题是,无论我在TableSorter.js中设置了什么设置sortInitialOrder(“ desc”或“ asc”),在单击时使排序上升或下降没有任何影响。
请任何人帮忙吗?
解决方案
为了解决问题,您可以创建自己的标题映射到数据cols。这是我为按照我想要的方式获得功能所做的。
我已将以下方法添加到tablesorter.js:
function findInMap(map, index, reverse) {
for(var i = 0; i < map.length; ++i) {
if(map[i][reverse ? 1 : 0] == index) return map[i][reverse ? 0 : 1];
}
return index;
}
并将以下内容添加到 this.defaults
customMap: []
,更改以下方法:
function setHeadersCss(table,$headers, list, css) {
$headers.removeClass(css[0]).removeClass(css[1]);
var h = [];
$headers.each(function(offset) {
if(!this.sortDisabled) {
h[this.column] = $(this);
}
});
var l = list.length;
for(var i=0; i < l; i++) {
var header = list[i];
var headerIndex = findInMap(table.config.customMap, header[0], true);
h[headerIndex].addClass(css[header[1]]);
}
}
最后但并非最不重要的一点,添加/更改以下内容 $headers.click(function(e) {
添加:
var ia = findInMap(config.customMap, i, false);
改变:config.sortList.push([i,this.order]);
至 config.sortList.push([ia,this.order]);
当您启动时,桌子士兵通过 customMap[[header_col_id, data_col_id]]
在您的情况下,它将是:
customMap[
[2, 4],
[3, 5],
...
]
其他提示
如果您单击三个列的标题,您会期望发生什么?您期望它对哪个列进行排序?通常,要使TableSorter工作,您需要为每列提供一个标头。
sortInitialOrder
TableSorter的网页上似乎没有提及,但它确实存在于代码中。我以前只使用过此方法:
sortList: [[5, 0]]
最初将使用第5列对升序进行排序。
我有点解决了这个问题,因为我也只想将桌子排序,我将第536行修改为 this.order = this.count++ % 0;
这使它按照我的意愿进行排序。
关于Colspan,我只需要求助于空白以对各个列进行分类。它可能不是正确的标记,但我看不到解决此问题的其他方法。
我对自己解决了类似的问题,并在表格代码本身中的以下补丁程序解决了。
Index: jquery.tablesorter.js
===================================================================
--- jquery.tablesorter.js (.../original) (revision x)
+++ jquery.tablesorter.js (.../mine) (revision y)
@@ -278,7 +278,10 @@
cache.row.push(c);
for (var j = 0; j < totalCells; ++j) {
- cols.push(parsers[j].format(getElementText(table.config, c[0].cells[j]), table, c[0].cells[j]));
+ var cSpan = c[0].cells[j].colSpan || 1;
+ while (cSpan--) {
+ cols.push(parsers[j].format(getElementText(table.config, c[0].cells[j]), table, c[0].cells[j]));
+ }
}
总之,我的问题被颠倒了。我有2列跨越1个碰撞单元。在跨度列仍可分类之后,这将修复所有列。