Handsontable Select2 动态选项

Question

我在 select2 编辑器中使用 handsontable，但我似乎无法使动态选项与下拉菜单一起使用，即在 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:'fixed',text:'Fixed'},{id:'variable',text:'Variable'}];

并将 select2Options 更新为以下内容：

select2Options : { data: source, dropdownAutoWidth: true }

Answer 2

我设法通过重新使用一些代码来解决与 xeditable 插件相同的问题。

这是更新后的代码：

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 }
                select2Options: { data: getSource(), dropdownAutoWidth: true, width: 'resolve', initSelection: getInitSel(false), query: getQuery }
            },
            { data: 'remarks' },
       ],
       minSpareCols: 0,
       minSpareRows: 1,
       contextMenu: true,
       data: []
    });

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

/*
function getData() {
    return data;
}
*/

// New Code

function getSource() {
    return data;
};

function getQuery(options) {
    options.callback({ results : getSource() });
};

function getInitSel(multiple) {
    return function(el, cb) {
        var t, toSet = [], sc = getSource();
        el[0].value.split(',').forEach(function(a) {

            for (var i = 0; i < sc.length; i++) {
                if (sc[i].id == Number(a.trim())) {
                    t = sc[i];
                }
            }

            // or, if you are using underscore.js
            // t = _.findWhere(sc, { id : Number(a.trim()) });

            if(t) toSet.push(t);
        });
        cb(multiple ? toSet : (toSet.length ? toSet[0] : null));
    };
};

还有一个用于演示的小提琴 - http://jsfiddle.net/zfmdu4wt/38/