javascript - Handsontable Select2 动态选项

Question

我将handsontable与select2编辑器一起使用，但我似乎无法使动态选项与下拉菜单一起使用，即在handsontable初始化时设置的选项是唯一似乎显示的选项。

我尝试过使用全局变量作为选项的来源，并在代码中的各个点更新它，并且还使用函数返回相同的变量，但这两种尝试似乎都不起作用。

例如

var hot;
var data = [];

function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties) {

    if (instance.getCell(row, col)) {
        $(instance.getCell(row,col)).addClass('select2dropdown');
    }

    var selectedId;

    var colOptions = cellProperties.select2Options.data;

    if (colOptions != undefined) {

        for (var index = 0; index < colOptions.length; index++) {
            if (parseInt(value) === colOptions[index].id) {
                selectedId = colOptions[index].id;
                value = colOptions[index].text;            
            }
        }

        Handsontable.TextCell.renderer.apply(this, arguments);
    }
}

var  requiredText = /([^\s])/;

$(document).ready(function(){

    var
      $container = $("#example1"),
      $parent = $container.parent(),
      autosaveNotification;


    hot = new Handsontable($container[0], {
        columnSorting: true,
        stretchH: 'all',
        startRows: 8,
        startCols: 5,
        rowHeaders: true,
        colHeaders: ['Description', 'Cost', 'Remarks'],
        columns: [
            { data: 'description' },
            { 
                data: 'cost',
                editor: 'select2',
                renderer: customDropdownRenderer,
                select2Options: { data: getData(), dropdownAutoWidth: true }
            },
            { data: 'remarks' },
        ],
        minSpareCols: 0,
        minSpareRows: 1,
        contextMenu: true,
        data: []
    });

    data = [{id:'fixed',text:'Fixed'},{id:'variable',text:'Variable'}];
});

function getData() {
    return data;
}

http://jsfiddle.net/zfmdu4wt/27/

Answer 1

您已多次定义数据，这导致了争用。

以下更改将修复此问题:

在 .ready() 函数之后立即定义以下内容:

var source = [{id:'固定',text:'固定'},{id:'变量',text:'变量'}];

并将 select2Options 更新为以下内容:

select2Options:{数据:源，dropdownAutoWidth:true}