Handsontable Select2 动态选项

Question

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

我尝试使用一个全局变量作为选项的来源并在我的代码中的不同点更新它，还使用一个函数来 return 相同的变量，但似乎都没有成功。

例如

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

我通过重新使用一些我用来解决与 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));
    };
};

和一个用于演示的 fiddle - http://jsfiddle.net/zfmdu4wt/38/

Answer 2

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

以下更改将修复它：

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

var source = [{id:'fixed',text:'Fixed'},{id:'variable',text:'Variable'}];

并将 select2Options 更新为以下内容：

select2Options : { data: source, dropdownAutoWidth: true }

Handsontable Select2 动态选项

Handsontable Select2 Dynamic Options

javascript

jquery

jquery-select2

handsontable