如何在Handsontable中使用自定义渲染器对列进行排序？

Question

可发行的版本0.34.2（可能无法升级）

我有一个带有Handsontable的索引页面，显示客户信息。第一列是id列。这是一个html链接。如果用户单击它将看到客户的详细信息。表最初是根据每个记录的最后修改时间排序的。

$('#custInfo').handsontable({
  data: custData,
  colHeaders: ['Cust No', 'Cust Name', ..., 'Last Mod Time'],
  columnSorting: true,
  columns: [ 
    { renderer: safeHtmlRenderer }, 
    {}, 
    ...
    { type: 'date', 
      dateFormat: 'DD-MM-YYYY by:mm:as' }]
  ...
}];

  function safeHtmlRenderer(instance, td, row, col, prop, value, cellProperties) {
    var escaped = Handsontable.helper.stringfy(value);
    td.innerHtml = escaped;
    return td;
  };

表格在屏幕上是这样的：

261玛丽30-10-2018 17:30:17

83保罗12-12-2018 09:13:48

如果单击第一列对升序进行排序，则排序仅按字母顺序进行。那就是'261'在'83'之前。

如何排序客户编号（而不是下面的链接）？

Answer 1

看起来很少有问题在StackOverflow中得到了回答。因此，让我回答我自己的问题。

事实证明，一列是否具有自定义渲染器都没有关系。重要的是您提供的比较功能。

请注意以下适用于0.34.2版本（最新版本，第7版无效）

回复：Easy Ways to Sort Different Types of Data in Your App（谢谢您，此博客救了我。）

使用0.34.2版本，参考页中的所有示例均正常运行。

a [0] =行索引

a [1] =值

如果第一行中的CustNo是' 178 '，则链接[1]。

linkA1是分割a [1]的字符串数组。

linkA2 = 178 a

linkA2 [0] = 178（但是这个仍然是字符串）

CustNoA = parseInt（linkA2 [0]）返回一个整数，用于进行数字比较。

columns: [
{ data: 'CustNo',
  renderer: safeHtmlRenderer,
  sortFunction: function(sortOrder) {
    return function(a, b) {
      var linkA1 = a[1].split(">");
      var linkA2 = linkA1[1].split("<");  // linkA1[1] => '178</a'
      var CustNoA = parseInt(linkA2[0]);  // linkA2[0] => '178'

      var linkB1 = b[1].split(">");
      var linkB2 = linkB1[1].split("<");
      var CustNoB = parseInt(linkA2[0]);

      if (CustNoA < CustNoB) {
        return sortOrder ? -1 : 1;
      }

      if (CustNoA > CustNoB) {
        return sortOrder ? 1 : -1;
      }

      return 0;
    }
  }