Как получить значение select в jqGrid при использовании editoptions в столбце

У меня есть несколько столбцов в jqGrid с edittype= "select". Как я могу прочитать значение параметра текущее значение в конкретной строке?

например: когда я предоставляю следующий вариант, как мне получить "FE"для FedEx и т. д.

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

getRowData () для rowId/cellname возвращает только текст/отображаемый компонент select.

Если я устанавливаю событие данных" изменить " в столбце, базовые пожары изменяют события только при щелчках мыши, и не выбирает клавиатуру (есть множество ссылок на общие выбор и проблемы с мышью/клавиатурой).

Bottomline, когда выбрано новое значение, мне нужно знать значение параметра во время изменения, а также до публикации на сервере.

4 ответов


на документация на getRowData гласит:

не используйте этот метод при редактировании строки или ячейки. Это вернет содержимое ячейки, а не фактическое значение входного элемента

строка все еще редактируется при вызове getRowData()?

обновление

согласен, jqGrid не обрабатывает <select> очень хорошо. В моем приложении я действительно смог обойти это, не указав опция редактирования (значение, ключ / значение были оба "FedEx"); перевод на ID затем делается на сервере. Это не правильно этот код, но он работал достаточно хорошо для моих потребностей в то время.


вы должны установить форматер в столбце 'select'

пример из Вики:

colModel: [ {имя: 'myname', edittype: 'select', форматирование: 'select', editoptions:{value:"1:One;2:Two"}} ... ]

подробнее здесь jqgridwiki

У меня была такая же проблема, и это работает как шарм


Я просто решил этот вопрос, используя настройку JqGrid неформат и используйте следующие функции для восстановление значения ячейки.

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-Пользовательский Форматер

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

таким образом, вы можете отправить ключ или значение в качестве данных столбца, которые будут отображаться вышеуказанным пользовательским форматированием.


Если в случае, если у вас есть требование, где каждая строка имеет выпадающее меню и имеет значения, такие как

FE: 'FedEx', IN: 'InTime', ТН: "ТНТ"

теперь вместо сохранения данных для бэкэнда при выпадающем событии изменения; вы хотите сохранить данные на кнопке "Сохранить" нажмите на уровне строки, но хотите сохранить выбранное значение 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>