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

时间:2015-09-02 06:46:28

标签: jquery asp.net jqgrid free-jqgrid

大家好.. !!!

我将jQgrid从版本4.8.2升级到4.9.2。因此,我在custom func中获取下拉列的选定值时遇到问题。

场景是,当我在添加/编辑操作期间保存记录时,根据jQgrid工作流程,执行指针首先进入custom_func: function (value, colName){}。函数参数value应包含选定的下拉列表值,但它会为我提供所选文本。

我谷歌这个问题,但我没有找到任何相关的解决方案。我希望这里有人遇到同样的问题,可能找到任何可能的解决方案。

这是我的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
    });  

1 个答案:

答案 0 :(得分:2)

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",{{1} }。在列中的单元格中的jqGrid 保留值方案中,但将值显示为用户的文本。在编辑过程中,用户可以选择看起来像"paid"的选项。因此,用户在编辑期间以与网格中相同的方式查看文本。编辑结束后,jqGrid保存(旧值3,5,11,7可以替换为列表中的新数值)。在本地编辑(<option value="3">send</option>)的情况下以及在将数据保存到服务器的情况下,该方案的工作方式相同。

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

因此,您应该验证需要实现上述两种方案中的哪一种。如果您确实需要custom_func中的值,那么您应该使用

custom_func

你应该忘记你也应该使用值来填充网格。在这种情况下,只有值将在列的 data 中,并且文本将仅显示给用户,以使编辑更加舒适,以实现一些其他要求,例如本地化。例如,您可以使用formatter: "select" 在数据库内部保存文本formatter: "select""send""closed""pending",但可以显示基于文本的文本翻译用户区域设置。用户只能查看和编辑翻译的文本,但您将用英语保存原始值。