dxDataGrid 不停地触发事件 onEditorPrepared

Question

我正在使用 jQuery 和 Javascript 开发 DevExtreme 的 dxDataGrid。

在我的数据网格中，有 2 个主要列：

expense_code

和

item_id

。这两列是级联查找。

expense_code

就像一组项目，因此应首先选择它以过滤

item_id

列中的项目。两个查找列的数据分别来自主表

ExpenseCode

和

ItemMaster

。

这两列现在工作正常。问题是，在

item_id

中的项目被选中后，被选中的项目的详细信息应该填写在其他列中（例如，

item_unit_name

）。在我的代码中，我尝试使用 cellValue 函数在 onEditorPrepared 事件中设置网格数据。但是，在我尝试选择项目后，由于某种原因它会不停地触发此事件。这是我的代码：

$('#grid_Item').dxDataGrid({
    dataSource: orderItemStore,
    editing: {
        mode: 'batch',
        newRowPosition: 'last',
        allowUpdating: true,
        allowDeleting: true,
        allowAdding: true,
    },
    columns: [{
        caption: 'No',
        width: 40,
        cellTemplate(cell, info) {
            cell.text(info.row.rowIndex + 1);
        },
    }, {
        caption: 'Expense Code',
        dataField: 'expense_code',
        width: 120,
        cellTemplate(cell, info) {
            cell.text(info.data.expense_code);
        },
        lookup: {
            dataSource: {
                paginate: true,
                pageSize: 10,
                store: expenseCodeStore,
            },
            valueExpr: "expense_code",
            displayExpr(item) {
                return `${item.expense_code} : ${item.expense_name}`;
            },
            allowClearing: true,
        },
        editorOptions: {
            dropDownOptions: {
                minWidth: 300,
            },
        },
        validationRules: [{ type: "required" }]
    }, {
        caption: 'Material',
        dataField: 'item_id',
        lookup: {
            dataSource(options) {
                let selectedExpenseCode = options?.data?.expense_code;

                console.log({ selectedExpenseCode });   //this line seems working properly

                return {
                    paginate: true,
                    pageSize: 10,
                    store: new DevExpress.data.CustomStore({
                        key: 'item_id',
                        loadMode: 'raw',
                        load() {
                            return $.getJSON('?handler=ItemMasters', { expenseCode: selectedExpenseCode });
                        },
                        byKey(key) {
                            return $.getJSON('?handler=ItemMaster', { itemId: key });
                        },
                    }),
                };
            },
            valueExpr: "item_id",
            displayExpr: "item_name",
            allowClearing: true,
        },
        validationRules: [{ type: "required" }]
    }, {
        ...
    }, {
        caption: 'Unit',
        dataField: 'item_unit_name',
        width: 80,
        validationRules: [{ type: "required" }],
    }, {
        ...
    }],
    onEditorPrepared(e) {
        if (e.dataField == "item_id") {
            $(e.editorElement).dxSelectBox("instance").on("selectionChanged", function (args) {

                console.log(`setting unit name...`)

                var grid = $("#grid_Item").dxDataGrid("instance");
                var index = e.row.rowIndex;
                var result = args.selectedItem.item_unit_name;
                grid.cellValue(index, "item_unit_name", result);    //this line cause infinite event looping
            });
        }
    },
    ...
    remoteOperations: false,
    showBorders: true,
});

事件循环时，控制台会有

datasource

物品查找和

onEditorPrepared

事件无限重复的两条日志