Question

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

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

e.g。

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/

Handsontable Select2动态选项

2 个答案: