我已经弄清楚了如何通过右键单击和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
单元格。无论我如何努力,我仍然看到一个空白的单元格。
非常感谢您的协助。
答案 0 :(得分:1)
大多数设置看起来不错。代替执行myTable.updateRow
,而使用newRows.update({field: 'new val'})
。因为您已经有了行引用,所以不需要获取ID。我认为这可以解决您的问题。
其他一些事情。
myTable.addData
而不是myTable.addRow
。然后,返回值将仅为1行,因此您不需要forEach
。table.redraw
可能不是必需的。这是一个非常简单的示例,应该执行您需要做的所有事情。我省略了上下文菜单,因为它与问题无关,但是您只需要将功能移到那里,就可以了。