如何保存SlickGrid单元格自动完成选中值 供自定义formatter渲染使用

针对动态加载自动完成列表后formatter无法获取标签的问题，有3种可落地的实现方案：

方案1：行数据附加标签字段（最推荐，性能最优） #

核心逻辑是在选中自动完成项时就把标签值提前存到当前行数据里，formatter直接读取无需二次查询：

• 调整autocompletion的选中回调逻辑，除了给单元格赋值order_id外，给当前行的dataContext新增自定义字段如contract_label，存储选中的标签文本
• 改造formatter代码如下：

function contractFormatter(row, cell, value, columnDef, dataContext) {               
    var res = '';  
    // 直接从行数据读取已存储的标签
    var val = dataContext.contract_label || '';
    res = '<span class="' + getSpanClass() + '" style="float: left;"></span>\n\
           '+ (val =='' ? '<span style="color:slategrey;">  Enter 3 symbols </span>' : val) + '';
    return res;
}

该方案无需额外维护缓存，无异步渲染延迟，适配性最强。

方案2：维护已加载合同本地缓存 #

如果存在多场景复用合同标签的需求，不想在行数据中存冗余字段，可以用本地缓存兜底：

• 定义全局/模块级缓存对象const loadedContractCache = {}
• 在autocompletion拉取动态选项的接口回调中，把返回的所有选项的order_id和对应label存入缓存
• 若formatter读取时缓存未命中，可异步拉取单个合同的标签信息，获取完成后调用SlickGrid的invalidateRow方法刷新对应行即可，参考代码：

// 全局已加载合同缓存
const loadedContractCache = {};

function contractFormatter(row, cell, value, columnDef, dataContext) {               
    var res = '';  
    var val = loadedContractCache[value]?.label || '';

    // 缓存未命中且存在有效order_id时异步拉取
    if (value && !val) {
        // 替换为你的单个合同查询接口
        fetchSingleContractInfo(value).then(contractInfo => {
            loadedContractCache[value] = contractInfo;
            // 刷新当前行触发重新渲染
            grid.invalidateRow(row);
            grid.render();
        })
        // 拉取过程显示加载提示
        val = '<span style="color:slategrey;">加载中...</span>';
    }

    res = '<span class="' + getSpanClass() + '" style="float: left;"></span>\n\
           '+ (val =='' ? '<span style="color:slategrey;">  Enter 3 symbols </span>' : val) + '';
    return res;
}

方案3：单元格直接存储键值对 #

如果后续逻辑不需要单独使用order_id，可以直接修改单元格存储结构，选中自动完成项时给单元格赋值为{id: order_id, label: 选中的标签}，formatter直接读取value.label即可。该方案改动最小，但需要同步适配所有用到该单元格值的业务逻辑。

内容的提问来源于stack exchange，提问作者Danatela