如果单击超链接，如何从jqgrid行将数据传递到url [英] How to pass data to url from jqgrid row if hyperlink is clicked

问题描述

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} 
可编辑：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） ）+'>输入'）。val（）; 
 alert（iCol）; //返回3 
 alert（quantityVal）; //返回undefined。
 window.location ='Store /详细信息？'+ $ .param（{
 id：rowId，
数量：quantityVal 
}）; 
} 
  

解决方案

我理解这个问题非常好。我同意扩展了格式化程序的选项：showlink（参见 wiki文章和答案）。因此，如果使用免费的jqGrid，则不需要使用格式化程序：dynamicLink。

jqGrid contains quantity column and add to cart button using colmodel below. Inline editing is used to fill quantity. If quantity is fileld and add to cart link on other column is clicked, entered quanty is not passed to AddToCart controller. Product id from id field in json data is passed correctly.

How to pass selected quantity to AddToCart controller (using invoked url query string or something other) ?

colmodel is:

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

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

Update

Data from server is in json format and row editing mode is used. rowData.Stocks_valkogus returns undefined.

I tried code below. alert box shows that quantityVal is undefined. How to retrieve entered quantity?

{"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
    });
}

解决方案

I understand the problem very good. I agree that both predefined formatter which one can use currently ('showlink' and 'link' formatters) are not flexible enough.

I can suggest you another formatter which you could download here. The usage of the formatter is very easy:

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

The url defined as function will be used in the <a> as the value of href attribute.

Additionally to the url formatoptions the 'dynamicLink' formatter supports target option (with the same meaning as by 'showlink'), cellValue which can be also function and onClick callback with rowId, iRow, iCol, cellValue, e as parameters. If the onClick callback is defined the value of url will be ignored. So one can skip the definition of the formatter option url.

The demo demonstrate the usage of the 'dynamicLink' formatter:

The current code of the formatter: 'dynamicLink' you can find below:

/*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));

I plan to place the code of the formatter and some other plugins to jqGrid on the github.

UPDATED: Free jqGrid extends the options of formatter: "showlink" (see the wiki article and the answer). So one don't need to use the formatter: "dynamicLink" in case of usage free jqGrid.

这篇关于如果单击超链接，如何从jqgrid行将数据传递到url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！