데이터 행을 jqGrid에서 선택하는 방법

Question

저는 jqGrid에서 시작해 봅니다. Grid1에 2 개의 jqGrid가 있습니다. inCustom 및 OutCustom이 있습니다. Grid에서 사용자 클릭을 원한다면, 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 콜백 내부에 있음을 나타냅니다. 'details'버튼을 처음 클릭 할 때 행이 선택되지 않습니다. 따라서 myGrid.jqGrid('getGridParam', 'selrow')은 null을 반환하며 getCell을 사용하여 id = null 인 행의 'IN_CUSTOMS' 및 'OUT_CUSTOMS' 열의 값을 가져올 수 없습니다.

항상 beforeSelectRow 콜백에서 true를 반환합니다. 따라서 사용자가 '세부 정보'버튼을 클릭하면 행 선택을 방지하고 싶지 않습니다. 이 경우에는 onCellSelect 콜백을 사용하는 것이 좋습니다. 그런데 콜백은 추가 매개 변수로서 iCol (클릭 된 셀의 인덱스)을가집니다. 또한 코드가 단순 해집니다.

다음 발언. 모든 열에서 sortable: true을 사용하지만 sortable 속성의 기본값은 이미 true입니다 (the documentation 참조). 추가로 jqGrid의 정의에 column templates을 사용하는 것이 좋습니다. 예를 들어 첫 번째 격자의 정의에서 동일한 속성을 여러 번 사용하여 확인란과 함께 숨겨진 열을 정의 할 수 있습니다. 또한 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 그리드를 정의 할 수 있습니다. 때문에 colModel에 label 속성을 사용하기 때문에 no colNames 옵션을 포함해야합니다.

마찬가지로 두 번째 눈금을 정의하는 코드를 줄일 수 있습니다.

또 다른 의견. 코드 if ($.jgrid.getCellIndex(e.target) == 37) {은 이해하고 유지하기가 어렵습니다. 표에 추가 열을 포함 시키거나 일부 옵션 값 (예 : rownumbers)을 변경하는 경우 상수 37을 변경해야합니다. 사용자가 원하는 것은 사용자가 '세부 정보'열을 클릭했는지 여부를 테스트하는 것입니다. 열 이름을 더 잘 사용하는 것이 좋습니다. 예를 들어

마지막주의 사항. GridUnload을 사용하고 두 번째 그리드을 다시 작성하십시오. 대신 .trigger('reloadGrid', [{page: 1}])을 사용하는 것이 더 효과적 일 수 있습니다 (here 참조). 처음에는 datatype: 'local'으로 두 번째 눈금을 만들 수 있습니다. 서버에서 데이터로드를 막습니다. 그리드가 생성 된 직후에 숨기고있는 div에 두 번째 그리드를 배치하고 필요한 경우 div를 표시 할 수 있습니다. 두 번째 표에 setGridParam을 사용하여 datatype을 'json'(the answer 참조)으로 변경하고 requestId과 같은 다른 매개 변수를 postData으로 설정 한 다음 .trigger('reloadGrid', [{page: 1}])을 호출 할 수 있습니다. 방법은 더 효과적으로 작동합니다.