我的 jqxGrid 列下拉编辑器有什么问题？

Question

我有这个 jqxGrid 设置：

var paymentSource = {
    datatype: "json",
    datafields: [
        { name: 'Id', type: 'number' },
        { name: 'Name', type: 'string' }
    ],
    url: "@Url.Action("GetPaymentSchemes")"
};
var paymentAdapter = new $.jqx.dataAdapter(paymentSource, { autoBind: true });

var gridSource =
{
    datatype: "json",
    datafields: [
        { name: 'Name', type: 'string' },
        { name: 'PaymentSchemeId', type: 'number' },
        { name: 'IsActive', type: 'boolean' },
        { name: 'Remarks', type: 'string' }
    ],
    url: "@Url.Action("GetParkades")"
};

var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
$("#index-grid").jqxGrid(
    {
        theme: theme,
        width: 900,
        source: gridDataAdapter,
        editable: true,
        columns: [
            { text: "Name", datafield: "Name", width: 300 },
            {
                text: 'Payment Scheme',
                datafield: 'PaymentSchemeId',
                displayfield: 'Name',
                columntype: 'dropdownlist',
                createeditor: function(row, value, editor) {
                    editor.jqxDropDownList({ source: paymentAdapter, displayMember: 'Name', valueMember: 'Id' });
                }
            },
            { text: "Active", datafield: "IsActive", width: 50, columntype: 'checkbox' },
            { text: "Operator Remarks", datafield: "Remarks" }
        ]
    });

页面加载时，“付款方案”列显示与“名称”列相同的文本值。当我双击“付款方案”时，我会得到正确填充的下拉列表，但是当我选择一个值并离开单元格以结束编辑时，“名称”列现在显示与“付款方案”列相同的文本。不同源和适配器中的两个

Name

字段是否冲突？这里是什么？

Answer 1

评论此行

//displayfield: 'Name',

添加单元格值更改事件

cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
    if (newvalue != oldvalue) {
        var item = paymentSource.localdata.find(function(element) {
            return element.Name == newvalue;
        });
        if (item) {
            return item.Id;
        }
    } else {
        return oldvalue;
    }
}

示例：https://jsfiddle.net/t0owapum/（您需要修改它以适合您的情况！）

html代码：

<div id="index-grid"></div>

JavaScript + jQuery 代码：

var paymentSource = {
    datatype: "json",
    datafields: [
        { name: 'Id', type: 'number' },
        { name: 'Name', type: 'string' }
    ],
    localdata: [
        { Id: 1, Name: 'Scheme 1' },
        { Id: 2, Name: 'Scheme 2' },
        { Id: 3, Name: 'Scheme 3' }
    ]
};
var paymentAdapter = new $.jqx.dataAdapter(paymentSource, { autoBind: true });

var gridSource = {
    datatype: "json",
    datafields: [
        { name: 'Name', type: 'string' },
        { name: 'PaymentSchemeId', type: 'number' },
        { name: 'IsActive', type: 'boolean' },
        { name: 'Remarks', type: 'string' }
    ],
    localdata: [
        { Name: 'Parkade 1', PaymentSchemeId: 1, IsActive: true, Remarks: 'Remark 1' },
        { Name: 'Parkade 2', PaymentSchemeId: 2, IsActive: false, Remarks: 'Remark 2' },
        { Name: 'Parkade 3', PaymentSchemeId: 3, IsActive: true, Remarks: 'Remark 3' }
    ]
};
var gridDataAdapter = new $.jqx.dataAdapter(gridSource);

$("#index-grid").jqxGrid({
    width: 900,
    source: gridDataAdapter,
    editable: true,
    columns: [
        { text: "Name", datafield: "Name", width: 300 },
        {
            text: 'Payment Scheme',
            datafield: 'PaymentSchemeId',
            //displayfield: 'Name',
            columntype: 'dropdownlist',
            createeditor: function(row, value, editor) {
                editor.jqxDropDownList({ source: paymentAdapter, displayMember: 'Name', valueMember: 'Id' });
            },
            cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                if (newvalue != oldvalue) {
                    var item = paymentSource.localdata.find(function(element) {
                        return element.Name == newvalue;
                    });
                    if (item) {
                        return item.Id;
                    }
                } else {
                    return oldvalue;
                }
            }
        },
        { text: "Active", datafield: "IsActive", width: 50, columntype: 'checkbox' },
        { text: "Operator Remarks", datafield: "Remarks" }
    ]
});