Handsontable Select2 Dynamic Options

Question

Я использую handsontable с помощью редактора select2, но я не могу заставить динамические параметры работать с выпадающим меню, т. Е. Параметры, установленные во время правильной инициализации, являются единственными параметрами, которые когда-либо показываются ,

Я попытался использовать глобальную переменную в качестве источника параметров и обновления, которые в разных точках моего кода, а также с помощью функции для возврата одной и той же переменной, но ни одна попытка не работает.

например.

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():

источника вара = [{ID: 'фиксированный', текст: 'Fixed'}, { идентификатор: 'переменная', текст: 'Variable'}];

и обновить select2Options к следующему:

select2Options: {данных: источник, dropdownAutoWidth: истинный}

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/