Handsontable使用颜色选择器更改单元格/行/列的颜色？

Question

我有一个颜色变化的例子已经发生。问题是改变新单元格，行或列的颜色会改变前一个单元格/行/列的颜色。之前的单元格应该保持原来的颜色，并且我需要用一个函数（而不是多个渲染器）动态地发生这种情况。小提琴中有3种颜色选项，但我实际上使用了一种具有数百个选项的颜色选择器。我该如何处理这种颜色变化（点击右键）？

http://jsfiddle.net/anschwem/hkhk5zbo/17/

var data = [ 
     ['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'], 
     ['2009', 0, 2941, 4303, 354, 5814], 
     ['2010', 3, 2905, 2867, 412, 5284], 
     ['2011', 4, 2517, 4822, 552, 6127], 
     ['2012', 2, 2422, 5399, 776, 4151] 
    ], 
    celldata = [], 
    container = document.getElementById('example'), 
    hot, 
    sentrow, 
    sentcol; 

var colorRenderer = function (instance, td, row, col, prop, value, cellProperties) { 
    Handsontable.renderers.TextRenderer.apply(this, arguments); 
    td.style.backgroundColor = $('#color_field').val(); 

}; 


var settings = { 
    data: data, 
    minSpareRows: 1, 
    rowHeaders: true, 
    colHeaders: true, 
    contextMenu: true, 
    startRows: 5, 
    startCols: 5, 

    //columns: coldata, 
    cell: celldata, 
    cells: function (row, col, prop) { 
     if (row === sentrow) { 
      this.renderer = colorRenderer; 
     } 
     if (col === sentcol) { 
      this.renderer = colorRenderer; 
     } 
    }, 
}; 

hot = new Handsontable(example, settings); 

hot.updateSettings({ 
    contextMenu: { 
     callback: function (key, options) { 
      if (key === 'cellcolor') { 
       setTimeout(function() { 
        //timeout is used to make sure the menu collapsed before alert is shown 
        var row = hot.getSelected()[0]; 
        var col = hot.getSelected()[1]; 

        var item = {}; 
        item.row = row; 
        item.col = col; 
        item.renderer = colorRenderer 
        celldata.push(item) 

        hot.updateSettings({cell: celldata}); 
        hot.render(); 

       }, 100); 
      } 
      if (key === 'rowcolor') { 
       setTimeout(function() { 
        //timeout is used to make sure the menu collapsed before alert is shown 
        var row = hot.getSelected()[0]; 
        sentrow = row; 
        hot.render(); 

       }, 100); 
      } 
      if (key === 'colcolor') { 
       setTimeout(function() { 
        //timeout is used to make sure the menu collapsed before alert is shown 
        var col = hot.getSelected()[1]; 
        sentcol = col; 
        hot.render(); 

       }, 100); 
      } 
     }, 
     items: { 
       "cellcolor": { 
       name: 'Cell color' 
      }, 
       "rowcolor": { 
       name: 'Row color' 
      }, 
       "colcolor": { 
       name: 'Column color' 
      }, 
     } 
    } 
}) 

Answer 1

编辑：重构为了清楚的代码。

随后的调用正在改变颜色，因为您的colorRenderer回调在每次渲染时询问下拉列表，而不是在创建单元格样式时捕获值。

$(document).ready(function() { 
    var data = [ 
       ['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'], 
       ['2009', 0, 2941, 4303, 354, 5814], 
       ['2010', 3, 2905, 2867, 412, 5284], 
       ['2011', 4, 2517, 4822, 552, 6127], 
       ['2012', 2, 2422, 5399, 776, 4151] 
       ]; 

    var container = document.getElementById('example'); 

    // Put your color picker function here 
    function getSelectedColor() { 
     return $('#color_field').val(); 
    } 

    var TableStyles = function(hot) { 
     var self = this; 

     var _cellStyles = []; 

     var _createStyle = function(row, col, color) { 
      var _color = color; 

      var style = { 
       row: row, 
       col: col, 
       renderer: function (instance, td, row, col, prop, value, cellProperties) { 
           Handsontable.renderers.TextRenderer.apply(this, arguments); 
           td.style.backgroundColor = _color; 
          }, 
       color: function(c) { _color = c; }     
      };  

      return style; 
     }; 

     self.getStyles = function() { 
      return _cellStyles; 
     }; 

     self.setCellStyle = function(row, col, color, updateTable) { 
      var _color = color; 

      if (_cellStyles.length == 0) { 
       _cellStyles.push(_createStyle(row, col, color)); 
      } else { 
       var found = _cellStyles.some(function(cell) { 
        if (cell.row == row && cell.col == col) {       
         cell.color(color); 
         return true; 
        } 
       }); 

       if (!found) { 
        _cellStyles.push(_createStyle(row, col, color)); 
       } 
      }     

      if (updateTable!=false) { 
       hot.updateSettings({cell: self.getStyles()}); 
       hot.render();       
      };     
     }; 

     self.setRowStyle = function(row, color) { 
      for (var col=0; col<hot.countCols(); col++) 
       self.setCellStyle(row, col, color, false); 

      hot.updateSettings({cell: self.getStyles()}); 
      hot.render();       
     }; 

     self.setColStyle = function(col, color) { 
      for (var row=0; row<hot.countCols(); row++) 
       self.setCellStyle(row, col, color, false); 

      hot.updateSettings({cell: self.getStyles()}); 
      hot.render();       
     }; 
    }; 

    var settings = { 
     data: data, 
     minSpareRows: 1, 
     rowHeaders: true, 
     colHeaders: true, 
     contextMenu: true, 
     startRows: 5, 
     startCols: 5, 
     cell: [] 
    }; 

    hot = new Handsontable(container, settings); 

    var styles = new TableStyles(hot);   

    hot.updateSettings({ 
     contextMenu: { 
      callback: function (key, options) {     
       if (key === 'cellcolor') { 
        setTimeout(function() {       
         var sel = hot.getSelected();       

         styles.setCellStyle(sel[0], sel[1], getSelectedColor()); 
        }, 100); 
       } 
       if (key === 'rowcolor') { 
        setTimeout(function() { 
         //timeout is used to make sure the menu collapsed before alert is shown 
         var sel = hot.getSelected();       

         styles.setRowStyle(sel[0], getSelectedColor()); 
        }, 100); 
       } 
       if (key === 'colcolor') { 
        setTimeout(function() { 
         //timeout is used to make sure the menu collapsed before alert is shown 
         var sel = hot.getSelected();       

         styles.setColStyle(sel[1], getSelectedColor()); 
        }, 100); 
       } 
      }, 
      items: { 
        "cellcolor": { 
        name: 'Cell color' 
       }, 
        "rowcolor": { 
        name: 'Row color' 
       }, 
        "colcolor": { 
        name: 'Column color' 
       }, 
      } 
     } 
    }) 
}); 

的TableStyles对象提供的原始细胞风格阵列Handsontable期待各地的包装，让您的CAL只需要调用styles.setCellStyle（行，列，颜色），这将需要创建或更新的护理为你的单元阵列。

JSFiddle