Tablesorter 2.0.3 colspan 问题答案

【问题标题】：Tablesorter 2.0.3 colspan issueTablesorter 2.0.3 colspan 问题
【发布时间】：2010-01-09 21:37:20
【问题描述】：

我在使用 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”），它都不会在单击时使排序升序或降序产生任何影响开。

有人可以帮忙吗？

【问题讨论】：

标签： jquery jquery-plugins html-table tablesorter

【解决方案1】：

要解决问题一，您可以创建自己的标头到数据列的映射。这就是我为按照我想要的方式获得功能所做的工作。

我在 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]);

当您初始化 tablesorter 时，传递 customMap[[header_col_id, data_col_id]] 在您的情况下，它将是：

customMap[
    [2, 4],
    [3, 5],
    ...
]

【讨论】：

【解决方案2】：

如果您点击跨越三列的标题，您希望发生什么？您希望它对哪一列进行排序？一般来说，要使表格排序器工作，您需要为每一列设置一个标题。

sortInitialOrder 似乎没有在 tablesorter 的网页上提到，但它确实存在于代码中。我以前只用过这个：

sortList: [[5, 0]]

最初将使用第 5 列升序排序。

【讨论】：

【解决方案3】：

我已经解决了这个问题，因为我也只希望表格按升序排序，我将第 536 行修改为 this.order = this.count++ % 0;，使其按我想要的方式排序。

关于 colspan，我只需要使用空白来对各个列进行排序。它可能不是正确的标记，但我看不出有其他方法可以解决这个问题。

【讨论】：

【解决方案4】：

我已经通过 tablesorter-code 本身中的以下补丁为自己解决了类似的问题；

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 个 collspanned 单元格。这会修复跨区列之后的所有列仍可排序。

【讨论】：