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

Posted 2023-03-22

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

【英文标题】：How to sort a column with custom renderer in Handsontable?

【发布时间】：2020-04-03 09:08:32

【问题描述】：

Handsontable 版本 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' 之前。

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

【参考方案1】：

看起来 *** 中很少有问题得到解答。所以让我回答我自己的问题。

事实证明，列是否具有自定义渲染器并不重要。重要的是您提供的比较功能。

请注意以下适用于 0.34.2 版本（最新版本，版本 7 不起作用）

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

使用 0.34.2 版本，参考页面中的所有示例都可以完美运行。

a[0] = 行索引

a[1] = 值

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

linkA1 是从 a[1] 拆分出来的字符串数组。

linkA2 = 178

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;