错误：无法在初始化之前调用制表器上的方法；试图调用方法“addRow”答案

【问题标题】：Error: cannot call methods on tabulator prior to initialization; attempted to call method 'addRow'错误：无法在初始化之前调用制表器上的方法；试图调用方法“addRow”
【发布时间】：2019-06-30 19:47:55
【问题描述】：

我有一个带有表格的页面：

<table id="myTable">
        <thead>
            <tr>
                <th>Description</th>
                <th>Qty</th>
                <th>Cost</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                @Html.EditorFor(model => item);
            }
        </tbody>
    </table>

然后我像这样初始化表格：

$("#myTable").tabulator({
    layout: "fitColumns",
    addRowPos: "bottom",
    columns: [
        { title: "Description", field: "Description", editor: "input" },
        { title: "Qty", field: "Quantity", sorter: "number", editor: "number", editorParams: { min: 0, step: 1, } },
        { title: "Cost", field: "Cost", sorter: "number", editor: "number", editorParams: { min: 0, step: 0.1, }, align: "right", formatterParams: { decimal: '.', thousand: '.', symbol: "R" }, bottomCalc: "sum", bottomCalcFormatter: "money", bottomCalcFormatterParams: { decimal: '.', thousand: '.', symbol: "R" } },
        { formatter: "buttonCross", width: 30, align: "center", cellClick: function (e, cell) { cell.getRow().delete(); } },
    ],
});

这一切都很好，但我尝试添加：

$("#add-row").click(function () {
    $("#myTable").tabulator("addRow", {}, true);
});

单击我的按钮添加新行会导致：错误：无法在初始化之前调用制表符上的方法；试图调用方法'addRow'

我尝试这样做：var table = $("#myTable").tabulator... 和 table.addRow({}) 但随后我收到一条错误消息，提示 addRow 不是函数。

它应该像这样工作吗？

【问题讨论】：

你能提供一些脚本细节来重现这个问题吗？我尝试在 this fiddle 中使用标准 Tabulator 和 jQuery 包装器，但控制台不断抛出 $(...).tabulator is not a function。
我按照here 的说明先尝试了CDN，但这也给了我$(...).tabulator is not a function。我最终下载了库。在你的小提琴上使用 CDN 仍然会出现错误（不知道我是否正确加载它） PS。在本地，我引用 tabulator.js、jquery_wrapper.js 和 bootstrap css。
该表位于 PartialView 中。部分视图引用了我的脚本文件，其中包含初始化代码以及按钮单击代码。在我尝试引用制表符之前，这一切都很好。 DOM 似乎“忘记”了它的存在。将初始化代码移动到包含视图并使用制表符“内置”回调，我设法让它工作。我想将初始化代码保留在它自己的脚本文件中，链接到部分视图，但除非有办法绕过 DOM“忘记”，否则我将不得不接受我所得到的。

标签： asp.net-mvc tabulator

【解决方案1】：

我正在将一个制表符初始化到一个以<table id="myTable"> 元素为目标的现有表上。虽然这最初效果很好，但尝试其他东西（比如我的问题）继续导致“错误：无法在初始化之前调用制表符上的方法”。

我最终抓取预定义的<table> 并在<div id="myTable"> 上进行初始化并通过ajax 获取数据。

现在一切都按预期/记录在案。不知道这是不是一个错误/应该像这样工作/我自己的无能，但至少我可以继续前进。

【讨论】：

通过 ajax 拉取数据将是一种更标准的方式，非常好的方法
所以看起来......我想我可以走捷径并定义一个包含数据的表格，然后让制表器为我转换它......这是一个坏主意。经验教训

【解决方案2】：

该消息表明您在调用 addRow 函数之前尚未创建 Tabulator 对象。

如果您是 Tabulator 新手，那么我建议您不要使用 jQuery 包装器。旧 3.5 版本的遗留原因更多。

在这种情况下，您应该使用构造函数：

var table = new Tabulator("#myTable", {
    layout: "fitColumns",
    addRowPos: "bottom",
    columns: [
        { title: "Description", field: "Description", editor: "input" },
        { title: "Qty", field: "Quantity", sorter: "number", editor: "number", editorParams: { min: 0, step: 1, } },
        { title: "Cost", field: "Cost", sorter: "number", editor: "number", editorParams: { min: 0, step: 0.1, }, align: "right", formatterParams: { decimal: '.', thousand: '.', symbol: "R" }, bottomCalc: "sum", bottomCalcFormatter: "money", bottomCalcFormatterParams: { decimal: '.', thousand: '.', symbol: "R" } },
        { formatter: "buttonCross", width: 30, align: "center", cellClick: function (e, cell) { cell.getRow().delete(); } },
    ],
});

然后你可以像这样添加行：

table.addRow({}, true);

您只需要确保当您将其分配给 table 变量时，它位于所有需要它的函数都可以访问的范围内

【讨论】：

谢谢，奥利。我将看看使用构造函数。仍然掌握这一切是如何工作的（不是一个大型的前端、jquery、js 开发人员，所以我正在学习）。我找到了问题的真正根源，我将把它作为我的答案发布。