如何让FancyGrid中的onChange事件正常工作？

问题原因 #

你当前在列配置里用events数组嵌套onchange事件的写法不符合FancyGrid的API规范，且onchange并非单元格编辑完成的正确事件名，导致事件无法触发。

正确解决方案 #

方案1：列级绑定afteredit事件

直接在列配置中定义afteredit函数（单元格编辑完成后触发），无需嵌套在events数组内：

{
    index: 'fieldLength',
    editable: editableLength,
    title: 'Field Length',
    flex: 1,
    headerCls: 'header-cell-without-search-input',
    filter:{
        header:true
    },
    type: 'number',
    vtype: {
        before: ['notempty', 'notnan'],
        type: 'min',
        param: 0
    },
    // 直接绑定afteredit事件
    afteredit: function(grid, o) {
        debugger;
        console.log("Something changed!!");
    }
}

方案2：全局绑定cellsave事件（监听所有单元格保存）

如果需要监听全局的单元格数据保存操作，可在Grid实例配置中绑定cellsave事件，并通过判断列索引过滤特定列：

new FancyGrid({
    // 其他Grid配置项
    columns: [
        // 你的列配置数组
    ],
    events: [{
        cellsave: function(grid, o) {
            // 仅监听fieldLength列的变更
            if (o.column.index === 'fieldLength') {
                debugger;
                console.log("Something changed!!");
            }
        }
    }]
});

额外注意事项 #

• 确保editableLength的值为true，否则单元格处于不可编辑状态，事件不会触发。
• 确认浏览器控制台的调试功能已开启（F12打开控制台，勾选"暂停在断点处"选项）。

内容的提问来源于stack exchange，提问作者devthebat