制表符和 select2 标题过滤器

Question

堆栈：

• 红宝石 - 2.7.6
• 轨道 - 6.1.5
• 制表符 - 5.4.3
• jquery-rails gem - 4.4.0
• jquery-ui-rails gem - 6.0.1
• select2-rails gem - 3.5.11

为了启用我们自定义的和已经建立的 select2 字段进行数据过滤，我尝试使用 select2 作为自定义 headerFilter（如本示例/答案所示https://stackoverflow.com/a/53622648）。 The select field and its options do appear but nothing happens when an item is selected nor any select2 events are triggered upon selection.

期望： 将默认的内置列表编辑器与 select2 库交换并将其用作 headerFilter。

尝试： 从后端获取 select 字段所需的项目，将这些项目提供给 select2 构建器，然后将整个 select2 字段插入 headerFilter

结果： Select2 搜索字段确实出现并按预期工作（字段可见，选项可见），直到选择了任何项目。选择后，没有任何反应，也没有触发 select2 事件，因此无法使用 select2 应用 headerFiltering。此外，通过单击选定的 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. See https://www.chromestatus.com/feature/5745543795965952

专栏说明：

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

var selectEditor = function(cell, onRendered, success, cancel, editorParams){

  //create input element to hold 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;
}

Answer 1

这是因为在列表中选择一个元素会导致触发模糊事件取消编辑。

作为测试，尝试注释掉代码中的模糊事件，看看现在选择是否有效。

如果 ti 这样做，那是你的问题。然后，您需要在更复杂的范围内管理模糊。你是对的，你需要取消模糊，但你应该检查模糊事件的来源，看看它是否来自 select2 编辑器列表元素，如果是的话，就忽略它。

或者，您可以使用内置的

list

编辑器，它将为您完成所有这些https://tabulator.info/docs/5.4/edit#editor-list