Làm thế nào để có được dữ liệu Row chọn trong jqGrid

Question

tôi khởi động trong jqGrid, tôi có 2 jqGrid trong trang, trong Grid1 tôi có inCustom và OutCustom tôi muốn người dùng nhấp chuột vào Lưới có được dữ liệu inCustom và outCustom trong ghi mã này

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

Khi nhấp chuột đầu tiên tại nút detils nhận được giá trị sai nhưng sau đó trả lại dữ liệu đúng

cảm ơn tất cả

Answer 1

trước hết tôi trả lời về câu hỏi chính của bạn. Vấn đề là bạn nhận được thông số selrow (id của hàng đã chọn) bên trong số gọi lại là beforeSelectRow. Tại lần nhấp đầu tiên vào nút 'chi tiết' không có hàng nào được chọn. Vì vậy, myGrid.jqGrid('getGridParam', 'selrow') sẽ trả về null và bạn sẽ không thể sử dụng getCell để nhận giá trị từ các cột 'IN_CUSTOMS' và 'OUT_CUSTOMS' của hàng có id = null.

Bạn luôn trả về true từ beforeSelectRow gọi lại. Vì vậy, bạn không muốn ngăn chặn lựa chọn hàng nếu người dùng nhấp vào nút 'chi tiết'. Trong trường hợp tôi khuyên bạn nên sử dụng số gọi onCellSelect. Bằng cách gọi lại có iCol (chỉ mục của ô đã được nhấp) làm tham số bổ sung. Nó sẽ đơn giản hóa thêm mã của bạn.

Nhận xét tiếp theo. Bạn sử dụng sortable: true trong tất cả các cột, nhưng giá trị mặc định của thuộc tính sortable đã là true (xem the documentation). Tôi khuyên bạn nên sử dụng column templates trong định nghĩa của jqGrid. Ví dụ: trong định nghĩa của lưới đầu tiên bạn sử dụng nhiều lần các thuộc tính giống nhau để xác định cột ẩn với hộp kiểm. Ngoài ra còn có nhiều cột có width: 100 và tất cả các cột có tiêu đề cột trống ''. Vì vậy, bạn có thể xác định lưới đầu tiên là

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

Bằng cách bạn giảm mã và làm cho mã dễ quản lý hơn (dễ bảo trì). Do sử dụng label bất động sản trong colModel no colNames tùy chọn nên được bao gồm.

Cũng giống như cách bạn có thể giảm mã xác định lưới thứ hai.

Một nhận xét khác. mã số if ($.jgrid.getCellIndex(e.target) == 37) { khó hiểu và duy trì. Nếu bạn sẽ bao gồm cột bổ sung trong lưới hoặc nếu bạn thậm chí thay đổi giá trị của một số tùy chọn (như rownumbers) hằng số 37 phải được thay đổi. Những gì bạn muốn làm chỉ là kiểm tra xem người dùng đã nhấp vào cột 'chi tiết' hay chưa. Tôi khuyên bạn nên sử dụng tên cột tốt hơn. Ví dụ:

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

Nhận xét cuối cùng. Bạn sử dụng GridUnload và sau đó tạo lại lưới thứ hai với các chi tiết. Thay vào đó, việc sử dụng .trigger('reloadGrid', [{page: 1}]) sẽ hiệu quả hơn (xem here). Lúc đầu bạn có thể tạo lưới thứ hai với datatype: 'local'. Nó sẽ ngăn chặn việc tải dữ liệu từ máy chủ. Bạn có thể đặt lưới thứ hai trong div mà bạn ẩn trực tiếp sau khi lưới được tạo và hiển thị div nếu cần. Nếu lưới thứ hai cần được điền thông tin bạn có thể sử dụng setGridParam để thay đổi datatype thành 'json' (xem the answer), hãy đặt các thông số khác như requestId của postData và sau đó gọi .trigger('reloadGrid', [{page: 1}]). Con đường sẽ hoạt động hiệu quả hơn.