免费的 jQgrid 4.9.2，删除确认框显示下拉列表的 Id 而不是文本值

Question

注意： 根据 Oleg 的建议，我已经实施了一个格式化程序：'select' 属性到下拉列表以在 custom func

我将我的 jQgrid 从版本 4.8.2 升级到 4.9.2。因此，我在删除下拉列的任何记录时遇到问题。

删除记录时，我会显示一个消息框以获取用户的确认。在那个消息框中，我想显示我想删除的下拉列表的选定文本值。但不是显示文本值，而是像这样显示选定值 (GUID)：

但我想显示该下拉菜单的选定文本。为了从编码角度获得更多清晰度，我粘贴了我的 jQgrid 代码

function RenderPOFieldsGrid() {
if (g_bEditMode) {
    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', formatter: '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 }, {}, {}, myDelParams, {});
    oGrid.jqGrid('inlineNav', topPagerSelector, {
        addParams: myFieldAddParams
        editParams: myFieldsEditParams
    });    
  }
}


var myDelParams = {
    processing: true,
   // because I use "local" data I don't want to send the changes
   // to the server so I use "processing:true" setting and delete
   // the row manually in onclickSubmit
   onclickSubmit: function (options, rowid) {
      var gridId = $.jgrid.jqID($(this)[0].id);
      // reset the value of processing option which could be modified
      options.processing = true;

      DeleteExpenseDetails(rowid);

      $.jgrid.hideModal("#delmod" + gridId,
                          { gb: "#gbox_" + gridId,
                              jqm: options.jqModal, onClose: options.onClose
                          });

      return true;
  },
  beforeShowForm: function ($form) {
    var rowId = $(this).jqGrid('getGridParam', 'selrow');
    $("td.delmsg", $form[0]).html("Do you really want delete the <b>   Consignee: " + $(this).jqGrid('getCell', rowId, 'Consignee') + "</b>?");
  },
  afterShowForm: function ($form) {
    var dialog = $form.closest('div.ui-jqdialog'),
        selRowId = $(this).jqGrid('getGridParam', 'selrow'),
        selRowCoordinates = $('#' + selRowId).offset();

    dialog.offset(selRowCoordinates);
    dialog.css('width', 'auto');
  }
 };

Answer 1

很难重现您的问题，因为没有带有测试数据的工作演示。

我想您之前使用的代码没有 formatter: 'select'，现在您将属性添加到列 Consignee。此外，您将用作 jqGrid 输入的数据从文本更改为值 (id)。因此，您现在得到 $(this).jqGrid('getCell', rowId, 'Consignee') 值而不是删除对话框中的文本。从免费的 jqGrid 4.8.2 迁移到 4.9.2 在我看来与问题无关。

在我看来，问题的解决方案是更改您在删除表单中使用的 beforeShowForm 的代码。从 Consignee 列（通过使用 $(this).jqGrid('getCell', rowId, 'Consignee')）获取值后，您必须使用列的 editoptions.value 属性将值转换为文本。您目前仅在代码中使用 value: eval('(' + g_oConsigneeList + ')')。所以我不清楚 value 使用的是哪种数据格式。无论如何，使用 value: $.parseJSON('(' + g_oConsigneeList + ')') 似乎可以减少安全问题。要将值转换为文本，您需要解析 editoptions.value 属性。 jqGrid 允许你value 的不同形式。例如，如果您使用对象形式，那么您可以使用以下代码

beforeShowForm: function ($form) {
    var $self = $(this), p = $self.jqGrid("getGridParam"),
        val = $self.jqGrid("getCell", p.selrow, "Consignee"),
        cm = p.colModel[p.iColByName.Consignee],
        editVal = cm.editoptions.value;
    $("td.delmsg", $form[0]).html("Do you really want delete the <b>   Consignee: " +
        editVal[val] + "</b>?");
}

如果您使用 editoptions.value 属性的字符串形式，那么您应该将值 editVal[val] 替换为更复杂的代码。您需要首先将 editoptions.value 拆分为 ;，然后将每个结果元素拆分为 :，以便对文本映射具有价值。然后你需要找到对应值的文本。

UPDATED：另一种以 jqGrid 显示的形式从单元格中获取数据的方法如下：

beforeShowForm: function ($form) {
    var $self = $(this), p = $self.jqGrid("getGridParam"),
        tr = $self.jqGrid("getGridRowById", p.selrow),
        $cell = $.jgrid.getDataFieldOfCell.call(this, tr, p.iColByName.Consignee);

    $("td.delmsg", $form[0]).html("Do you really want delete the <b>   Consignee: " +
        $cell.text() + "</b>?");
}

辅助方法 $.jgrid.getDataFieldOfCell 为我们提供 <td> 元素或单元格的内部部分（如果使用了某些包装器）。一次校准然后使用 $cell.text() 获取所需数据。

免费的 jQgrid 4.9.2，删除确认框显示下拉列表的 Id 而不是文本值

free jQgrid 4.9.2, On delete confirmation box showing Id of dropdown instead text value

jquery

jqgrid

jqgrid-asp.net

free-jqgrid