Handsontable Select2動態選項

Question

我正在使用selecton編輯器的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

您已經定義了數據多次，這是造成衝突。

以下更改將修復它：

定義以下後立即。就緒（）函數：

VAR源= [{ID： '固定'，文本： '固定'}，{ ID： '變量'，文本：變量'}];

和更新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/