dxDataGrid中setCellValue内调用Ajax失效问题求助

问题原因 #

Ajax是异步操作，setCellValue方法会在Ajax请求完成前就执行完毕，DevExtreme已经基于当时的newData完成了单元格状态更新，后续在success回调中修改newData不会触发组件重新渲染，导致变更不生效。

解决方案 #

方案1：利用异步setCellValue（推荐） #

dxDataGrid支持setCellValue返回Promise，组件会等待Promise完成后再应用所有数据变更。修改代码如下：

setCellValue: function(newData, value, currentRowData) {
    newData.supplies = value;
    let dataSupp = value.split(' &*& ');
    newData.supplies_code = dataSupp[0];
    newData.supplies_unit = dataSupp[2];
    let sales = $('#sales').val();
    let expected_revenue = $('#expected_revenue').val();
    let order_use_from = $('#order_use_from').val();
    let order_use_to = $('#order_use_to').val();

    // 返回Promise，让组件等待异步操作完成
    return new Promise((resolve, reject) => {
        $.ajax({
            type: 'POST',
            url: "{{ route('admin.shopping-request.per-mil') }}",
            data: {
                sales: sales,
                expected_revenue: expected_revenue,
                order_use_from: order_use_from,
                order_use_to: order_use_to,
                dataSupp: dataSupp
            },
            success: function(response) {
                console.log(response);
                newData.per_mil = response;
                resolve(); // 通知组件异步操作完成，应用newData的所有变更
            },
            error: function(xhr) {
                console.error('请求失败:', xhr);
                reject(xhr); // 通知组件操作失败，避免无限等待
            }
        });
    });
}

这种方式完全遵循DevExtreme的原生数据更新流程，能保证newData的所有变更（包括Ajax回调中设置的per_mil）被正确应用。

方案2：手动调用grid API更新行数据 #

如果不需要依赖setCellValue的同步逻辑，可以直接通过grid实例的updateRow方法手动更新行数据：

setCellValue: function(newData, value, currentRowData) {
    newData.supplies = value;
    let dataSupp = value.split(' &*& ');
    newData.supplies_code = dataSupp[0];
    newData.supplies_unit = dataSupp[2];
    let sales = $('#sales').val();
    let expected_revenue = $('#expected_revenue').val();
    let order_use_from = $('#order_use_from').val();
    let order_use_to = $('#order_use_to').val();
    
    // 获取当前行的唯一标识（根据你的数据结构调整，比如currentRowData.id）
    const rowKey = currentRowData.key;
    // 获取dxDataGrid实例（假设grid的DOM id为myDataGrid）
    const gridInstance = $('#myDataGrid').dxDataGrid('instance');

    $.ajax({
        type: 'POST',
        url: "{{ route('admin.shopping-request.per-mil') }}",
        data: {
            sales: sales,
            expected_revenue: expected_revenue,
            order_use_from: order_use_from,
            order_use_to: order_use_to,
            dataSupp: dataSupp
        },
        success: function(response) {
            console.log(response);
            // 手动更新行数据
            gridInstance.updateRow(rowKey, { per_mil: response });
        }
    });
}

这种方式需要确保能正确获取行的唯一键值，适合简单场景，但可能会和setCellValue的原生流程产生冲突，需谨慎使用。

内容的提问来源于stack exchange，提问作者Toàn Kiều Văn