Question

我在jqGrid中有几列有edittype =“select”。如何读取特定行中当前所选值的选项值？

例如：当我提供以下选项时，如何获得FedEx的“FE”等。

editoption: { value: “FE:FedEx; IN:InTime; TN:TNT” }

rowId / cellname的getRowData（）仅返回select的文本/显示组件。

如果我在列上设置了“更改”数据事件，则基础触发仅在鼠标单击时更改事件，而不是键盘选择（有许多对泛型选择和鼠标/键盘问题的引用）。

Bottomline，当选择新值时，我需要知道更改时的选项值，以及发布到服务器之前的选项值。

Answer 1

您必须将列的格式化程序设置为'选择'

来自wiki的示例：

colModel：[{name：'myname'， edittype：'select'，formatter：'select'， editoptions：{value：“1：One; 2：Two”}} ... ]

在此处查看更多jqgridwiki

我遇到了同样的问题，这就像一个魅力

Answer 2

我刚刚使用设置JqGrid unformat 选项解决了这个问题，并使用以下函数取消格式化单元格值。

function Unformat_Select(cellvalue, options, cellobject)
{
    var unformatValue = '';

    $.each(options.colModel.editoptions.value, function (k, value)
    {
        if (cellvalue == value)
        {
            unformatValue = k;
        }
    });

    return unformatValue;
}

每次网格需要单元格数据时都会调用上面的方法，就像调用“getRowData”方法一样。但是，我的函数仅支持键配对值编辑选项。您需要像以下模式一样更改数据。

editoption: 
{
    value:
    {
        FE:'FedEx', 
        IN:'InTime', 
        TN:'TNT'
    }
}

有关unformat选项的更多信息，请参阅以下链接。

JqGrid Wiki - Custom Formatter

PS。可以修改我的函数以支持客户端下拉列表值。但我认为将此功能应用于服务器端下拉列表值是不可能的。

<强>更新

在最新的jqGrid 3.8.1中，我刚发现用户取消编辑行时出现了一些错误（或以编程方式调用“restoreRow”方法），jqGrid将使用数据键（而不是数据值）创建标签。我创建以下函数来解决此问题。要使用此功能，您必须将其作为此列的自定义格式化程序功能。此函数通过比较键或值将单元格值映射到列表的值。

function JqGridInlineEditor_SelectFormatter(cellvalue, options, rowObject)
{
    var temp = '';
    $.each(options.colModel.editoptions.value, function (key, value)
    {
        if (cellvalue == key || cellvalue == value)
        {
            temp = value;
            return false;
        }
    });

    return temp;
}

因此，您可以将键或值作为列数据发送，以供上述自定义格式化程序呈现。

Answer 3

如果您有要求，每行都有下拉列表，并且其值为

FE： '联邦快递'， IN： '银泰'， TN： 'TNT'

现在不是将数据保存到下拉更改事件的后端;而是想在行级别单击“保存”按钮上保存数据，但是想要保存dropdwon选择值（TN）而不是显示文本（TNT）。您可以创建另一个隐藏字段，以在内联编辑下拉列表中设置所选国家/地区代码。这里当用户退出单元格内联编辑之后将调用afterSaveCell方法，你可以按照下面的代码中的说明进行设置：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>http://stackoverflow.com/q/9655426/315935</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        /*global $ */
        /*jslint devel: true, browser: true, plusplus: true, nomen: true, unparam: true */
        $(document).ready(function () {
            'use strict';
            var listOptions = "CN:Canada; US:United States; FR:France; IN:India";
                var mydata = [{
                    name: "Toronto",
                    country: "CN",
                    continent: "North America",
                    countrycode: "CN"
                }, {
                    name: "New York City",
                    country: "US",
                    continent: "North America",
                    countrycode: "US"
                }, {
                    name: "Silicon Valley",
                    country: "US",
                    continent: "North America",
                    countrycode: "US"
                }, {
                    name: "Paris",
                    country: "FR",
                    continent: "Europe",
                    countrycode: "FR"
                }, {
                    name: "Pune",
                    country: "IN",
                    continent: "Asia",
                    countrycode: "IN"
                }]

                $("#gvManageMapping").jqGrid({
                    data: mydata,
                    datatype: "local",
                    colNames: ["Name", "Country", "Continent", "countrycode"],
                    colModel: [{
                        name: 'name',
                        index: 'name',
                        editable: false,
                    },
                    {
                        name: 'country',
                        index: 'country',
                        editable: true, edittype: "select", formatter: 'select', editoptions: {
                            value: listOptions,
                        }, editrules: { required: true, integer: false }, formatter: "select"
                    },
                    {
                        name: 'continent',
                        index: 'continent',
                        editable: false,
                    },
                    {
                        name: 'countrycode',
                        index: 'countrycode',
                        editable: false
                    }],
                    afterSaveCell: function (rowid, cellname, value) {
                            var selectedCountryCode, $this;
                            if (cellname === 'country') {
                                $this = $(this);
                                selectedCountryCode = $this.jqGrid("getCell", rowid, 'country');
                                $this.jqGrid("setCell", rowid, 'countrycode', selectedCountryCode);
                            }
                        },
                    pager: '#pager',
                    'cellEdit': true,
                    'cellsubmit': 'clientArray',
                    editurl: 'clientArray'
                });
        });
    //]]>
    </script>
</head>
<body>
    <table id="gvManageMapping"><tr><td /></tr></table>
    <div id="pager"></div>
</body>
</html>

Answer 4

getRowData州的documentation：

编辑行或单元格时，请勿使用此方法。这将返回单元格内容，而不是输入元素的实际值

拨打getRowData()时，行仍在编辑吗？

更新

同意，jqGrid不能很好地处理<select>。在我的应用程序中，我实际上能够通过不指定编辑选项来解决这个问题（意思是，键/值都是“FedEx”）;然后，在服务器上完成对ID的转换。这是不正确的编码方式，但它足以满足我当时的需求。

如何在列</select>上使用<select> editoptions时在jqGrid中获取select的值

4 个答案: