Question

jqGrid包含数量列，并使用下面的colmodel添加到购物车按钮。内联编辑用于填充数量。如果数量为fileld并且单击其他列上的添加到购物车链接，则输入的quanty不会传递给AddToCart控制器。来自json数据中id字段的产品ID正确传递。

如何将所选数量传递给AddToCart控制器（使用调用的url查询字符串或其他内容）？

colmodel是：

{"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返回undefined。

我试过下面的代码。警告框显示quantityVal未定义。如何检索输入的数量？

{"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

我理解这个问题非常好。我同意当前可以使用的predefined formatter（'showlink'和'link'格式化程序）不够灵活。

我可以建议你另一个格式化程序，你可以下载here。格式化程序的使用非常简单：

{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，iRow，iCol，cellValue作为参数进行e回调。如果定义了onClick回调，则会忽略url的值。因此，可以跳过格式化程序选项url的定义。

The demo演示了'dynamicLink'格式化程序的用法：

enter image description here

您可以在下面找到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));

我计划将格式化程序和其他一些插件的代码放在github上的jqGrid中。

更新： Free jqGrid扩展了formatter: "showlink"的选项（请参阅the wiki article和the answer）。因此，在免费使用jqGrid的情况下，不需要使用formatter: "dynamicLink"。

如果单击超链接，如何从jqgrid行将数据传递到url

1 个答案: