Handsontable: setDataAtCell 触发事件答案

【问题标题】：Handsontable: setDataAtCell on the trigger of an eventHandsontable: setDataAtCell 触发事件
【发布时间】：2015-09-17 12:16:28
【问题描述】：

我是可动手操作的 Javascript 库的新手，因此如果问题看起来太简单，我深表歉意。

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

【问题讨论】：

jsfiddle.net/8hv4z/18，类似的东西？
嗨。刚刚试了一下代码。显然这段代码工作正常，但如果我添加命令 hot.setDataAtCell(5, 5,"33");在 afterChange 函数内部，它停止工作。 'hot' 是我的掌上电脑的名字。您知道为什么会发生这种情况吗？如果我将其添加到所有内容之外，相同的命令也可以正常工作

标签： javascript events dom-events handsontable

【解决方案1】：

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

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

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

    this.render();
}

【讨论】：

原因是 setDataAtCell 触发了 afterChange 事件。它会把它扔进一个无限循环:)所以我认为handson足够聪明，可以抓住它
是的，这是代码不起作用的唯一原因。 :-)
是的，要小心handson中的事件，它们非常强大。需要记住的是，大多数手动方法都会触发 afterChange 事件。要解决这个问题，您应该执行您在此处所做的操作并手动更改数据源，而无需任何动手方法

【解决方案2】：

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

例子：

 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 的链接；
http://jsfiddle.net/8hv4z/18/

【讨论】：