[英]Missing formatter when using setColumns function in Tabulator 4.9
I have a strange behavior when using the setColumns - the formatters are not recognized anymore:使用 setColumns 时我有一个奇怪的行为 - 格式化程序不再被识别:
"Formatter Error - No such formatter found: selectFilter" “格式化程序错误 - 找不到这样的格式化程序:selectFilter”
If I disable the table.setColumns() line, the local version works just fine and the formatter selectFilter works.如果我禁用 table.setColumns() 行,本地版本工作正常,格式化程序 selectFilter 工作。
The Tabulator version is 4.9制表符版本是 4.9
What would cause this?什么会导致这个?
html: html:
<span id="link_text">...</span>
<br>
<div align="center" id="status_table"></div>
javascript code: javascript 代码:
<script>
var dataObject = [];
var selectFilter = function(cell, formatterParams){
var data = cell.getRow().getData();
var display = "<button> A button </button>";
return display;
};
var status_table = new Tabulator("#status_table",{
data:dataObject,
layout:'fitColumns',
columns:[
{title:"Select", hozAlign:"center", field:"open_link", width:200, formatter:selectFilter}
],
});
update();
function update() {
$.ajax({url: PageUrl,
success: function(result){
projectData = result;
definitionsData = result['definitions'];
columnData = result['columns'];
tableData = result['table_data'];
status_table.setData(tableData);
document.getElementById("status_table").style.width = definitionsData['width'];
//status_table.setColumns(columnData); // if enabled, error happens, other column information comes from JSON correctly
}});
}
</script>
Here is the JSON:这是 JSON:
[
{
"definitions": [
{
"width": "400px"
}
],
"columns": [
{
"title": "First",
"hozAlign": "left",
"field": "project_description",
"width": 200,
"headerSort": true
},
{
"title": "Second",
"hozAlign": "left",
"field": "open_link",
"width": 100,
"formatter": "selectFilter",
"headerSort": true
},
{
"title": "Third",
"hozAlign": "left",
"field": "open_link",
"width": 100,
"headerSort": true
}
],
"table_data": [
{
"first_column": "Col 1",
"open_link": "left"
}
]
}
]
The issue is in the two different ways you define your custom formatter.问题在于您定义自定义格式化程序的两种不同方式。
When you initialize the Tabulator instance, you are referencing a function.初始化 Tabulator 实例时,您引用的是 function。 When you
setColumns()
, based on your returned Ajax JSON data, you are referencing a string that can only be associated with a curtom Format Module definition.当您
setColumns()
时,根据您返回的 Ajax JSON 数据,您引用的字符串只能与自定义格式模块定义相关联。 In your returned JSON data.在您返回的 JSON 数据中。
"formatter": "selectFilter"
only works if you define selectFilter
in Tabulator's Format Module. "formatter": "selectFilter"
仅在您在 Tabulator 的格式模块中定义selectFilter
时才有效。 You could define your custom formatter as:您可以将自定义格式化程序定义为:
Tabulator.prototype.extendModule("format", "formatters", {
selectFilter: function(cell, formatterParams){
var data = cell.getRow().getData();
var display = "<button> A button </button>";
return display;
},
});
and always set column formatter with "formatter": "selectFilter",
.并始终使用
"formatter": "selectFilter",
设置列格式化程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.