制表器自动完成更新另一个单元格

Question

我试图使用制表器如下:

从数据库中提取一组key->值，其中包含类似于:

• "那"→"名字是john smith">
• AndrewSmith -。名字是'andrew smith'

column1包含一个"自动竞争"列表，从上面的关键字。输入'smith'将允许我选择两个键中的一个

column2在选择了正确的选项后，单元格将使用正确的"Name is…"填充。"价值

我尝试了很多选项，包括:

• 在自动补全单元格上使用' cellledited '回调
• 添加一个mutator来更新第二个cell
• 为格式化器添加onrender函数

我怀疑我只是通过javascript错过了一些东西，但希望有人能指出我在正确的方向。

Answer 1

您没有指定您正在使用的制表器版本，但从版本5.0开始，cellEdited回调已更改为事件。因此，您现在可以使用:

table.on("cellEdited", function() {
//do something
})

下面是一个工作示例:

var people = [{
key: 'John Smith',
value: 'Name is john smith'
},
{
key: 'Andrew Smith',
value: 'Name is andrew smith'
}
]
var tableData = [{
name: "Oli",
nameIs: "Name is Oli Bob"
}]
var table = new Tabulator("#example-table", {
height: '100%',
layout: "fitColumns",
data: tableData,
columns: [{
title: "Name",
field: "name",
editor: 'autocomplete',
editorParams: {
showListOnEmpty: true,
freetext: true,
allowEmpty: true,
searchFunc: (term, values) => {
const matches = []
people.forEach(person => {
const name = person.key
const nameIs = person.value
if (name.toLowerCase().startsWith(term.toLowerCase())) {
matches.push(name)
}
})
return matches
},
values: false
}
},
{
title: "Name Is",
field: "nameIs"
}
]
})
table.on("cellEdited", (cell) => {
const name = cell.getValue()
const row = cell.getRow()
const nameIs = people.filter(p => p.key == name)[0].value
row.update({
"nameIs": nameIs
})
})

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>