Question

在 Tabulator 4.9 中使用 setColumns 函数时缺少格式化程序

2021-02-12

482

javascript tabulator formatter

使用 setColumns 时，我遇到了奇怪的行为 - 格式化程序不再被识别：

“格式化程序错误 - 未找到这样的格式化程序：selectFilter”

如果我禁用 table.setColumns() 行，本地版本可以正常工作，格式化程序 selectFilter 也可以正常工作。

Tabulator 版本为 4.9

什么原因导致这种情况？

html：

    <span id="link_text">...</span>
    <br>
    <div align="center" id="status_table"></div>

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>

这是 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"
      }
    ]
  }
]

Answer 1

问题在于您定义自定义格式化程序的两种不同方式。

初始化 Tabulator 实例时，您正在引用一个函数。当您根据返回的 Ajax JSON 数据执行 setColumns() 时，您正在引用一个只能与自定义格式模块定义关联的字符串。在返回的 JSON 数据中。 "formatter": "selectFilter" 仅在您在 Tabulator 的格式模块中定义 selectFilter 时才有效。您可以将自定义格式化程序定义为：

Tabulator.prototype.extendModule("format", "formatters", {
    selectFilter: function(cell, formatterParams){
        var data = cell.getRow().getData();
        var display = "<button> A button </button>";
        return display;
    },
});

并始终使用 "formatter": "selectFilter", 设置列格式化程序。