如何让 Tabulator 使用 Select2 header 过滤器？

Question

按照示例here, we've been trying for over a week to get Tabulator working with a Select2 header filter. There is a JS Fiddle here 处理所有片段。似乎 Tabulator 过滤器（实际上只是编辑器）onRendered() 函数甚至没有被调用，因为我们在其中的控制台日志从未被记录。

select 元素本身出现在 header 过滤器中，但从未应用 Select2 object（可能是因为似乎甚至没有调用 onRendered）。如果我们将 Select2 object 放在 onRendered 函数之外，它会被应用，但是在创建 selection 之后过滤器不会被应用。没有控制台或其他错误，我们已经完全按照制表符 'example' 进行操作，因此我们不确定接下来要尝试什么。

有谁知道如何使用 Tabulator 获得基本的 Select2 header 过滤器？

var tableData = [{
    id: "1",
    topic: "1.1"
  },
  {
    id: "2",
    topic: "2.2"
  },
];

var select2Editor = function(cell, onRendered, success, cancel, editorParams) {
  var editor = document.createElement("select");
  var selData = [{
    id: '1.1',
    text: "One"
  }, {
    id: "2.2",
    text: "Two"
  }, {
    id: "3.3",
    text: "Three"
  }, ];

  onRendered(function() {
    // TODO: map tracks to id and text
    console.log('rendered');

    $(editor).select2({
      data: selData,
      minimumResultsForSearch: Infinity,
      width: '100%',
      minimumInputLength: 0,
      //allowClear: true,
    });
    
    $(editor).on('change', function(e) {
      success($(editor).val());
    });


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

  });


  return editor
};


var columns = [{
  title: "ID",
  field: "id"
}, {
  title: "Topic",
  field: "topic",
  headerFilter: select2Editor,
}, ];


var table = new Tabulator("#table", {
  placeholder: "No Data Found.",
  layout: "fitData",
  data: tableData,
  columns: columns,
});

Answer 1

我是 Tabulator 和 select2 的新手，我认为这可能是一种糟糕的方法，但它似乎很管用。

如果您想将 select2 与文本输入元素一起使用，看起来您需要使用完整包。

https://jsfiddle.net/dku41pjy/

var tableData = [{
    id: "1",
    topic: "1.1"
  },
  {
    id: "2",
    topic: "2.2"
  },
];

var columns = [{
  title: "ID",
  field: "id"
}, {
  title: "Topic",
  field: "topic",
  headerFilter: 'select2Editor'
}, ];

var awaiting_render = [];

function do_render({ editor, cell, success, cancel, editorParams }) {
  console.log('possibly dodgy onrender');
    var selData = [{
    id: '',
    text: "-- All Topics --"
  }, {
    id: '1.1',
    text: "One"
  }, {
    id: "2.2",
    text: "Two"
  }, {
    id: "3.3",
    text: "Three"
  }, ];
  
  $(editor).select2({
    data: selData,
    //allowClear: true,
  });

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


  $(editor).on('blur', function(e) {
    cancel();
  });
      
}
function render_awaiting() {
    var to_render = awaiting_render.shift();
  do_render(to_render);
  if(awaiting_render.length > 0)
    render_awaiting();
}

Tabulator.prototype.extendModule("edit", "editors", {
    select2Editor:function(cell, onRendered, success, cancel, editorParams) {
      console.log(cell);
      var editor = document.createElement("input");
      editor.type = 'text';
      awaiting_render.push({ editor, cell, success, cancel, editorParams });

      return editor
    },
});

var table = new Tabulator("#table", {
  placeholder: "No Data Found.",
  layout: "fitData",
  data: tableData,
  columns: columns,
  tableBuilt:function(){
    render_awaiting();
  },
});

编辑：我怀疑 onRendered 只有在单元格中使用这些编辑元素时才会触发，以便在仅显示数据和显示可编辑字段之间进行过渡。

如何让 Tabulator 使用 Select2 header 过滤器？

How can you get Tabulator to use Select2 header filter?

javascript

jquery-select2

tabulator