jQgrid 4.9.2,在下拉列中,在自定义函数中获取选定值而不是选定文本

jQgrid 4.9.2, In dropdown column, get selected value in custom function instead of selected text

大家好..!!!

我将我的 jQgrid 从版本 4.8.2 升级到 4.9.2。因此,我在 custom func.

中获取下拉列的选定值时遇到问题

场景是,当我在 Add/Edit 操作期间去保存记录时,按照 jQgrid 工作流程,执行指针首先进入 custom_func: function (value, colName){}。函数参数 value 应该包含下拉列表的选定值,但它给了我选定的文本。

我google这个问题,但是我没有找到任何相关的解决方案。我希望这里有人遇到过同样的问题并且可能找到了任何可能的解决方案。

这是我的 jQgrid 代码,

var oGrid = $('#tbPOFields'), topPagerSelector = '#' + $.jgrid.jqID(oGrid[0].id) + "_toppager", lastSel;

    oGrid.jqGrid({
        url: sRelativePath + '/WSAjax.asmx/GetDataForGridInEdit',
        mtype: "POST",
        datatype: "json",
        ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
        serializeGridData: function (data) {
            return JSON.stringify(data);
        },
        jsonReader: {
            root: "d.rows",
            page: "d.page",
            total: "d.total",
            records: "d.records"
        },
        colNames: ['ConsigneeId', 'Consignee'],
        colModel: [
            { name: 'ConsigneeId', index: 'ConsigneeId', hidden: true },
            { name: 'Consignee', index: 'Consignee', sortable: false, title: false, width: 42, editable: true, edittype: "select",
                editrules: {
                    required: true,
                    custom: true,
                    custom_func: function (value, colName) {
                        if ($('#tbItems_Consignee').length === 1) {
                            var selrow = $('#tbItems').jqGrid('getGridParam', 'selrow');
                            $('#tbItems').jqGrid('setCell', selrow, 'ConsigneeId', value);
                        }

                        if (g_bEditMode && value === g_sValueNONE && !g_bIsOrderType_Maintenance)
                            return [false, " is an invalid Consignee.<br/>Please select a valid Consignee before saving."];
                        else {
                            return [true, ""];
                        }
                    }
                },
                editoptions:
                {
                    value: eval('(' + g_oConsigneeList + ')'),
                    dataEvents: [
                        { type: 'keyup', fn: function (e) { $(e.target).trigger('change'); } },
                        {
                            type: 'change',
                            fn: function (e) {
                                if (!e.isTrigger) {
                                    var selrow = $('#tbItems').jqGrid('getGridParam', 'selrow');
                                    var ConsigneeId = $(this).val();
                                    $('#tbItems').jqGrid('setCell', selrow, 'ConsigneeId', ConsigneeId);
                                }
                            }
                        }]
                }
            }
        ],
        prmNames: { page: "pageIndex", rows: "pageSize", sort: "sortIndex", order: "sortDirection" },
        autowidth: true,
        postData: {
            filters: null,
            spName: 'GetPOFieldsDetailsList',
            paramXML: ''
        },
        width: 'auto',
        height: 'auto',
        rowNum: 1000,
        rowList: [1000],
        sortname: "",
        sortorder: "asc",
        page: 1,
        gridview: true,
        toppager: true,
        autoencode: true,
        ignoreCase: true,
        viewrecords: true,
        caption: 'Fields',
        editurl: 'clientArray',
        emptyrecords: "No records to view.",
        footerrow: true,
        onSelectRow: function (rowid) {
            if (rowid && rowid != lastSel) {
                if (typeof lastSel !== "undefined") {
                    $(this).jqGrid('restoreRow', lastSel);
                }
                lastSel = rowid;
            }
        }
    });
    oGrid.jqGrid('navGrid', topPagerSelector, { add: false, edit: false, search: false, refresh: false }, {}, {}, {});
    oGrid.jqGrid('inlineNav', topPagerSelector, {
        addParams: {
            addRowParams: {
                oneditfunc: function (rowid) {
                    updateJqGridButtonState($(this), jqGridMode.Add);
                },
                aftersavefunc: function (rowid, response) {
                    g_bIsDataChanged = true;
                    SavePOFieldsDetails($(this), rowid);
                    updateJqGridButtonState($(this), jqGridMode.None);
                },
                afterrestorefunc: function () {
                    updateJqGridButtonState($(this), jqGridMode.None);
                }
            }
        },
        editParams: myFieldsEditParams
    });  

edittype: "select"主要使用两个场景。

第一个:one want 允许用户从列表中选择值。例如,用户看到网格中某些列的值类似于 "send""closed""pending""paid"。不应允许用户选择其他值。在这种情况下,可以使用像 edittype: "select", editoptions: { value: "send:send;closed:closed;pending:pending;paid:paid" } 这样的选项。重要的是要理解,使用值 "send""closed""pending""paid" 来填充网格,并且相同的值将在编辑期间保存在网格中或如果 editurl 不等于 "clientArray".

,则发送到服务器

第二种情况:想要使用id,但要为用户显示一些可读的文本。例如,一个在内部保留值 3、5、11、7 而不是文本 "send""closed""pending""paid"。尽管如此,还是希望将值 (3, 5, 11, 7) 显示为用户可读的文本。该列的相应选项将为 formatter: "select", edittype: "select", editoptions: { value: "3:send;5:closed;11:pending;7:paid" }。重要的是应该用值为 3、5、11、7 的输入数据填充 jqGrid,而不是文本 "send""closed""pending""paid"。在场景中,jqGrid 在列的单元格中保留值,但将值显示为用户的文本。在编辑过程中,用户有 select 和看起来像 <option value="3">send</option> 的选项。因此,用户在编辑期间以与在网格中相同的方式查看文本。编辑结束后 jqGrid 保存 values(旧值 3、5、11、7 可以替换为列表中的新数值)。在本地编辑 (editurl: "clientArray") 和将数据保存到服务器的情况下,场景的工作方式相同。

我在上面只写了关于编辑而不是关于 custom_func 回调(通过使用 editrules: {custom: true, custom_func: function (value, colName, iCol) {...}} 等选项指定)。它在这里工作对应相同的场景。如果使用 formatter: "select",则 将保存在列中,因此需要验证这些值。因此,这些值将作为第一个参数转发给 custom_func。另一方面,如果使用第一种情况(没有 formatter: "select"),那么文本将保存在网格中,需要验证的文本将作为 custom_func 的第一个参数转发。

因此您应该验证您需要实施上述两种情况中的哪一种。如果你真的需要 custom_func 中的值,那么你应该使用

formatter: "select"

您不要忘记您也应该使用值来填充网格。在这种情况下,只有值会出现在列的 data 中,并且文本只会显示给用户,以便让编辑更轻松地实现一些其他要求,例如本地化.例如,使用 formatter: "select" 您可以在数据库内部保存文本 "send""closed""pending""paid",但要显示基于以下文本的翻译用户语言环境。用户将只能看到和编辑翻译后的文本,但您将以英语保存原始值。