Handsontable：在运行时更新单元格渲染器

Question

我正在使用handsontable，如果单元格的值被编辑和更改，我想更改单元格的背景颜色。如果我的数据源是数组数组，我可以轻松做到这一点（参见小提琴：http://jsfiddle.net/chiman24/3o2c3c7m/）。

document.addEventListener("DOMContentLoaded", function() {

    // Row Styles
    var blank = function(instance, td, row, col, prop, value,
        cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        td.style.backgroundColor = '#ABAAAA'
    };

    var align = function(instance, td, row, col, prop, value,
        cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        td.style.verticalAlign = 'middle';
        td.style.fontWeight = 'bold';
    };

    var highlight1 = function(instance, td, row, col, prop, value,
        cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        td.style.backgroundColor = '#BDD7EE';
        td.style.textAlign = 'right';
    };

    var changedBackgroundColor = '#cbd9e4';
    var defaultBackgroundColor = 'white';
    var hasChanged = function(instance, td, row, col, prop, value,
        cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        td.style.backgroundColor = changedBackgroundColor;
    };
    var noChange = function(instance, td, row, col, prop, value,
        cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        td.style.backgroundColor = defaultBackgroundColor;
    };

    var data = [
            ["1", "Hear us from heaven", "New Life Worship",
                "Anderson, Jared", "something"
            ],
            ["2", "Spirit Break Out", "Kim Walker", "Walker, Kim",
                "Still Believe"
            ]
        ],
        dataCopy = [
            ["1", "Hear us from heaven", "New Life Worship",
                "Anderson, Jared", "something"
            ],
            ["2", "Spirit Break Out", "Kim Walker", "Walker, Kim",
                "Still Believe"
            ]
        ],
        container = document.getElementById('example1'),
        hot1;


    //Table Row and Col Options
    hot1 = new Handsontable(container, {
        data: data,
        fixedColumnsLeft: 1,
        columnSorting: true,
        colHeaders: ["id", "title", "artist", "author", "album"],
        columns: [{
            type: "text"
        }, {
            type: "text"
        }, {
            type: "text"
        }, {
            type: "text"
        }, {
            type: "text"
        }]
    });

    hot1.addHook('afterChange', afterChange);

    function afterChange(changes, source) {
        if (source == 'edit' || source == 'autofill') {
            $.each(changes, function(index, element) {
                var change = element;
                var rowIndex = change[0];
                var columnIndex = change[1];
                var oldValue = change[2];
                var newValue = change[3];
                var cellChange = {
                    'rowIndex': rowIndex,
                    'columnIndex': columnIndex
                };
                if (oldValue != newValue) {
                    var cellProperties = hot1.getCellMeta(
                        rowIndex, columnIndex);
                    if (newValue != dataCopy[rowIndex][
                            columnIndex
                        ]) {
                        cellProperties.renderer = hasChanged;
                    } else { //data changed back to original value.
                        cellProperties.renderer = noChange;
                    }
                    hot1.render();
                }
            });
        }
    }
});


// noSideScroll class added to fix some containers while side scrolling the table
$(window).scroll(function() {
    $('.noSideScroll').css({
        'left': $(this).scrollLeft()
    });
});

但是，当使用对象数组时，我无法让它工作。 （见小提琴：http://jsfiddle.net/chiman24/24mpavga/）。

var data = [{
        "id": 1,
        "title": "First Loved Me",
        "artist": "Israel and New Breed",
        "author": "Houghton, Israel",
        "album": "Covered:  Alive In Asia"
    }, {
        "id": 2,
        "title": "One Thing Remains",
        "artist": "Israel and New Breed",
        "author": "Houghton, Israel",
        "album": "Covered:  Alive In Asia"
    }],
    dataCopy = [{
        "id": 1,
        "title": "First Loved Me",
        "artist": "Israel and New Breed",
        "author": "Houghton, Israel",
        "album": "Covered:  Alive In Asia"
    }, {
        "id": 2,
        "title": "One Thing Remains",
        "artist": "Israel and New Breed",
        "author": "Houghton, Israel",
        "album": "Covered:  Alive In Asia"
    }],
    container = document.getElementById('example1'),
    hot1;


//Table Row and Col Options
hot1 = new Handsontable(container, {
    data: data,
    fixedColumnsLeft: 1,
    columnSorting: true,
    colHeaders: ["id", "title", "artist", "author", "album"],
    columns: [{
        data: "id"
    }, {
        data: "title"
    }, {
        data: "artist"
    }, {
        data: "author"
    }, {
        data: "album"
    }]
});

hot1.addHook('afterChange', afterChange);

function afterChange(changes, source) {
    if (source == 'edit' || source == 'autofill') {
        $.each(changes, function(index, element) {
            var change = element;
            var rowIndex = change[0];
            var columnIndex = change[1];
            var oldValue = change[2];
            var newValue = change[3];
            var cellChange = {
                'rowIndex': rowIndex,
                'columnIndex': columnIndex
            };
            if (oldValue != newValue) {
                var cellProperties = hot1.getCellMeta(
                    rowIndex, columnIndex);
                if (newValue != dataCopy[rowIndex][
                        columnIndex
                    ]) {
                    cellProperties.renderer = hasChanged;
                } else { //data changed back to original value.
                    cellProperties.renderer = noChange;
                }
                hot1.render();
            }
        });
    }
}

有没有办法做到这一点？我想让它使用一组对象来工作，因为我来自服务器的数据将采用 JSON 格式。我已经搜索了几天的handsontable文档无济于事。任何帮助都感激不尽。谢谢。

Answer 1

我从可动手做的 github 论坛获得了一些帮助。

显然，如果数据源是一个对象数组，那么在调用“getCellMeta”时，您必须将列索引作为属性传入，而不是传入数字列索引，如下所示：

hot.getCellMeta(2, hot.propToCol(columnIndex));

这是更新后的demo

Answer 2

改变单元格背景颜色的其他方法是使用单元格选项

...
if (oldValue != newValue){

    aCell.push(
        { row: rowIndex, 
          col: hot.propToCol(columnIndex), 
          className: "cssWithBackgroundColor" });

    hot.updateSettings({ cell: aCell });
}

如果用户撤消更改，您可以

if ( source == 'UndoRedo.undo'){
    aCell.pop();
    hot.updateSettings({ cell: aCell });
}