Handsontable 更改一个列源

Question

是否可以在事件内部更改 Handsontable 实例中的源？

下面是我的代码：

var container2 = $('#example2');

var hot2 = new Handsontable(container2, {
    data: {},
    minRows: 5,
    colHeaders: ['Car', 'Year', 'Car Color'],
    columns: [
        {
            type: 'autocomplete',
            source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
            strict: true,
            allowInvalid: false
        }, ,
        {},
        {
            type: 'autocomplete',
            source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
            strict: true,
            allowInvalid: false
        }]
});

Handsontable.hooks.add('afterChange', afterChangedCallback, hot2);

function afterChangedCallback(p) {
    console.log(p);
    if (p[0][1] == 0) {
        alert('This means the first column has changed, I now want to update the colors here');
    }
}

当用户选择不同的汽车品牌时，我只想用某些颜色填充 "Car Color" 的下拉列表。因此，并不是所有的汽车品牌都有相同的颜色。

编辑

我根据已接受的答案将回调函数更新为：

function afterChanged(p) {
    console.log(p);
    if (p[0][1] == 0) {
        hot2.updateSettings({
            cells: function (row, col, prop) {
                if (row == p[0][0] && col == 2) {
                    var cellProperties = {};

                    cellProperties.source = ['red', 'yellow', 'blue'];

                    return cellProperties;
                }
            }
        });

    }
}

Answer 1

是的，您可以使用 updateSettings 方法更改整个列或特定单元格的来源。你可能想要 per-cell 所以我会这样做：

hot.updateSettings({
    cells: newCellDefinitionFunction()
})

当然，这个新定义由您自己决定。它可能每次都返回相同的 cellProperties，但检查一些全局数组以了解哪些源用于哪些单元格。

Handsontable 更改一个列源

Handsontable change a column source

handsontable