Wie bekomme ich Data Row ausgewählt in jqGrid

Question

ich bin Starter in jqGrid, ich habe 2 jqGrid in der Seite, in der Grid1 ich habe inCustom und OutCustom Ich will Benutzer klicken in Grid Daten inCustom und outCustom in diesen Code

var grid = $('#list'); 
grid.jqGrid({ 
    url: 'jQGridHandler.ashx', 
    postData: { ActionPage: 'ClearanceRequest', Action: 'Fill' }, 
    ajaxGridOptions: { cache: false }, 
    loadonce: true, 
    direction: "rtl", 
    datatype: 'json', 
    height: 600, 
    width: 1000, 
    colNames: ['', '', '', ' ', '', '', '', '', '', 
       '', '', ' ', '', '', '', '', '', '', 
       '', ' ', '', '', '', '', 
       '', '', '', '', '', '', ' ', 
       '', '', '', '', '', ''], 
    colModel: [ 
     { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true }, 
     { name: 'REQUEST_DATE', width: 50, sortable: true }, 
     { name: 'REQUEST_NO', width: 60, sortable: true }, 
     { name: 'CUSTOMER_ID', width: 100, sortable: true }, 
     { name: 'TRANSPORT_TYPE', width: 40, sortable: true }, 
     { name: 'CLEARANCE_TYPE', width: 50, sortable: true }, 
     { name: 'IMPORT_EXPORT', width: 30, sortable: true, editable: false, 
      edittype: 'checkbox', editoptions: { value: "True:False" }, 
      formatter: "checkbox", formatoptions: { disabled: false }, hidden: true 
     }, 
     { name: 'WAYBILL_NO', width: 50, sortable: true }, 
     { name: 'WAYBILL_OFFICE', width: 100, sortable: true }, 
     { name: 'MANIFEST', width: 200, sortable: true, hidden: true }, 
     { name: 'STORE_BILL', width: 100, sortable: true, hidden: true }, 
     { name: 'DIRECT_NO', width: 100, sortable: true, hidden: true }, 
     { name: 'STORE_DATE', width: 100, sortable: true, hidden: true }, 
     { name: 'INOUT_DATE', width: 50, sortable: true, hidden: true }, 
     { name: 'SOURCE_COUNTRY', width: 30, sortable: true, hidden: true }, 
     { name: 'SOURCE_CITY', width: 80, sortable: true, hidden: true }, 
     { name: 'DESTINATION_COUNTRY', width: 100, sortable: true, hidden: true }, 
     { name: 'IN_CUSTOMS', width: 200, sortable: true, hidden: true }, 
     { name: 'OUT_CUSTOMS', width: 100, sortable: true, hidden: true }, 
     { name: 'INSURER_ID', width: 100, sortable: true, hidden: true }, 
     { name: 'INSURANCE_NO', width: 100, sortable: true, hidden: true }, 
     { name: 'CLEARANCE_PERSON', width: 50, sortable: true, hidden: true }, 
     { name: 'PROXY_NO', width: 30, sortable: true, hidden: true }, 
     { name: 'FACTOR_NO', width: 80, sortable: true, hidden: true }, 
     { name: 'SHIP_NAME', width: 100, sortable: true, hidden: true }, 
     { name: 'TRAVEL_NO', width: 200, sortable: true, hidden: true }, 
     { name: 'INDENT_NO', width: 100, sortable: true, hidden: true }, 
     { name: 'COOTAG_NO', width: 100, sortable: true, hidden: true }, 
     { name: 'PERMIT_NO', width: 100, sortable: true, hidden: true }, 
     { name: 'CLEARANCE_NO', width: 50, sortable: true, hidden: true }, 
     { name: 'CARNETIR_NO', width: 30, sortable: true, hidden: true }, 
     { name: 'PURCHASE_TYPE', width: 80, sortable: true, hidden: true }, 
     { name: 'ALL_VALUE', width: 100, sortable: true, hidden: true }, 
     { name: 'FREIGHT_STATUS', width: 30, sortable: true, editable: false, 
      edittype: 'checkbox', editoptions: { value: "True:False" }, 
      formatter: "checkbox", formatoptions: { disabled: false }, hidden: true 
     }, 
     { name: 'COPY_ORIGINAL', width: 30, sortable: true, editable: false, 
      edittype: 'checkbox', editoptions: { value: "True:False" }, 
      formatter: "checkbox", formatoptions: { disabled: false }, hidden: true 
     }, 
     { name: 'REMARK', width: 100, sortable: true, hidden: true }, 
     { name: 'details', width: 20, sortable: false, search: false, 
      formatter: function() { 
       return "<span class='ui-icon ui-icon-document'></span>"; 
      } 
     } 
    ], 
    gridview: true, 
    rowNum: 30, 
    rowList: [30, 60, 90], 
    pager: '#pager', 
    sortname: 'WorkOrderNo', 
    viewrecords: true, 
    sortorder: 'ASC', 
    rownumbers: true, 
    beforeSelectRow: function (rowid, e) { 
     var iCol = $.jgrid.getCellIndex(e.target); 
     // alert(rowid); 
     console.log(rowid); 
     //listItem 
     console.log($.jgrid.getCellIndex(e.target)); 
     if ($.jgrid.getCellIndex(e.target) == 37) { 
      $("#listItem").jqGrid("GridUnload"); 
      var gridItem = $('#listItem'); 
      gridItem.jqGrid({ 
       url: 'jQGridHandler.ashx', 
       postData: { ActionPage: 'ClearanceItems', Action: 'Fill', requestId: rowid }, 
       ajaxGridOptions: { cache: false }, 
       loadonce: true, 
       direction: "rtl", 
       datatype: 'json', 
       height: 200, 
       colNames: ['', '', '', '', ' ', ' ', '', 
          '', '', 'ا', ' ', '', ' ', 
          '', '', ' ', ' ', 
          '', '', '', ' ', ' ', ' ', ' ', ''], 
       colModel: [ 
        { name: 'REQUEST_ID', width: 100, sortable: true }, 
        { name: 'ITEM_NO', width: 200, sortable: true }, 
        { name: 'GOODS_DESCRIPTION', width: 100, sortable: true }, 
        { name: 'QUANTITY', width: 100, sortable: true }, 
        { name: 'PACKING_TYPE', width: 100, sortable: true }, 
        { name: 'GROSS_WEIGHT', width: 50, sortable: true }, 
        { name: 'TARE_WEIGHT', width: 30, sortable: true }, 
        { name: 'MEASUREMENT_TYPE', width: 80, sortable: true, hidden: true }, 
        { name: 'GOODS_PRICE', width: 100, sortable: true, hidden: true }, 
        { name: 'GOODS_CURRENCY', width: 200, sortable: true, hidden: true }, 
        { name: 'GOODS_CURRENCY_RATE', width: 100, sortable: true, hidden: true }, 
        { name: 'FREIGHT_PRICE', width: 100, sortable: true, hidden: true }, 
        { name: 'FREIGHT_CURRENCY', width: 100, sortable: true, hidden: true }, 
        { name: 'FREIGHT_CURRENCY_RATE', width: 50, sortable: true, hidden: true }, 
        { name: 'INSURANCE_PRICE', width: 30, sortable: true, hidden: true }, 
        { name: 'INSURANCE_CURRENCY', width: 80, sortable: true, hidden: true }, 
        { name: 'INSURANCE_CURRENCY_RATE', width: 100, sortable: true, hidden: true }, 
        { name: 'TARIFF_NO', width: 200, sortable: true, hidden: true }, 
        { name: 'CUSTOM_PRICE', width: 100, sortable: true, hidden: true }, 
        { name: 'WARRANTY_PRICE', width: 100, sortable: true, hidden: true }, 
        { name: 'INOUT_DATE', width: 100, sortable: true, hidden: true }, 
        { name: 'VEHICLE_TYPE', width: 50, sortable: true, hidden: true }, 
        { name: 'VEHICLE_NO', width: 30, sortable: true, hidden: true }, 
        { name: 'WAREHOUSE_ID', width: 80, sortable: true, hidden: true }, 
        { name: 'REMARK', width: 80, sortable: true, hidden: true } 
       ], 
       gridview: true, 
       rowNum: 20, 
       rowList: [20, 40, 60], 
       pager: '#pagerItem', 
       viewrecords: true, 
       sortorder: 'ASC', 
       rownumbers: true 
      }); 
      gridItem.jqGrid('navGrid', '#pagerItem', { add: true, edit: true, del: true }, 
       {}, {}, {}, { multipleSearch: true, overlay: false, width: 460 }); 

      var myGrid = grid; 
      var selRowId = myGrid.jqGrid('getGridParam', 'selrow'); 
      celValue = myGrid.jqGrid('getCell', selRowId, 'IN_CUSTOMS'); 
      celValue2 = myGrid.jqGrid('getCell', selRowId, 'OUT_CUSTOMS'); 

      console.log(celValue); 

      console.log(celValue2); 

      alert(celValue); 
      alert(celValue2); 

      $("#POPUP2").dialog({ width: 780 }); 
     } 

     return true; 
    } 
}); 
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: true }, 
    {}, {}, {}, { multipleSearch: true, overlay: false, width: 460 }) 
     .navButtonAdd("#pager", { 
      caption: "", 
      buttonicon: "ui-icon-plus", 
      onClickButton: function() { 
       // alert("Adding Row"); 
       $("#POPUP1").dialog({ width: 730 }); 
      }, 
      position: "first" 

     }) 
     .navButtonAdd("#pager", { 
      caption: "", 
      buttonicon: "ui-icon ui-icon-pencil", 
      onClickButton: function() { 

      }, 
      position: "first" 

     }) 
      .navButtonAdd("#pager", { 
       caption: "", 
       buttonicon: "ui-icon ui-icon-trash", 
       onClickButton: function() { 

       }, 
       position: "first" 
      }); 

