免费的jQgrid 4.9.2,在删除确认框中显示下拉列表的ID而不是文本值 [英] free jQgrid 4.9.2, On delete confirmation box showing Id of dropdown instead text value

查看:70
本文介绍了免费的jQgrid 4.9.2,在删除确认框中显示下拉列表的ID而不是文本值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

注意:根据Oleg的建议,我已经实现了格式化程序:'select'属性用于下拉菜单以在custom func

NOTE: As per Oleg suggestion I have implemented a formatter: 'select' property to dropdown to get selected Id in custom func

我将jQgrid从4.8.2版本升级到了4.9.2.因此,删除下拉列表的任何记录时我都遇到问题.

I upgraded my jQgrid from version 4.8.2 to 4.9.2. Due to this I am facing problem while deleting any record of drop-down column.

在删除记录时,我会显示一个消息框以接受用户的确认.在该消息框中,我想显示要删除的下拉菜单的选定文本值.但是,与其显示文本值,不如向我显示选定的值(GUID),如下所示:

While deleting a record, I display a message box to take confirmation from user. In that message box I want show the selected text value of dropdown which I want delete. But instead of showing text value its showing me the selected value (GUID) like this :

但是我想显示该下拉菜单的选定文本.为了从编码角度更加清晰,我粘贴了我的jQgrid代码

But I want to show selected text of that dropdown. To get more clarity as per coding perspective I am pasting my jQgrid code

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');
  }
 };

推荐答案

由于没有可用的测试数据演示,因此很难重现您的问题.

It's difficult to reproduce your problem because there are no working demo with test data.

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

I suppose that you used before the code without formatter: 'select' and now you added the property to the column Consignee. Additionally you changed the data used as input for jqGrid from textes to values (ids). Thus you get now $(this).jqGrid('getCell', rowId, 'Consignee') the value instead of the text in the Delete dialog. Migration from free jqGrid 4.8.2 to 4.9.2 seems to me independent from the problem.

在我看来,解决问题的方法是更改​​在删除"表单中使用的beforeShowForm代码.从列Consignee中获取值(通过使用$(this).jqGrid('getCell', rowId, 'Consignee'))之后,您必须使用列的editoptions.value属性将值转换为文本.您当前仅在代码中使用value: eval('(' + g_oConsigneeList + ')').因此,对于我来说还不清楚您要为value使用哪种数据格式.无论如何,使用value: $.parseJSON('(' + g_oConsigneeList + ')')似乎对我来说具有较少的安全性问题更好.要将值转换为文本,您需要解析editoptions.value属性. jqGrid允许您使用不同形式的value.例如,如果使用对象形式,则可以使用以下代码

The solution of the problem seems to me in changing the code of beforeShowForm which you use in Delete form. After getting the value from the column Consignee (by using $(this).jqGrid('getCell', rowId, 'Consignee')) you have to convert the value to the text using editoptions.value property of the column. You use currently just value: eval('(' + g_oConsigneeList + ')') in your code. So it's unclear for me which format of data you use for value. In any way the usage of value: $.parseJSON('(' + g_oConsigneeList + ')') seems me better to have less security problems. To convert the value to the text you need to parse editoptions.value property. jqGrid allows you different forms of the value. If you use object form for example then you can use the following code

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除以;,然后将每个结果元素除以:,以具有与文本映射的价值.然后,您需要找到与该值相对应的文本.

If you use string form of editoptions.value property then you should replace the value editVal[val] to a little more complex code. You will need to split editoptions.value by ; first and to split every resulting element by : to have value to text mapping. Then you will need find the text which corresponds the value.

更新:另一种以与jqGrid显示的形式完全相同的方式从单元格获取数据的方法如下:

UPDATED: One more way to get the data from the cell in exactly the form which jqGrid display there is the following:

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()来获取所需的数据.

The helper method $.jgrid.getDataFieldOfCell get us the <td> element or an inner part of the cell if some wrapper are used. One cal then use $cell.text() to get the required data.

这篇关于免费的jQgrid 4.9.2,在删除确认框中显示下拉列表的ID而不是文本值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