Tabulator表头过滤器集成Select2无响应问题排查与解决

技术栈 #

• ruby - 2.7.6
• rails - 6.1.5
• tabulator - 5.4.3
• jquery-rails gem - 4.4.0
• jquery-ui-rails gem - 6.0.1
• select2-rails gem - 3.5.11

问题详情 #

我尝试将Select2作为Tabulator的自定义表头过滤器（headerFilter）实现数据筛选，目前Select字段及选项能正常渲染，但选择选项时完全没有筛选反应，Select2的各类事件也未触发。

预期效果 #

用Select2库替换Tabulator默认的内置列表编辑器，作为表头过滤器使用。

已执行操作 #

从后端获取Select字段所需选项数据，传入Select2构造器，再将完整的Select2组件插入表头过滤器位置。

当前结果 #

Select2搜索框可正常显示和输入搜索，但选择选项后无法触发表头筛选动作，控制台输出以下警告：

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

相关代码 #

列配置 #

{
  title: 'Items',
  field: 'item_name',
  headerFilter: selectEditor,
  headerSort: false
},

自定义Select2编辑器函数 #

var selectEditor = function(cell, onRendered, success, cancel, editorParams){
  // 创建容器和input元素承载Select2
  var container = document.createElement("span");
  var editor = document.createElement("input");
  container.append(editor);

  onRendered(function(){
    $(editor).select2({
      data: [{text: 'hi', value: '1'}],
      multiple: false,
      width: '100%',
      allowClear: true
    });

    // 绑定各类事件尝试触发筛选
    $(editor).on('change', function (e) {
      console.log($(editor).val());
      success($(editor).val());
    });

    $(editor).on('change.select2', function (e) {
      console.log($(editor).val());
      success($(editor).val());
    });

    $(editor).on('select2:select', function (e) {
      console.log($(editor).val());
      success($(editor).val());
    });

    $(editor).on('blur', function (e) {
      console.log('blurred');
      cancel();
    });

    $(editor).on('click', function (e) {
      console.log('clicked');
      cancel();
    });
    container.focus();
  });
  return container;
}

更新发现 #

设置headerFilterLiveFilter:false可以阻止列表自动补全时的重绘事件（需配合clearable样式），此时使用默认list过滤器的列配置如下：

{
  title: 'Items',
  field: 'item_name',
  headerFilter: 'list',
  headerFilterPlaceholder: 'Item name',
  headerSort: true,
  headerFilterLiveFilter:false,
  headerFilterParams: {
    clearable: true,
    values: {
      '': 'All',
      'Item1': 'Item One',
      'Item2': 'Item Two'
    },
  },
}

内容的提问来源于stack exchange，提问作者silentM0de