Wenn ersten Klick in detils Taste falschen Wert erhalten, aber nach dem dann korrekten Daten

dankt allen

Answer 1

zunächst einmal kehre ich auf Ihre Hauptfrage beantworten. Das Problem ist, dass Sie selrow Parameter (die ID der ausgewählten Zeile) innerhalb von beforeSelectRow Rückruf erhalten. Beim ersten Klick auf die Schaltfläche "Details" wird keine Zeile ausgewählt. So myGrid.jqGrid('getGridParam', 'selrow') wird null zurückgeben und Sie können nicht getCell verwenden, um Werte von 'IN_CUSTOMS' und 'OUT_CUSTOMS' Spalte der Zeile mit ID = null zu erhalten.

Sie geben immer True von beforeSelectRow Rückruf zurück. Sie möchten also die Zeilenauswahl nicht verhindern, wenn der Benutzer auf die Schaltfläche "Details" klickt. In dem Fall würde ich empfehlen, dass Sie besser onCellSelect Rückruf verwenden. Übrigens hat der Rückruf iCol (der Index der Zelle, auf die geklickt wurde) als zusätzlichen Parameter. Es wird Ihren Code zusätzlich vereinfachen.

Nächste Bemerkung. Sie verwenden sortable: true in allen Spalten, aber der Standardwert sortable Eigenschaft ist bereits true (siehe the documentation). Zusätzlich würde ich empfehlen, in der Definition von jqGrid column templates zu verwenden. In der Definition des ersten Rasters verwenden Sie beispielsweise mehrfach die gleichen Eigenschaften, um versteckte Spalten mit dem Kontrollkästchen zu definieren. Zusätzlich gibt es viele Spalten mit width: 100 und alle Spalten haben eine leere Spaltenüberschrift ''. So können Sie das erste Gitter als

var grid = $('#list'), 
    hiddenCheckboxTemplate = { width: 30, editable: false, 
     edittype: 'checkbox', editoptions: { value: "True:False" }, 
     formatter: "checkbox", formatoptions: { disabled: false }, hidden: true 
    }; 
grid.jqGrid({ 
    colModel: [ 
     { name: 'REQUEST_ID', hidden: true }, 
     { name: 'REQUEST_DATE', width: 50 }, 
     { name: 'REQUEST_NO', width: 60 }, 
     { name: 'CUSTOMER_ID' }, 
     { name: 'TRANSPORT_TYPE', width: 40 }, 
     { name: 'CLEARANCE_TYPE', width: 50 }, 
     { name: 'IMPORT_EXPORT', template: hiddenCheckboxTemplate }, 
     { name: 'WAYBILL_NO', width: 50 }, 
     { name: 'WAYBILL_OFFICE' }, 
     { name: 'MANIFEST', width: 200, hidden: true }, 
     { name: 'STORE_BILL', hidden: true }, 
     { name: 'DIRECT_NO', hidden: true }, 
     { name: 'STORE_DATE', hidden: true }, 
     { name: 'INOUT_DATE', width: 50, hidden: true }, 
     { name: 'SOURCE_COUNTRY', width: 30, hidden: true }, 
     { name: 'SOURCE_CITY', width: 80, hidden: true }, 
     { name: 'DESTINATION_COUNTRY', hidden: true }, 
     { name: 'IN_CUSTOMS', width: 200, hidden: true }, 
     { name: 'OUT_CUSTOMS', hidden: true }, 
     { name: 'INSURER_ID', hidden: true }, 
     { name: 'INSURANCE_NO', hidden: true }, 
     { name: 'CLEARANCE_PERSON', width: 50, hidden: true }, 
     { name: 'PROXY_NO', width: 30, hidden: true }, 
     { name: 'FACTOR_NO', width: 80, hidden: true }, 
     { name: 'SHIP_NAME', hidden: true }, 
     { name: 'TRAVEL_NO', width: 200, hidden: true }, 
     { name: 'INDENT_NO', hidden: true }, 
     { name: 'COOTAG_NO', hidden: true }, 
     { name: 'PERMIT_NO', hidden: true }, 
     { name: 'CLEARANCE_NO', width: 50, hidden: true }, 
     { name: 'CARNETIR_NO', width: 30, hidden: true }, 
     { name: 'PURCHASE_TYPE', width: 80, hidden: true }, 
     { name: 'ALL_VALUE', hidden: true }, 
     { name: 'FREIGHT_STATUS', template: hiddenCheckboxTemplate }, 
     { name: 'COPY_ORIGINAL', template: hiddenCheckboxTemplate }, 
     { name: 'REMARK', hidden: true }, 
     { name: 'details', width: 20, sortable: false, search: false, 
      formatter: function() { 
       return "<span class='ui-icon ui-icon-document'></span>"; 
      } 
     } 
    ], 
    cmTemplate: { width: 100, label: '' }, 
    ... other option. No colNames are needed because of usage label 
}); 

In der Art und Weise definieren Sie den Code zu reduzieren und machen es besser handhabbar (leicht zu pflegen). Aufgrund der Verwendung label Eigenschaft in colModel keine colNames Option sollte enthalten sein.

Auf die gleiche Weise können Sie den Code reduzieren, der auch das zweite Gitter definiert.

Noch eine Bemerkung. Der Code ist schwer zu verstehen und zu pflegen. Wenn Sie eine zusätzliche Spalte in das Raster einfügen oder wenn Sie sogar den Wert einer Option ändern (wie rownumbers), sollte die Konstante 37 geändert werden. Was Sie tun möchten, ist nur zu testen, ob der Benutzer auf die Spalte "Details" geklickt hat. Ich würde Ihnen empfehlen, die Spaltennamen besser zu verwenden. Zum Beispiel

var colModel = $(this).jqGrid('getGridParam', 'colModel'), 
    cm = colModel[iCol]; // iCol is defined before as $.jgrid.getCellIndex(e.target) 
if (cm && cm.name === 'details') { 
    .... 
} 

Die letzte Bemerkung. Sie verwenden GridUnload und dann erstellen Sie das zweite Raster mit Details neu. Es wäre effektiver, stattdessen .trigger('reloadGrid', [{page: 1}]) zu verwenden (siehe here). Zu Beginn können Sie das zweite Raster mit datatype: 'local' erstellen. Es verhindert das Laden von Daten vom Server. Sie können das zweite Raster in div platzieren, das Sie direkt nach dem Erstellen des Rasters ausblenden, und das div bei Bedarf anzeigen. Wenn das zweite Raster mit Informationen gefüllt werden muss, können Sie setGridParam verwenden, um datatype in 'json' zu ändern (siehe the answer), andere Parameter wie requestId von postData einstellen und dann .trigger('reloadGrid', [{page: 1}]) aufrufen. Der Weg wird effektiver arbeiten.