Javascript 如何让制表器使用Select2标题过滤器？

按照这个例子，我们已经尝试了一个多星期让制表器使用Select2标题过滤器。所有的棋子都有一把小提琴。似乎没有调用tablator filter（实际上只是编辑器）onRendered（）函数，因为我们在其中的控制台日志从未被记录

select元素本身显示在标题过滤器中，但从未应用Select2对象（可能是因为onRendered似乎甚至没有被调用）。如果我们将Select2对象放在onRendered函数之外，则会应用它，但在进行选择后，不会应用过滤器。没有控制台或其他错误，我们完全遵循了制表器“示例”，因此我们不确定下一步要尝试什么

有人知道如何使用制表器获得基本的Select2标题过滤器吗

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,
});

---

我对制表器和select2都是新手，我认为这可能是一种不好的方法，但它似乎很管用

如果要将select2与文本输入元素一起使用，则需要使用完整的软件包

---

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

这似乎确实有效，但仅在元素作为输入时才会触发。这就是为什么我们从这条路径开始。我们无法设置输入元素文本的样式，我们需要设置选择的格式，但不能在选择后显示格式，现在有斜体的选项，这是您想要的吗？任意选项格式的示例：我接受答案并奖励奖金，因为根据这个文本问题，答案确实有效。我也很感激在格式化方面付出的额外努力。但仍存在一些问题。单击“选择”也会使列排序。此外，它还复制了大量数据，以使格式化工作正常。@DDurham不再存在单击“选择”导致列排序的问题。通过编辑formatState可以控制格式化的工作方式。如果您可以仅从数据中的文本字段派生格式化版本，那么您不需要格式化版本，只需向文本添加一些HTML即可。e、 g.中的版本

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();
  },
});