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

【问题标题】：Sorting issue with plain text and html in the same column using Handsontable使用 Handsontable 在同一列中对纯文本和 html 进行排序问题
【发布时间】：2015-06-06 08:05:18
【问题描述】：

我在对包含纯文本和 html（如锚标记）的列进行排序时遇到问题。排序似乎发生在存储在数据源数组中的值上，而不是显示的值上。包含锚标记的单元格始终排在纯文本单元格的上方。

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

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

{ data: 2, renderer: "html" }

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

【问题讨论】：

标签： javascript handsontable

【解决方案1】：

我为解决这个问题所做的是将以下函数添加到 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.sortIndex 中，如下所示：

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

不是 100% 理想，但工作起来就像一个魅力。它会去除 HTML 并对剩下的内容进行排序。

也可以在GitHub上找到

【讨论】：

【解决方案2】：

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

你要做的是禁用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

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

【讨论】：