保存 slickgrid 单元格自动完成值答案

【问题标题】：Save slickgrid cell autocomplete value保存 slickgrid 单元格自动完成值
【发布时间】：2022-01-01 18:18:21
【问题描述】：

我有一个带有自动完成功能和自定义格式化程序的 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中就好了。

有什么方法可以实现吗？

【问题讨论】：

标签： javascript slickgrid

【解决方案1】：

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

所以回到显示标签的关联键，我在我的库中做了类似的事情Example和现场演示here，在我的用例中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
        },
      },
   ];
  }
}

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

【讨论】：