Jqgrid custom formatter button click not working

Question

Я создал сетку, и один из моих столбцов имеет пользовательскую кнопку в каждой строке. Когда я нажимаю кнопку, мое событие click не вызывается.

Мой jqgrid:

$('#QuoteLineTable').jqGrid({ 
     url: $('#url').val(), 
     datatype: 'json', 
     type: 'POST', 
     postData: { Id: $("#Id").val() }, 
     colNames: ['Id', 'Quote Number', 'Valid Until Date','View Line Item'], 
     colModel: [ 
      { name: "QuoteLineId", index: "QuoteLineId", hidden: false, hidedlg: true }, 
      { name: 'QuoteNumber', index: "QuoteNumber" }, 
      { name: 'ValidUntil', formatter: "date", formatoptions: { newformat: "d/m/Y" }, width: '100px' }, 
      { name: 'View Line Item', formatter: viewLineBtn } 

     ], 
     multiselect: true, 
     emptyrecords: "No Quote Line to view", 
     gridview: true, 
     autoencode: true, 
     loadtext: "Loading...", 
     loadonce: true, 
     rowNum: 3, 
     rowList: [10, 20, 30], 
     pager: '#LinePager', 
     height: '100%', 
     caption: "Quote List", 
     autowidth: true, 
     sortname: 'QuoteNumber', 
     ajaxGridOptions: { type: 'POST', contentType: "application/json; charset=utf-8" }, 
     jsonReader: { 
      repeatitems: false, 
      root: "rows", 
      page: "page", 
      total: "totalPages", 
      records: "totalRecords", 
      id: "QuoteLineId" 
     }, 
     serializeGridData: function(postData) { 
      return JSON.stringify(postData); 
     }, 
     onCellSelect: function(rowid,e) { 

       alert("rowid=" + rowid); 

     }, 

     ondblClickRow: function(rowid) { 

      var $model = $('#LineItemMyModal'); 

      $.ajax({ 
       type: "GET", 
       url: $('#urlItemDetails').val(), 
       data: { LineId: rowid }, 
       success: function(r) { 
        $model.html(r); 
        $model.modal('show'); 
       } 
      }); 


     } 
    }).navGrid('#QuoteLinePager', { edit: false, add: false, del: false, search: true }); 


    function viewLineBtn(cellvalue, options, rowObject) { 
     return "<button class=\"viewLineItem\">View Line Item</button>" 
    }; 


$('.viewLineItem').click(function (rowId) { 
    alert("hi"); 
    alert(rowId); 
}); 

В принципе, я не знаю, как назвать это событие щелчка на кнопке класса = viewLineItem.

Я попытался использовать onCellSelect или beforeSelectRow, но мне также нужно использовать ondblClickRow для заполнения модального. Поэтому я ищу другие варианты без использования oncellSelect.

Answer 1

Попробуйте что-нибудь подобное.

$('#QuoteLineTable').jqGrid({ 
      url: $('#url').val(), 
      datatype: 'json', 
      type: 'POST', 
      postData: { Id: $("#Id").val() }, 
      colNames: ['Id', 'Quote Number', 'Valid Until Date','View Line Item'], 
      colModel: [ 
       { name: "QuoteLineId", index: "QuoteLineId", hidden: false, hidedlg: true }, 
       { name: 'QuoteNumber', index: "QuoteNumber" }, 
       { name: 'ValidUntil', formatter: "date", formatoptions: { newformat: "d/m/Y" }, width: '100px' }, 
       { name: 'View Line Item', formatter: viewLineBtn } 

      ], 
      multiselect: true, 
      emptyrecords: "No Quote Line to view", 
      gridview: true, 
      autoencode: true, 
      loadtext: "Loading...", 
      loadonce: true, 
      rowNum: 3, 
      rowList: [10, 20, 30], 
      pager: '#LinePager', 
      height: '100%', 
      caption: "Quote List", 
      autowidth: true, 
      sortname: 'QuoteNumber', 
      ajaxGridOptions: { type: 'POST', contentType: "application/json; charset=utf-8" }, 
      jsonReader: { 
       repeatitems: false, 
       root: "rows", 
       page: "page", 
       total: "totalPages", 
       records: "totalRecords", 
       id: "QuoteLineId" 
      }, 
      serializeGridData: function(postData) { 
       return JSON.stringify(postData); 
      }, 
      onCellSelect: function(rowid,e) { 

        alert("rowid=" + rowid); 

      }, 

      ondblClickRow: function(rowid) { 

       var $model = $('#LineItemMyModal'); 

       $.ajax({ 
        type: "GET", 
        url: $('#urlItemDetails').val(), 
        data: { LineId: rowid }, 
        success: function(r) { 
         $model.html(r); 
         $model.modal('show'); 
        } 
       }); 


      } 
     }).navGrid('#QuoteLinePager', { edit: false, add: false, del: false, search: true }); 


     function viewLineBtn(cellvalue, options, rowObject) { 
      var rowid= options.rowid; 
      var button = "<button class=\"viewLineItem\" id="+ rowid+">View Line Item</button>" 
     $('#' + rowid).die(); 
     $('#' + rowid).live('click', function (rowId) { 
      alert("hi"); 
      alert(rowId); 
     }); 
     }; 

Answer 2

Это работает для меня:

$('#QuoteLineTable').jqGrid({ 
    .... 
    colModel: [ 
     ... 
     { name: 'View Line Item', formatter: viewLineBtn } 
    ] 
    loadComplete: function (data) { 
     console.log(data); // You can view the object 
     let rowDataArray = data.rows; 
     for (let i = 0, j = rowDataArray.length; i < j; i++) 
     { 
      let temp = rowDataArray[i]; 
      $("#btn_" + temp.id).click(() => { 
       m_alert(temp.content); 
      }); 
     } 
    } 
    }); 

    function viewLineBtn(cellvalue, options, rowObject) 
    { 
     return "<button id='btn_" + rowObject.id + "'>View Line Item</button>" 
    }