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

Question

我已经弄清楚了如何通过右键单击和Tabulator属性以编程方式在rowContextMenu表中复制并插入新行；但是我很难以编程方式修改新插入的行的单元格内的数据。

我的Tabulator表设置代码的缩写如下：

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。我认为这将解决您的问题。

其他一些事情。

1. 您仅插入一行，因此请使用myTable.addData而不是myTable.addRow。然后，返回值将仅为1行，因此您不需要forEach。
2. table.redraw可能不是必需的。

这是一个非常简单的示例，应该执行您需要做的所有事情。我省略了上下文菜单，因为它与问题无关，但是您只需要将函数移到该菜单中就可以了。

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