Question

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

<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>

然后我像这样初始化Tabular：

$("#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不是函数。

它应该像这样工作吗？

Answer 1

该消息表明您在调用 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);

您只需要确保将其分配给表变量时，该变量处于一个可以由需要它的所有函数访问的范围内

Answer 2

我正在将Tabulator初始化到以<table id="myTable">元素为目标的现有表上。尽管起初效果很好，但尝试尝试其他方法（如我的问题）会导致“错误：初始化前无法在制表器上调用方法”。

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

现在，所有操作均按预期/已记录。 Dunno，如果这是一个错误/应该像这样/我自己的能力不足，但至少我可以继续。

错误：初始化前无法在制表器上调用方法；尝试调用方法“ addRow”

2 个答案: