Handsontable：事件触发器上的setDataAtCell

Question

我是 Javascript 的 handsontable 库的新手，如果问题看起来太基础，我深表歉意。

我想做的是，如果有人写入/更改了 table 第一行中写入的数据，第 5 列和第 5 行单元格中的值应设置为“已更改” ”。我知道要设置一个值，我需要使用 hot.setDataAtCell(5,5,"changed")。我不知道的是如何触发此命令，即我需要找到一种方法来识别何时更改了列第一行中的任何单元格。我已经尝试覆盖 afterChange 回调，但代码一直挂起。

Answer 1

这应该可以解决您的问题，

示例：

 var cellChanges = [];

$(document).ready(function () {
    var myData = [{
        0: 'aaaaaaaaaaaaa',
        1: 'bbbbbbbbb',
        2: 'ccccccc'
    }, {
        0: 'aaaa',
        1: 'b',
        2: 'bbbb'
    }, {
        0: 'aaaa',
        1: 'x',
        2: 'bbbb'
    }, {
        0: 'aaaa',
        1: 'w',
        2: 'bbbb'
    }, ];

    $("#editOrders").handsontable({
        data: myData,

        autoWrapRow: true,
        minSpareRows: true,
        columnSorting: true,
        fillHandle: false,
        currentRowClassName: 'currentRow',
        colHeaders: ["demo", "demo", "demo"],
        afterChange: function (changes, source) {
            if (!changes) {
                return;
            }
            $.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){
                    cellChanges.push(cellChange);
                }
            });
        },
        afterRender: function () {
            var instance = $('#editOrders').handsontable('getInstance');
            $.each(cellChanges, function (index, element) {
                var cellChange = element;
                var rowIndex = cellChange['rowIndex'];
                var columnIndex = cellChange['columnIndex'];
                var cell = instance.getCell(rowIndex, columnIndex);
                var foreColor = '#000';
                var backgroundColor = '#ff00dd';
                cell.style.color = foreColor;
                cell.style.background = backgroundColor;
            });
        },
        columns: [{
            //LINE
            data: 0
        }, {
            //LINE
            data: 1
        }, {
            //LINE
            data: 2
        },

        ]
    });

});

这是 jsfiddle 的 link；
http://jsfiddle.net/8hv4z/18/

Answer 2

setDataAtCell() 似乎在 afterChange 回调函数中不起作用。

方法是在像 data: mydata 这样初始化 handsontable 时使用数据的初始化变量，然后 afterChange 函数应该如下所示：

afterChange: function (changes, source) {
    mydata[5][5]="changed";

    this.render();
}

Handsontable：事件触发器上的setDataAtCell

Handsontable: setDataAtCell on the trigger of an event

javascript

events

dom-events

handsontable