javascript 如果单击超链接，如何将数据从 jqgrid 行传递到 url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9038063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass data to url from jqgrid row if hyperlink is clicked
提问by Andrus
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.
jqGrid 包含数量列并使用下面的 colmodel 添加到购物车按钮。内联编辑用于填充数量。如果数量为 fileld 并单击其他列上的添加到购物车链接，则输入的数量不会传递到 AddToCart 控制器。json 数据中 id 字段的产品 id 正确传递。
How to pass selected quantity to AddToCart controller (using invoked url query string or something other) ?
如何将选定的数量传递给 AddToCart 控制器（使用调用的 url 查询字符串或其他内容）？
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_valkogusreturns undefined.
来自服务器的数据为json格式，使用行编辑模式。
rowData.Stocks_valkogus返回未定义。
I tried code below. alert box shows that quantityVal is undefined. How to retrieve entered quantity?
我试过下面的代码。警报框显示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
});
}
回答by Oleg
I understand the problem very good. I agree that both predefined formatterwhich one can use currently ('showlink' and 'link' formatters) are not flexible enough.
我很好地理解了这个问题。我同意目前可以使用的两种预定义格式器（'showlink' 和 'link' 格式器）都不够灵活。
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 urldefined as function will be used in the <a>as the value of hrefattribute.
的url定义为函数将在被使用<a>作为值href属性。
Additionally to the urlformatoptionsthe 'dynamicLink' formatter supports targetoption (with the same meaning as by 'showlink'), cellValuewhich can be also function and onClickcallback with rowId, iRow, iCol, cellValue, eas parameters. If the onClickcallback is defined the value of urlwill be ignored. So one can skip the definition of the formatter option url.
除了urlformatoptions'dynamicLink' 格式化程序支持target选项（与 'showlink' 含义相同），cellValue它也可以是函数和onClick回调，以rowId, iRow, iCol, cellValue,e作为参数。如果onClick定义了回调，则 的值url将被忽略。所以可以跳过格式化选项的定义url。
The demodemonstrate the usage of the 'dynamicLink' formatter:
该演示演示了“dynamicLink”格式化程序的用法：
The current code of the formatter: 'dynamicLink'you can find below:
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 || ' ') + '</a>';
} else {
return ' ';
}
}
});
$.extend($.fn.fmatter.dynamicLink, {
unformat: function (cellValue, options, elem) {
var text = $(elem).text();
return text === ' ' ? '' : 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.
我打算将格式化程序的代码和其他一些插件放到 github 上的 jqGrid 中。
UPDATED:Free jqGridextends the options of formatter: "showlink"(see the wiki articleand the answer). So one don't need to use the formatter: "dynamicLink"in case of usage free jqGrid.
更新：免费 jqGrid扩展了formatter: "showlink"（参见维基文章和答案）的选项。所以formatter: "dynamicLink"在使用免费jqGrid的情况下不需要使用。
