jqGridで選択されたデータ行を取得する方法

Question

私はjqGridのスターターで、ページ内のGrid1にjqGridを持っています。私はinCustomとOutCustomを持っています。グリッドでユーザーがクリックしたいのですが、カスタムとアウトカスタムがこのコードを書くには

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

detilsボタンで最初のクリックは、偽の値を取得しますが、その後の後、すべてのすべて

Answer 1

まず、私はあなたの主な質問に答える

感謝に正しいデータを返します。問題はselrowパラメータ（選択した行のID）がbeforeSelectRowコールバックの内側にあることです。 「詳細」ボタンを最初にクリックすると、行が選択されません。したがってmyGrid.jqGrid('getGridParam', 'selrow')はnullを返し、を使用して、id = nullの行の'IN_CUSTOMS'と'OUT_CUSTOMS'列の値を取得することはできません。

コールバックは常にbeforeSelectRowコールバックからtrueを返します。したがって、ユーザーが「詳細」ボタンをクリックした場合、行の選択を防止したくありません。この場合、onCellSelectコールバックを使用することをお勧めします。ところで、コールバックには追加のパラメータとしてiCol（クリックされたセルのインデックス）があります。さらに、コードを簡素化します。

次の発言。すべての列にsortable: trueを使用しますが、デフォルト値sortableのプロパティはすでにtrueです（the documentation参照）。さらに、column templatesをjqGridの定義に使用することをお勧めします。たとえば、最初のグリッドの定義では、複数の同じプロパティを使用して、チェックボックスで非表示の列を定義します。さらに、width: 100を持つ多くの列があり、すべての列に空の列ヘッダー''があります。だから、あなたは、コードを削減し、より管理しやすい（簡単に維持するために）作るようにして

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

として第1グリッドを定義することができます。利用のためにlabelのプロパティはないので、colNamesオプションを含める必要があります。

同様に、2番目のグリッドも定義するコードを減らすことができます。

別の発言。コードif ($.jgrid.getCellIndex(e.target) == 37) {は理解して維持するのが難しいです。グリッドに列を追加する場合や、一部のオプションの値を変更する場合（rownumbersなど）、定数37を変更する必要があります。あなたがしたいのは、ユーザーが「詳細」列をクリックしたかどうかをテストすることだけです。私は列の名前をよりよく使用することをお勧めします。例えば、

最後の発言。 GridUnloadを使用し、次にの詳細と2番目のグリッドを作成します。代わりに.trigger('reloadGrid', [{page: 1}])を使用すると効果的です（here参照）。最初はdatatype: 'local'で2番目のグリッドを作成することができます。サーバーからのデータのロードを防止します。グリッドが作成された直後に非表示にするdivに2番目のグリッドを配置し、必要に応じてdivを表示することができます。 2番目のグリッドにsetGridParamを使用してdatatypeを 'json'（the answerを参照）に変更する場合は、requestIdのような他のパラメータをpostDataに設定してから.trigger('reloadGrid', [{page: 1}])を呼び出してください。方法はより効果的に動作します。