하이퍼 링크를 클릭하면 jqgrid 행에서 url로 데이터를 전달하는 방법

Question

jqGrid에는 수량 열이 포함되어 있으며 아래의 colmodel을 사용하여 장바구니에 추가 버튼이 있습니다. 인라인 편집 은 수량을 채우는 데 사용됩니다. 수량이 fileld이고 다른 열의 카트 링크에 ​​추가를 클릭하면 Quantity가 AddToCart 컨트롤러에 전달되지 않습니다. json 데이터의 id 필드에있는 제품 ID가 올바르게 전달되었습니다.

AddToCart 컨트롤러에 선택된 수량을 전달하는 방법 (호출 된 URL 쿼리 문자열 또는 다른 것을 사용)?

colmodel입니다 : 서버에서

데이터는 JSON 형식 및 행 편집 모드를 사용에

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

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

업데이트. 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는 href 속성의 값으로 <a>에 사용됩니다. urlformatoptions 'dynamicLink'포맷터 또한

도 작동 될 수 cellValue 및 매개 rowId와 onClick 콜백 iRow, iCol, cellValue, e ('showlink'에 의해 동일한 의미) target 옵션을 지원 . onClick 콜백이 정의 된 경우 url 값은 무시됩니다. 따라서 포맷터 옵션 url의 정의를 건너 뛸 수 있습니다. 나는의 코드를 배치 할 계획

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

을 :

formatter: 'dynamicLink'의 현재 코드 아래 찾을 수 있습니다

The demo

는 'dynamicLink'포맷의 사용을 보여 jatter에 formatter와 다른 플러그인들을 jqGrid에 추가합니다.

업데이트 : Free jqGrid는 formatter: "showlink"의 옵션 ( the wiki article 및 the answer 참조) 연장한다. 따라서 무료 사용 jqGrid의 경우 formatter: "dynamicLink"을 사용할 필요가 없습니다.