如何让Tabulator使用Select2标头筛选器

Question

根据这里的示例，我们已经尝试让Tabulator使用Select2标头过滤器一周多了。这里有一个JS Fiddle，里面有所有的片段。看起来Tabulator过滤器(实际上只是编辑器(onRendered((函数甚至没有被调用，因为我们在其中的控制台日志从未被记录。

select元素本身显示在头过滤器中，但从未应用Select2对象(可能是因为onRendered似乎甚至没有被调用(。如果我们将Select2对象放在onRendered函数之外，它会被应用，但在进行选择后，过滤器不会被应用。没有控制台或其他错误，我们完全遵循了表格"示例"，所以我们不确定下一步该怎么做。

有人知道如何使用Tabulator获得基本的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,
});

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只有在单元格中使用这些编辑元素来处理只显示数据和显示可编辑字段之间的转换时才会被激发。