free jQgrid 4.9.2，在删除确认框中显示下拉列表的ID而不是文本值

时间：2015-09-08 08:59:52

标签： jquery jqgrid jqgrid-asp.net free-jqgrid

注意：根据Oleg建议我已实施格式化程序：'select'属性下拉列表以获取custom func

中的选定ID

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

删除记录时，我会显示一个消息框以接受用户的确认。在该消息框中，我想显示我要删除的下拉列表的选定文本值。但是，不是显示文本值，而是显示我选择的值（GUID），如下所示：enter image description here

但我想显示该下拉菜单的选定文字。为了使编码视角更加清晰，我粘贴了我的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');
  }
 };

1 个答案:

答案 0 :(得分：1)

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

我认为您在没有formatter: 'select'的代码之前使用过，现在您已将该属性添加到列Consignee。此外，您将用作jqGrid输入的数据从textes更改为值（ids）。因此，您现在获得$(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()来获取所需的数据。

相关问题
最新问题