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

IT技术 javascript jqgrid
2021-01-31 11:22:18

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

如何将选定的数量传递给 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返回未定义。

我试过下面的代码。警报框显示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
    });
}
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, iRow, iCol, 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));

我打算将格式化程序的代码和其他一些插件放到 github 上的 jqGrid 中。

更新: 免费 jqGrid扩展了formatter: "showlink"(参见维基文章答案)的选项。所以formatter: "dynamicLink"在使用免费jqGrid的情况下不需要使用

@Andrus:默认值为url“#”。所以,如果你只是跳过url定义或使用url: '#'onClick将被调用。如果你会用var $quantity = $('#' + $.jgrid.jqID(rowid) + '>td:nth-child(' + (iCol + 1) + ')')得到<td>的“量”的调用。如果$quantity.find('>input').length === 0该小区不是在编辑模式,都rowData.Stocks_valkogus$quantity.text()获得的value。如果$quantity.find('>input').length === 1单元格处于编辑模式并且您可以获得关于 的值$quantity.find('>input').val()它应该工作。
2021-03-17 11:22:18
@Andrus:对不起,但我仍然不明白你在做什么以及为什么保存不起作用。无论如何,onClick您都知道rowid。因此,您可以对行进行全面分析。您也可以轻松地从任何<input>控件获取当前数据,大约$('#' + $.jgrid.jqID(rowid) + '>td:nth-child(' + (iCol + 1) + '>input').val()在哪里iCol应该是数量列的索引。
2021-03-21 11:22:18
谢谢你。我试过这个,但编辑开始前的数量被返回。我更新了问题。
2021-04-04 11:22:18
@Andrus:您在这里以错误的方式使用格式化程序。在我看来,您希望使用该链接来替代内联编辑的“保存”按钮。在您的情况下,我建议您只使用onClick格式化程序的一部分。onClick回调中,您可以调用saveRow以确保保存当前编辑行的值。如果除了行保存之外还需要执行此操作,您还可以对服务器进行任何其他调用
2021-04-11 11:22:18
@Andrus:如果您不实现行的保存,我仍然不明白为什么要使用内联编辑。此外,Store/Details?...似乎是纯 HTTP get 将被缓存在客户端,并且可能不会在第二次调用服务器。您必须在Store/Details响应的 HTTP 标头中放置重新验证缓存的当前代码addToCartOnClick不好,因为如果您单击不在编辑中的行中的链接,它将无法工作。在代码中,我看到您应该使用')>input'而不是'>input'.
2021-04-11 11:22:18