javascript - 使用颜色选择器手动更改单元格/行/列的颜色？

Question

我有一个已经发生颜色变化的例子。问题在于，更改新单元格、行或列的颜色将更改前一个单元格/行/列的颜色。前一个单元格应该保持其原始颜色，我需要使用一个函数(而不是多个渲染器)动态地发生这种情况。 fiddle 中有 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 所期望的原始单元格样式数组的包装器，以便您只需调用 styles.setCellStyle(row, col, color) ，它就会为您创建或更新单元格数组.

JSFiddle