JQuery Tablesorter的自定义分析器

Question

我正在使用jQuery Tablesorter,并且解决了对表列应用解析器的问题.我正在添加一个自定义解析器来处理$ -3.33形式的货币.

$.tablesorter.addParser({
    id: "fancyCurrency",
    is: function(s) {
      return /^\$[\-]?[0-9,\.]*$/.test(s);
    },
    format: function(s) {
      s = s.replace(/[$,]/g,'');
      return $.tablesorter.formatFloat( s );
    },
    type: "numeric"
});

问题似乎是内置货币解析器优先于我的自定义解析器.我可以将解析器放在tablesorter代码本身(在货币解析器之前)并且它正常工作,但这不是很容易维护.我无法使用以下方式手动指定分拣机:

headers: {
    3: { sorter: "fancyNumber" },
    11: { sorter: "fancyCurrency" }
}

因为表列是从用户输入动态生成的.我想一个选项是指定分类器用作css类,并使用一些JQuery明确指定一个像这个问题建议的分类器,但我更愿意坚持动态检测,如果可能的话.

Answer 1

第一个选项是为具有货币值的列提供额外的类"{'sorter':'currency'}".还要确保包含哪些tablesorter支持的插件元数据.这将引入每个元素选项并明确告诉tablesorter如何排序.

<link rel="stylesheet" href="/css/jquery/tablesorter/green/style.css" />
<script src="/js/jquery-1.3.2.js"></script>
<script src="/js/jquery.ui.core.js"></script>
<script src="/js/jquery.metadata.js"></script>
<script src="/js/jquery.tablesorter.js"></script>

<script>
    $(document).ready(function()
    {
    $("#table").tablesorter();
    }
    );
    </script>
</head>
<table id="table" class="tablesorter">
<thead>
  <tr>
    <th class="{'sorter':'currency'}">Currency</th>
    <th>Integer</th>
    <th>String</th>
  </tr>
</thead>
<tbody>
<tr>
  <td class="{'sorter':'currency'}">$3</td>
  <td>3</td>
  <td>three</td>
</tr>
<tr>
  <td class="{'sorter':'currency'}">-$3</td>
  <td>-3</td>
  <td>negative three</td>
</tr>
<tr>
  <td class="{'sorter':'currency'}">$1</td>
  <td>1</td>
  <td>one</td>
</tr>
</tbody>
</table>

此外,格式化货币的函数存在一个错误:它不处理负数.

我已经提交了一个错误,正在努力登陆补丁.

第二个选项是将此修复程序应用于您的tablesorter副本.一旦你应用了修复,你将不需要在th或td中指定货币分类器(无论如何在td中指定是过度杀死).

编辑jquery.tablesorter.js的第724行:

return $ .tablesorter.formatFloat(s.replace(new RegExp(/ [^ 0-9.]/g),""));

改成:

return $ .tablesorter.formatFloat(s.replace(new RegExp(/ [^ - 0-9.]/g),""));

案件:

• 价值:$ -3,$ 1,$ 3

• 当前的asc订单:1美元,3美元,3美元

• 预计asc订单$ -3,$ 1,$ 3

案件:

• 值: - 3美元,1美元,3美元

• 当前的asc订单:$ 1,$ 3, - $ 3

• 预计asc订单$ -3,$ 1,$ 3