Handsontable动态下拉框source属性绑定异常问题求助

问题场景 #

通过AJAX获取如下动态数据数组：

const data = [ // 所有值均为动态可变化
    ['Alex', '16', ['2024-01-01,50000', '2024-03-01,20000', '2024-05-01,30000']],
    ['Bob', '21', ['2022-02-01,50000', '2022-03-01,10000']],
    ['Jack', '20', ['2023-03-01,50000', '2023-04-01,60000', '2023-05-01,50000']],
    ['John', '18', ['2020-04-01,20000', '2020-05-01,50000', '2020-06-01,30000', '2020-07-01,50000']],
];

需要为Handsontable第三列设置下拉框，选项为对应行的日期金额组合值。因数据动态无法硬编码source属性，使用了动态getSource函数绑定：

function getSource(query, callback) {
    var selectedRow = hotInstance.getSelected()[0][0];
    var options = data[selectedRow][2];
    callback(options);
}

但出现异常：选择下拉项后，再次打开同一下拉框时，原完整选项（如'2024-03-01,20000'）被拆分为'2024-03-01'和'20000'两个独立元素，无法显示原选项集合。

问题原因 #

Handsontable的下拉编辑器默认以逗号作为选项分隔符，当选项字符串本身包含逗号时，编辑器会自动将其拆分为多个选项，导致原组合值被拆分。

解决方案 #

通过配置下拉编辑器的delimiter属性禁用逗号拆分，并完善列配置确保选项正确渲染：

完整代码示例

const data = [
    ['Alex', '16', ['2024-01-01,50000', '2024-03-01,20000', '2024-05-01,30000']],
    ['Bob', '21', ['2022-02-01,50000', '2022-03-01,10000']],
    ['Jack', '20', ['2023-03-01,50000', '2023-04-01,60000', '2023-05-01,50000']],
    ['John', '18', ['2020-04-01,20000', '2020-05-01,50000', '2020-06-01,30000', '2020-07-01,50000']],
];

let hotInstance;

function getSource(query, callback) {
    const selectedRow = hotInstance.getSelected()[0][0];
    callback(data[selectedRow][2]);
}

// 初始化Handsontable
hotInstance = new Handsontable(document.getElementById('example'), {
    data: data,
    colHeaders: ['Name', 'Age', 'Transaction'],
    columns: [
        { type: 'text' },
        { type: 'text' },
        {
            type: 'dropdown',
            source: getSource,
            // 禁用逗号分隔，避免拆分带逗号的选项
            delimiter: null,
            // 严格模式，限制只能选择给定选项
            strict: true,
            // 禁止输入无效值
            allowInvalid: false
        }
    ],
    rowHeaders: true,
    height: 'auto',
    licenseKey: 'non-commercial-and-evaluation'
});

关键说明 #

1. delimiter: null：关闭编辑器的自动拆分逻辑，确保每个带逗号的字符串作为单个选项存在。
2. strict: true：强制用户只能选择下拉框中的选项，避免手动输入导致的格式问题。
3. 数据源类型校验：确保AJAX返回的第三列数据是字符串数组，若存在类型转换问题，需提前处理数据格式。

内容的提问来源于stack exchange，提问作者Abdur Razzaq Qureshi