tabulator - 如何在制表器中通过 ajax 加载列

Question

我正在尝试使用以下内容在制表符 4.5 中加载列：

var table = new Tabulator("#tables", {
    ajaxURL:"worker.php?data",
    ajaxRequestFunc:queryRealm,
    cellEdited:cEdit,
    history:true,
    clipboard:true,
    //autoColumns:true,
    clipboardPasteAction:"replace",
    layout:"fitData",
    columns:getColumns,
});

function getColumns(){
    return new Promise(function(resolve, reject){
        $.ajax({
            url: "worker.php?columns",
            success: function(data){
                resolve(data);
            },
            error: function(error){
                reject(error);
            }
        })
    });
}

但我得到了错误：

tabulator.min.js:4 Uncaught TypeError: this.options.columns.slice is not a function
    at t.u._clearObjectPointers (tabulator.min.js:4)
    at t.u._create (tabulator.min.js:4)
    at new t (tabulator.min.js:4)
    at (index):84

请告诉我，如何通过 ajax 将列加载到制表器中？

标签： tabulator

Answer 1

您不能将异步函数传递给 columns 参数。它需要一个列数组。

getColumns因此，您应该从中获取值getColumns，然后将其传递给 Tabulator 选项，而不是传递给 columns 选项。

我重新安排了你的代码，我相信这应该可行。

function getColumns(){
    return new Promise(function(resolve, reject){
        $.ajax({
            url: "worker.php?columns",
            success: function(data){
                resolve(data);
            },
            error: function(error){
                reject(error);
            }
        })
    });
}

getColumns().then((columns) => {
  var table = new Tabulator("#tables", {
    ajaxURL:"worker.php?data",
    ajaxRequestFunc:queryRealm,
    cellEdited:cEdit,
    history:true,
    clipboard:true,
    //autoColumns:true,
    clipboardPasteAction:"replace",
    layout:"fitData",
    columns:columns,
  });
});