使用Handontable在同一列中用纯文本和html对问题进行排序

Sorting issue with plain text and html in the same column using Handsontable

本文关键字：html 文本 问题 排序 Handontable 一列 使用      更新时间：2023-09-26

我在排序一列时遇到问题，该列包含纯文本和类似锚标记的html。排序似乎发生在数据源数组中存储的值上，而不是显示的值上。包含定位标记的单元格总是排序在纯文本单元格之上。

下面是一个带有示例的JSFiddle。我希望第三列按字母顺序对名称进行排序，而不管单元格是否包含锚标记或纯文本。

示例：http://jsfiddle.net/5sL2jkqt/

{ data: 2, renderer: "html" }

我尝试在第三列应用自定义单元格渲染器，但没有帮助。任何关于如何绕过这一问题的建议都将不胜感激！

为了解决这个问题，我在handontable.full.js 中添加了以下函数

  // Strip out all tags not in the allowed parameter
  function stripTags(input, allowed) {
      if (!input) {
          return "";
      } else if (!isNaN(input)) {
          return input;
      }
      // making sure the allowed arg is a string containing only tags in lowercase (<a><c>)
      allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join("");

      var tags = /<'/?([a-z][a-z0-9]*)'b[^>]*>/gi,
          commentsAndPhpTags = /<!--['s'S]*?-->|<'?(?:php)?['s'S]*?'?>/gi;

      return input.replace(commentsAndPhpTags, "").replace(tags, function ($0, $1) {
          return allowed.indexOf("<" + $1.toLowerCase() + ">") > -1 ? $0 : "";
      });

  };

然后，我调用了本机手可接触函数this.sort中的stripTags函数，该函数将您正在排序的内容添加到数组this.sortRindex中，如下所示：

this.sortIndex.push([i, stripTags(instance.getDataAtCell(i, this.sortColumn + colOffset), "")]);

不是100%的理想，但很有魅力。它去掉HTML并对剩下的内容进行排序。

也可以在GitHub 上找到

不幸的是，排序插件总是根据值而不是显示的值进行排序。但是，您可以实现自己的排序。在这种情况下，这是你最好的选择。

您要做的是在HOT中禁用排序，然后单击标题，就像HOT排序一样，触发您的排序功能。

这个应该作用于data对象本身。请确保检查单击了哪个标头，以便将其转换为索引。剩下的应该是直接的：

使用类似data.sort(function(item1, item2) { //logic })的东西，您现在可以根据您想要的任何特性对数据数组进行排序。似乎最简单的方法是根据列索引1的值进行排序，这样你就可以做到：

// item1 is a row and item2 is the row right after it
data.sort(function(item1, item2) {
    return item1[1] > item2[1] ? 1 : -1; // returning 1 makes item1 greater
}
hotInstance.render(); // remember to re-render when done

这将是最简单的方法。它还为您提供了更大的灵活性。祝你好运

相关文章：