保存slickgrid单元格自动完成值

Question

我有一个带有自动补全和自定义格式化程序的slickgrid单元格。单元格值是动态加载自动完成列表的关键字段。列表显示为标签(例如Contract: ABCDEF-123, thick:10, width:210, City: Chicago(，当我选择一个时，它会出现在相应的输入字段中。关键是格式化程序不知道那个标签，它只知道密钥(order_id(。

function contractFormatter(row, cell, value, columnDef, dataContext) {               
var res = '';  
var val = get_contract_list()[value] ? get_contract_list()[value]['label'] : '';
res = '<span class="' + getSpanClass() + '" style="float: left;"></span>n
'+ (val =='' ? '<span style="color:slategrey;">  Enter 3 symbols </span>' + val : val) + '';
return res;
}

函数get_contract_list返回整个合同列表，它非常大，因此决定使该列表动态。因此，函数现在是空的，只需将所选标签放入val中即可。

有什么办法实现它吗？

Answer 1

您必须记住格式化程序是同步的，它必须立即以字符串格式返回，如果它在保持同步的同时需要大量处理能力，那么您最终会减慢网格的速度。您可能应该在一个单独的变量中缓存一次列表，然后使用它，而不是每次都重新加载列表。如果您加载的东西需要时间并且是异步的(延迟输出(，那么您需要查找asyncPostRenderer(您可以看到这个示例(

因此，回到显示标签的关联键，我在本例的lib中做了类似的事情，并在这里做了一个实时演示，在我的用例中，value是一个键索引，我使用complexityLevelList来找到它的关联对象，然后我可以读取它的标签以显示在格式化程序中。

export class MyExample {
complexityLevelList = [
{ value: 0, label: 'Very Simple' },
{ value: 1, label: 'Simple' },
{ value: 2, label: 'Straightforward' },
{ value: 3, label: 'Complex' },
{ value: 4, label: 'Very Complex' },
];
prepareGrid() {
this.columnDefinitions = [
{
id: 'complexity', name: 'Complexity', field: 'complexity', minWidth: 100,
formatter: (_row, _cell, value) => this.complexityLevelList[value].label,
filter: {
model: Filters.multipleSelect,
collection: this.complexityLevelList
},
editor: {
model: Editors.singleSelect,
collection: this.complexityLevelList,
massUpdate: true
},
},
];
}
}

请注意，过滤器&编辑器是特定于我的lib Slickgrid Universal的，但您应该了解如何重构代码以使其工作。