Question

我试图为TableSorter编写自定义解析器，这样我就可以在HTML5表格的几个标题中动态地对字母等级进行排序。我用谷歌搜索疯狂，无法找到这样做的例子。

我是新手，但认为这对于课堂整理，QA报告等非常有帮助。在这里，我将Free2Work品牌排名分类为我可以在智能手机上使用的东西。

这里至少有两个问题：

我有一个在Firefox工作，但当我在Chrome中加载时，排序似乎是随机的。我确定我在某个地方将错误的东西加载到阵列中，但我不确定它是什么。
＆＃34;评级＆＃34;列在Firefox中正确排序，但看起来其他列不是。所有列的解析器都相同。

以下是我使用的JavaScript：

       $.tablesorter.addParser({
            id: 'grades',
            is: function(s) {
                    return false;
            },
            format: function(s) {
                    // format your data for normalization
                    return s.toLowerCase()
                            .replace("a+",12)
                            .replace("a",11)
                            .replace("a-",10)
                            .replace("b+",09)
                            .replace("b",08)
                            .replace("b-",07)
                            .replace("c+",06)
                            .replace("c",05)
                            .replace("c-",04)
                            .replace("d+",03)
                            .replace("d",02)
                            .replace("d-",01)
                            .replace("f",00);
            },
            type: 'numeric'
    });

    $(function() {
            $('#brands').tablesorter({
                    headers: {
                            2: {sorter:'grades'},
                            3: {sorter:'grades'},
                            4: {sorter:'grades'},
                            5: {sorter:'grades'},
                            6: {sorter:'grades'}
                    }
            });
    });

这是[截断]的HTML。

<table id="brands" class="tablesorter table striped">
    <caption>
        Brand Ratings
    </caption>
    <thead>
        <tr>
            <th>Logo</th>
            <th>Brand</th>
            <th class="extractor-select sorter-grades">Rating</th>
            <th class="extractor-select sorter-grades">Policy</th>
            <th class="extractor-select sorter-grades">Honesty</th>
            <th class="extractor-select sorter-grades">Monitor</th>
            <th class="extractor-select sorter-grades">Workers</th>
            <th>More</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="brand-logo"></td>
            <td class="brand-name">Etiko</td>
            <td class="brand-overall-grade aplus">A+</td>
            <td class="aplus">A+</td>
            <td class="aplus">A+</td>
            <td class="a">A</td>
            <td class="aplus">A+</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/1268">Scorecard</a>
            </td>
        </tr>
        <tr>
            <td class="brand-logo"></td>
            <td class="brand-name">Pants to Poverty</td>
            <td class="brand-overall-grade aplus">A+</td>
            <td class="aplus">A+</td>
            <td class="aplus">A+</td>
            <td class="a">A</td>
            <td class="aplus">A+</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/1270">Scorecard</a>
            </td>
        </tr>
        <tr>
            <td class="brand-logo"><img src="http://widgets.free2work.org/images/Brand/playtex_logo_black0.jpg"></td>
            <td class="brand-name">Playtex</td>
            <td class="brand-overall-grade a">A</td>
            <td class="aminus">A-</td>
            <td class="a">A</td>
            <td class="a">A</td>
            <td class="aminus">A-</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/458">Scorecard</a>
            </td>
        </tr>
        <tr>
            <td class="brand-logo"><img src="http://widgets.free2work.org/images/Brand/Hanes_Logo0.jpg"></td>
            <td class="brand-name">Hanes</td>
            <td class="brand-overall-grade a">A</td>
            <td class="aminus">A-</td>
            <td class="a">A</td>
            <td class="a">A</td>
            <td class="aminus">A-</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/456">Scorecard</a>
            </td>
        </tr>
        <tr>
            <td class="brand-logo"></td>
            <td class="brand-name">Voodoo Hosiery</td>
            <td class="brand-overall-grade b">B</td>
            <td class="aminus">A-</td>
            <td class="bminus">B-</td>
            <td class="b">B</td>
            <td class="d">D</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/1077">Scorecard</a>
            </td>
        </tr>
        <tr>
            <td class="brand-logo"><img src="http://widgets.free2work.org/images/Brand/AmericanBodyArmor0.jpg"></td>
            <td class="brand-name">American Body Armor</td>
            <td class="brand-overall-grade f">F</td>
            <td class="f">F</td>
            <td class="f">F</td>
            <td class="f">F</td>
            <td class="f">F</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/750">Scorecard</a>
            </td>
        </tr>
    </tbody>
</table>

任何人都对我在这里误解了什么有任何见解？我有点过头了。

Answer 1

该演示似乎使用了两个版本的tablesorter，original tablesorter（v2.0.5）包含在javascript框架（底部）和我的fork of tablesorter从CDN加载。它们都使用相同的解析器代码，因此这不是问题。

但是，自定义解析器代码（fixed demo）存在两个问题：

当替换完成后，它将被一个数字（数值）替换，但它仍然是一个字符串。因此，我将值包装在引号中，否则将删除前导零。这对于tablesorter的fork来说不是问题，因为它使用自然排序，但是原始使用标准排序，它不会像你期望的那样对字符串中的数字进行排序。
因为我们实际上正在处理字符串，所以解析器类型需要更改为“text”

这是一个更新的解析器cdoe：

$.tablesorter.addParser({
  id: 'grades',
  is: function(s) {
    return false;
  },
  format: function(s) {
    // format your data for normalization
    return s.toLowerCase()
      .replace("a+", '12')
      .replace("a", '11')
      .replace("a-", '10')
      .replace("b+", '09')
      .replace("b", '08')
      .replace("b-", '07')
      .replace("c+", '06')
      .replace("c", '05')
      .replace("c-", '04')
      .replace("d+", '03')
      .replace("d", '02')
      .replace("d-", '01')
      .replace("f", '00');
  },
  type: 'text'
});

另一个不需要设置数值的方法会将值添加到数组中，然后使用indexOf（或jQuery $.inArray（如果需要支持旧的IE）来获取位置。该解析器将是“数字”类型（demo）

// put grades outside of the format function, so the split
// only needs to happen once
var grades = 'a+ a a- b+ b b- c+ c c- d+ d d- f'.split(' ');

$.tablesorter.addParser({
  id: 'grades',
  is: function(s) {
        return false;
  },
  format: function(s) {
    var val = $.inArray( ( s || '' ).toLowerCase(), grades );
    // return string if it isn't a grade (to allow sorting)
    return val > -1 ? val : s;
  },
  type: 'numeric'
});

关于原始和fork之间差异的最后一个注释是如何设置解析器

原始版本只允许在headers选项中设置列解析器。

$(function() {
    $('#brands').tablesorter({
        headers: {
            2: {sorter:'grades'},
            3: {sorter:'grades'},
            4: {sorter:'grades'},
            5: {sorter:'grades'},
            6: {sorter:'grades'}
        }
    });
});

fork仍然可以在headers选项中设置分拣机，但也可以使用标题上的类名设置分拣机
```
<th class="extractor-select sorter-grades">Rating</th>
```
*注意：除非每个单元格都包含<select>元素且加载了parser-input-select.js文件，否则类名中的“extractor-select”将不起作用。

TableSorter自定义分析器未在Chrome上正确排序

1 个答案: