如何在handsontable上过滤时仅在下拉菜单上显示不包含HTML内容的文本？

Posted 2023-03-22

【中文标题】如何在handsontable上过滤时仅在下拉菜单上显示不包含HTML内容的文本？

【英文标题】：How to show only the text not with HTML content on dropdown menu while filter on handsontable?

【发布时间】：2019-06-21 07:29:54

【问题描述】：

如何在过滤时摆脱在下拉菜单上呈现 html 内容？如果单元格或整列的单元格包含 HTML 数据，当我们应用过滤器时，在下拉列表中显示为 HTML 内容， 过滤时如何只显示不包含 HTML 内容的文本？

此小提琴包含示例（在第一列中）

var dataObj = [
    ['<a>Lorem</a>', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
    ['<a>adipiscing</a>', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
    ['<a>Pellentesque</a>', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
    ['<a>diam</a>', 'et', 'malesuada', 'libero', '12/1/2014', 98],
    ['<a>orci</a>', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5]
  ];
  var example1 = document.getElementById('example1');

  var hot = new Handsontable(example1, 
    data: dataObj,
    columns: [
      type: 'text', renderer: 'html',
      type: 'text',
      type: 'text',
      type: 'text',
      type: 'date', dateFormat: 'M/D/YYYY',
      type: 'numeric'
    ],
    colHeaders: true,
    rowHeaders: true,
    dropdownMenu: true,
    dropdownMenu: ['filter_by_value', 'filter_action_bar'],
    filters: true
  );

FIDDLE

【参考方案1】：

Handsontable 初始化器应该改为 -:

function firstColRenderer(instance, td, row, col, prop, value, cellProperties) 
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.innerHTML = value.replace(/<(?:.|\n)*?>/gm, '');

var hot = new Handsontable(example1, 
    data: dataObj,
    columns: [
      type: 'text', renderer: 'html',
      type: 'text',
      type: 'text',
      type: 'text',
      type: 'date', dateFormat: 'M/D/YYYY',
      type: 'numeric'
    ],
    colHeaders: true,
    rowHeaders: true,
    dropdownMenu: true,
    dropdownMenu: ['filter_by_value', 'filter_action_bar'],
    filters: true,
    cells: function (row, col) 
      var cellProperties = ;
      var data = this.instance.getData();

      if (col === 0) 
        cellProperties.renderer = firstColRenderer; // uses function directly
      
      return cellProperties;
    
  );

【讨论】：

谢谢。但是过滤器上的下拉菜单内容与以前一样显示 HTML 内容。