Как передать данные в URL из строки jqgrid, если нажата гиперссылка

Question

jqGrid содержит столбец количества и добавьте в корзину кнопку, используя colmodel ниже. Встроенное редактирование используется для заполнения количества. Если количество указано в поле и нажата ссылка «Добавить в корзину» в другом столбце, введенная величина не передается в контроллер AddToCart. Идентификатор продукта из поля id в данных JSON передается правильно.

Как передать выбранное количество в контроллер AddToCart (используя строку запроса вызванного URL или что-то другое)?

Колмодель это:

{"label":"AddToCart",
 "name":"Addtocrt_addtocrt",
 "formatter":"showlink",
 "formatoptions": {"baseLinkUrl":"http://MySite.com/Store/AddToCart"}
 },

{"label":"Quantity",
  "name":"Stocks_valkogus",
  "editoptions":{"maxlength":10 }
  "editable":true
   }

Обновление

Данные с сервера находятся в формате json, и используется режим редактирования строк. rowData.Stocks_valkogus возвращает неопределенное значение.

Я попробовал код ниже. Окно оповещения показывает, что количество V не определено. Как получить введенное количество?

{"name":"Addtocrt_addtocrt",
 "formatter":"dynamicLink",
 "formatoptions":{"onClick":addToCartOnClick
}}

function addToCartOnClick(rowId, iRow, iCol, cellValue, e) {
    var iCol = getColumnIndexByName($grid, 'Stocks_valkogus') ,
       quantityVal = $('#' + $.jgrid.jqID(rowId) + '>td:nth-child(' + (iCol + 1) + '>input').val();
    alert(iCol); // returns 3 
    alert(quantityVal); // returns undefined. 
    window.location = 'Store/Details?' + $.param({
        id: rowId,
        quantity: quantityVal
    });
}

Answer 1

Я очень хорошо понимаю проблему.Я согласен, что оба предопределенные средства форматирования , которые можно использовать в настоящее время (средства форматирования 'showlink' и 'link'), недостаточно гибки.

Я могу предложить вам другой форматтер, который вы можете загрузить здесь .Использование средства форматирования очень просто:

{label: "AddToCart", name: "Addtocrt_addtocrt", formatter: "dynamicLink",
    formatoptions: {
        url: function (cellValue, rowId, rowData) {
            return '/Store/AddToCart' + rowId + '?' +
                $.param({
                    quantity: rowData.Stocks_valkogus
                });
        }
    }
}

url, определенный как функция, будет использоваться в <a> в качестве значения атрибута href.

В дополнение кurl formatoptions модуль форматирования dynamicLink поддерживает опцию target (с тем же значением, что и у 'showlink'), cellValue, которая также может быть функциональной, и обратный вызов onClick с rowId, iRowiCol, cellValue, e в качестве параметров.Если обратный вызов onClick определен, значение url будет игнорироваться.Таким образом, можно пропустить определение опции форматирования url.

Демонстрация демонстрирует использование форматера dynamicLink:

Текущий код formatter: 'dynamicLink' вы можете найти ниже:

/*global jQuery */
(function ($) {
    'use strict';
    /*jslint unparam: true */
    $.extend($.fn.fmatter, {
        dynamicLink: function (cellValue, options, rowData) {
            // href, target, rel, title, onclick
            // other attributes like media, hreflang, type are not supported currently
            var op = {url: '#'};

            if (typeof options.colModel.formatoptions !== 'undefined') {
                op = $.extend({}, op, options.colModel.formatoptions);
            }
            if ($.isFunction(op.target)) {
                op.target = op.target.call(this, cellValue, options.rowId, rowData, options);
            }
            if ($.isFunction(op.url)) {
                op.url = op.url.call(this, cellValue, options.rowId, rowData, options);
            }
            if ($.isFunction(op.cellValue)) {
                cellValue = op.cellValue.call(this, cellValue, options.rowId, rowData, options);
            }
            if ($.fmatter.isString(cellValue) || $.fmatter.isNumber(cellValue)) {
                return '<a' +
                    (op.target ? ' target=' + op.target : '') +
                    (op.onClick ? ' onclick="return $.fn.fmatter.dynamicLink.onClick.call(this, arguments[0]);"' : '') +
                    ' href="' + op.url + '">' +
                    (cellValue || '&nbsp;') + '</a>';
            } else {
                return '&nbsp;';
            }
        }
    });
    $.extend($.fn.fmatter.dynamicLink, {
        unformat: function (cellValue, options, elem) {
            var text = $(elem).text();
            return text === '&nbsp;' ? '' : text;
        },
        onClick: function (e) {
            var $cell = $(this).closest('td'),
                $row = $cell.closest('tr.jqgrow'),
                $grid = $row.closest('table.ui-jqgrid-btable'),
                p,
                colModel,
                iCol;

            if ($grid.length === 1) {
                p = $grid[0].p;
                if (p) {
                    iCol = $.jgrid.getCellIndex($cell[0]);
                    colModel = p.colModel;
                    colModel[iCol].formatoptions.onClick.call($grid[0],
                        $row.attr('id'), $row[0].rowIndex, iCol, $cell.text(), e);
                }
            }
            return false;
        }
    });
}(jQuery));

Я планирую разместить код форматера и некоторые другие плагины для jqGrid на github.

ОБНОВЛЕНО: Бесплатно jqGrid расширяет возможности formatter: "showlink" (см. статья в вики и ответ ).Так что не нужно использовать formatter: "dynamicLink" в случае использования бесплатной jqGrid.