如何以编程方式更改 Tabulator 中以编程方式插入的行的单元格值？

Question

我已经弄清楚如何使用右键单击和 rowContextMenu 属性以编程方式在我的 Tabulator table 中复制和插入新行；但是我在以编程方式修改新插入行的单元格内的数据时遇到困难。

我的Tabulator table设置代码的缩略版如下：

function TabulatorTimeSheet(divId) {
    try {
        var myActionContextMenu = [
            {
                label: "Copy & Paste Row",
                action: function (e, row) {
                    var myTable = row.getTable();
                    var rowData = row.getData();
                    var idx = 0;
                    myTable.addData(rowData, false)
                        .then(function (newRows) {
                            //NOTE: The [Added] column of the new row needs to be set to "true".
                            newRows.forEach(newRow => {
                                idx = newRow.getPosition(true);
                                myTable.updateRow(idx, { Added: "true" });
                            });
                            myTable.redraw(true);
                        })
                }
            }
        ]
        var table = new Tabulator(divId, {
            height: "100%",
            data: [],
            layout: "fitDataFill",
            selectable: 1,
            cellEdited: function (cell) {
                    var myTable = cell.getTable();
                    var row = cell.getRow();
                    var rowData = row.getData();
                    rowData["Changed"] = "true";
            },
            rowContextMenu: myActionContextMenu,
            columns: [
                { title: "Date Worked", field: "DateComp", responsive: 0, hozAlign: "center", sorter: "date", editor: dateEditor },
                { title: "Start Time", field: "TimeStart", responsive: 0, hozAlign: "center", sorter: "time", editor: timeEditor },
                { title: "Finish Time", field: "TimeFinish", responsive: 0, hozAlign: "center", sorter: "time", editor: timeEditor },
                { title: "Added", field: "Added", visible: true, responsive: 0, hozAlign: "center" },
                { title: "Changed", field: "Changed", visible: false, responsive: 0, hozAlign: "center" }            ]
        });
        table.setData(myEndPointURL, { caseSelector: myCaseSelector, emplId: myEmployeeId });
    }
    catch (error) {
        console.log(error);
    }

addData()函数按预期插入所选行的副本；但是，我无法修改新插入行的 Added 单元格。不管我怎么努力，我仍然看到一个空白单元格。

非常感谢任何帮助。

Answer 1

您的大部分设置看起来都不错。不要使用 myTable.updateRow，而是使用 newRows.update({field: 'new val'})。因为您已经有了行引用，所以不需要获取 id。我认为这将解决您的问题。

其他一些事情。

您只插入一行，因此请使用 myTable.addRow 而不是 myTable.addData。然后，return 值将只有 1 行，因此您不需要 forEach.
可能不需要 table.redraw。

这是一个非常简单的示例，应该可以满足您的所有需求。我省略了上下文菜单，因为它与问题无关，但你只需要把功能移到那里就可以了。

https://jsfiddle.net/nrayburn/65cngder/6/

如何以编程方式更改 Tabulator 中以编程方式插入的行的单元格值？

How do I programmatically change a cell value for a programmatically inserted row in Tabulator?

tabulator