【问题标题】:jQuery tablesorter - rowspan in headers causes odd behaviorjQuery tablesorter - 标题中的行跨度导致奇怪的行为
【发布时间】:2011-02-06 02:38:42
【问题描述】:

失败示例:
http://progamonth.com/files/testfile.html

期望的行为:
理想情况下,任何带有colspan 的标题都不应影响排序。现在,它们接收排序按钮,即使我为每个 colspan 标题指定headers: {index: {sorter: false}},它们仍然会影响排序。当我单击没有行跨度或列跨度(1.1.2 等)的标题时,它们似乎导致排序发生在右侧 4 列!

此工作示例,我无法重现:
http://lovepeacenukes.com/tablesorter/2.0/docs/

此页面似乎显示此行为有效,但我无法重现此。 rowspan 的示例甚至没有手动关闭这些标题,所以这是怎么回事?!我确实看到示例中的 colspan 标头没有 header 类,但这似乎是由 tablesorter 插件应用的。

有人知道怎么回事吗?

工作图片: alt text http://progamonth.com/files/working.png

图片无效: alt text http://progamonth.com/files/notworking.png

【问题讨论】:

    标签: jquery tablesorter html-table


    【解决方案1】:

    文档演示使用的 jQuery 和 Tablesorter 与您使用的不同(古老)版本。通过比较来源,我发现自动 col/row span 检测从未在较新版本中完成。跨度检测功能仍然存在 - 但只是没有被调用。不知道为什么会发生这种回归。

    话虽如此,我可以使用此设置运行您的演示:

    $(document).ready(function(){
      $('#rowspan').tablesorter({
        headers: {
          4: {sorter: false},
          5: {sorter: false},
          6: {sorter: false},
          7: {sorter: false}
        } 
      });
    });
    

    如果您知道colspan>1 是一个安全标准,那么我会推断出这样的标题索引:

    $(function(){
      var headers = {};
      $('#rowspan thead th').each(function(i,h){
        if (this.colSpan>1) { headers[i] = { sorter: false }; }
      });
      $('#rowspan').tablesorter({
        headers: headers
      });
    });
    

    更新:

    “工作”示例:http://jsbin.com/ucija3

    该示例看起来像您要求的,或者我不明白您的问题。但是,我刚刚发现单击标有 3.1 - 4.2 的标题会引发异常。 所以,我想我对你问题的最终回答是:这个插件的当前版本不适用于 row 或 colspans。

    更新:

    一个简单的补丁来完成这项工作:

    在函数buildHeaders(第290行)中,将$tableHeaders = $("thead th",table);行更改为:

    $tableHeaders = $("thead th:not([colspan]),thead th[colspan=1]",table);
    

    更复杂更灵活的补丁:

    将配置参数添加到buildHeaders(第 290 行):

    function buildHeaders(table, config) {  # ...
    

    还有一个过滤器到$tableHeaders(第299行):

    $tableHeaders = $("thead th",table).filter( config.headerFilter || '*' );
    

    在调用时将配置传递给 buildHeaders(第 504 行):

    $headers = buildHeaders(this, config);
    

    在初始化 tablesorter 时添加过滤器:

    $(function(){
      $('#rowspan').tablesorter({
        headerFilter: function(){ return this.colSpan == 1; }
      });
    });
    

    Here is a pre-patched version 包括 headerFilter 选项 and a demo of it in action.

    【讨论】:

    • 这不起作用,因为禁用的列仍然“控制”内部标题需要控制的列。
    【解决方案2】:

    该功能已被禁用,如下所示: link text

    我找到了另一种具有相同效果的方法,在第 298 行周围的 tablesorter js 中有以下代码规则:

    $tableHeaders = $("thead th",table);
    

    改成

    $tableHeaders = $("thead th:not([colspan])",table);
    

    它对我有用!

    编辑: 更改了代码和位置

    【讨论】:

    • 这不起作用。它仍然向不应获取它们的标题添加类,并且当您单击标有 3.1 到 4.2 的标题时会引发错误。
    • 改了,错误不再出现。增加了哪些课程?他们获得的唯一类是在 html 中而不是由 js 添加的类“header”。
    【解决方案3】:

    仅供参考,red-X 提供的修复:

    $tableHeaders = $("thead th",table); 改成

    $tableHeaders = $("头 th:not([colspan])",table);

    破坏了 IE6 和 IE7 的 tablesorter 插件。我想出的唯一解决方案(我在其他地方找到的)是你需要有一行和一行只包含 TH 标签。您可以在 THEAD 中包含其他列(包括带有 colspans 的列),但它们必须使用 TD 标签。这在标记方面并不理想,但至少该插件可以在 IE6 和 IE7 上运行。

    【讨论】:

      【解决方案4】:

      我尚未对此进行全面测试,但我建议更新您的文档类型。根据经验,表格排序器(以及一般的 jQuery)可能对文档类型非常敏感。

      演示(有效)使用以下内容:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      

      编辑:更新 DocType 后,它仍然对我不起作用。然后我下载了演示站点上使用的 TableSorter 版本,它现在可以作为演示使用。唯一的其他区别是我在文档的 head 部分中包含了脚本和 css,但这应该没有区别。

      我确实认为 jQuery 的版本可能是个问题,但我使用的是 1.3.2,使用的资源与您相同。

      【讨论】:

        猜你喜欢
        • 2022-11-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-11-27
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-12-31
        相关资源
        最近更新 更多