如果超鏈接被點擊，如何從jqgrid行傳遞數據到url

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返回未定義。

我試了下面的代碼。警示框顯示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屬性的值。

此外到urlformatoptions的「dynamicLink」格式化器支持target選項（使用的相同的含義由「showlink」），cellValue其也可以起到和onClick回調與rowId，iRow，iCol，cellValue，e作爲參數。如果onClick回調被定義，那麼url的值將被忽略。所以可以跳過格式化程序選項url的定義。

The demo證明 '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。

更新：Free jqGrid延伸formatter: "showlink"選項（請參見the wiki article和the answer）。所以在使用免費jqGrid的情況下，不需要使用formatter: "dynamicLink"。