Come ottenere la riga dati selezionata in jqGrid

Question

sono iniziatore in jqGrid, ho 2 jqGrid nella pagina, in Grid1 ho inCustom e OutCustom voglio che l'utente faccia clic su Grid ottieni Dati inCustom e outCustom scrivi questo codice

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" 
      }); 

Quando primo scatto nel tasto detils ottenere valore falso ma dopo poi tornare dati corretti

ringrazia tutti

Answer 1

prima di tutto rispondo alla tua domanda principale. Il problema è che si ottiene il parametro selrow (l'ID della riga selezionata) all'interno della richiamata beforeSelectRow. Al primo clic sul pulsante 'dettagli' non viene selezionata alcuna riga. Quindi myGrid.jqGrid('getGridParam', 'selrow') restituirà null e non sarà possibile utilizzare getCell per ottenere valori dalla colonna 'IN_CUSTOMS' e 'OUT_CUSTOMS' della riga con id = null.

Viene sempre restituito true dal callback beforeSelectRow. Quindi non vuoi impedire la selezione delle righe se l'utente fa clic sul pulsante "dettagli". Nel caso in cui ti consigliamo di utilizzare meglio il callback onCellSelect. Tra l'altro il callback ha iCol (l'indice della cella su cui è stato fatto clic) come parametro aggiuntivo. Semplifichera ulteriormente il tuo codice.

Osservazione successiva. Si utilizza sortable: true in tutte le colonne, ma il valore predefinito della proprietà sortable è già true (vedere the documentation). Ulteriore suggerirei di utilizzare column templates nella definizione di jqGrid. Ad esempio nella definizione della prima griglia si utilizzano più volte le stesse proprietà per definire la colonna nascosta con la casella di controllo. Inoltre ci sono molte colonne con width: 100 e tutte le colonne hanno un'intestazione di colonna vuota ''. Così si può definire la prima griglia come

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 
}); 

Nel modo si riduce il codice e renderlo più gestibile (facile da mantenere). A causa dell'utilizzo della proprietà label nell'opzione colModel non è possibile includere l'opzione colNames.

Allo stesso modo è possibile ridurre il codice che definisce anche la seconda griglia.

Un'altra osservazione. il codice if ($.jgrid.getCellIndex(e.target) == 37) { è difficile da capire e da mantenere. Se si include colonna aggiuntiva nella griglia o se si modifica anche il valore di alcune opzioni (come rownumbers), è necessario modificare la costante 37. Quello che vuoi fare è testare se l'utente ha fatto clic sulla colonna "dettagli". Ti consiglierei di usare meglio i nomi delle colonne. Ad esempio

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

L'ultima osservazione. Si utilizza GridUnload e quindi ricreare la seconda griglia con i dettagli. Sarebbe più efficace usare invece .trigger('reloadGrid', [{page: 1}]) (vedere here). All'inizio puoi creare la seconda griglia con datatype: 'local'. Impedirà il caricamento dei dati dal server. È possibile posizionare la seconda griglia in div che si nasconde direttamente dopo che la griglia è stata creata e mostrare il div se necessario. Se è necessario riempire la seconda griglia di informazioni, è possibile utilizzare setGridParam per modificare datatype in "json" (vedere the answer), impostare altri parametri come requestId di postData e quindi chiamare .trigger('reloadGrid', [{page: 1}]). Il modo funzionerà in modo più efficace.