Совместимые цвета смены ячеек/строк/столбцов с выбором цвета?

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

РЕДАКТИРОВАТЬ: Refactored код для ясности.

Цвет был изменен последующими вызовами, потому что ваш обратный вызов 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 который ожидает, так что вы кал просто вызовите styles.setCellStyle (строка, столбец, цвет), и он будет заботиться о создании или обновлении для вас.

JSFiddle