下拉多选类型单元格：在 SpreadJS 里接入 xm\-select

默认下拉列表通常只解决"选一个"的问题，但业务表格里经常要"选多个"：给一条记录打多个标签、给人员分配多个权限、给商品选择多个渠道、给任务绑定多个分类。下拉多选类型单元格 这个 demo 用 SpreadJS 自定义单元格类型接入第三方组件 xm-select，让用户双击单元格后打开多选下拉，并把结果显示回单元格。

为什么这个细节重要

多选字段如果让用户手动输入逗号分隔文本，很容易出现错字、空格和顺序不一致；如果把每个选项都拆成复选框列，表格又会膨胀。自定义 CellType 的价值在于：显示时它仍然是一个普通单元格，编辑时却可以变成完整的 UI 控件。

demo 中 B2 单元格被设置为 DropdownMultiSelect。用户双击后，xm-select 渲染到编辑器容器里，可以勾选 MUL1、MUL2、MUL3。显示文本写入单元格，选项值数组写入 tag，形成"给人看"和"给程序用"的分离。

这种分离很重要。界面上显示名称，便于阅读和打印；提交数据时使用 value 数组，便于后端识别和统计。

SpreadJS 的实现思路

自定义类型继承 GC.Spread.Sheets.CellTypes.Text，然后重写编辑器生命周期方法。createEditorElement 返回一个 div 作为 xm-select 挂载点；activateEditor 在进入编辑时调用 SpreadJS 基础激活逻辑，并根据当前单元格文本恢复已选项。

javascript 复制代码

function DropdownMultiSelect() {}
DropdownMultiSelect.prototype =
  new GC.Spread.Sheets.CellTypes.Text();

DropdownMultiSelect.prototype.createEditorElement = function () {
  let div = document.createElement("div");
  $(div).attr("id", "xm-select-container");
  return div;
};

sheet.setCellType(1, 1, new DropdownMultiSelect());

在 activateEditor 中，代码先把当前显示文本按逗号拆开，再与 selectList 匹配成 initValue。xm-select 的 on 回调里，遍历选中项，把名称拼成逗号字符串写入 setValue，同时把选项 value 数组写入 sheet.setTag。

ini 复制代码

xmSelect.render({
  el: "#xm-select-container",
  data: selectList,
  initValue: index,
  toolbar: { show: true, list: ["ALL"] },
  on: function (data) {
    let names = data.arr.map(item => item.name).join(",");
    let values = data.arr.map(item => item.value);
    sheet.setTag(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), values);
    sheet.setValue(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), names);
  }
});

可以扩展到哪些场景

这个模式适合标签、角色权限、适用渠道、产品属性、项目成员、问题类型等字段。选项可以从固定数组改为接口加载，也可以增加搜索、分组、禁用项、默认项和最大选择数量。对于产品来说，它能把复杂选择留在一个单元格里；对于开发者来说，setTag 保留结构化值，后续提交和计算更方便。

需要注意，demo 依赖 jQuery、layui 和 xm-select。生产环境要评估组件体积和样式隔离；如果一个表格里有大量多选单元格，建议只在进入编辑时渲染组件，避免一次性创建太多 DOM。

如果选项会频繁变化，还要考虑回显兼容：历史数据里的 value 找不到对应名称时，最好给出明确提示，而不是静默丢失。

给开发者的关键词

SpreadJS、CellTypes.Text、自定义 CellType、createEditorElement、activateEditor、setEditorValue、getEditorValue、updateEditor、setCellType、setTag、xm-select、多选下拉单元格。

小结

下拉多选类型单元格 展示了 SpreadJS 的一个重要扩展方向：把单元格从简单输入框变成业务控件。显示层保持紧凑，编辑层提供完整交互，数据层再用 tag 保存结构化结果，三者分开后，表格应用会更耐用。