JQGrid 크기 조정 문제

Question

최근 직장에서 개발중인 앱에서 JQGrid를 사용하기 시작했습니다. 그러나, 크기를 조정할 때 창의 크기를 조정할 때 몇 가지 문제가 있습니다.

JQGrid는 상위 컨테이너의 25 %로 설정된 테이블 열 안에 배치됩니다. 창을 확장하면 JQGrid가 올바르게 확장되지만 크기를 줄이면 부모 컨테이너에 비례하여 축소되지 않습니다. 즉 JQGrid가 부모의 25 % 이상입니다.

누군가 이런 일이 발생하는 이유에 대한 의견을 나에게 줄 수 있습니까?

<div id="main_body"> 
      <div class="row"> 
       <div id="criteriacolumn" class="column"> 
        <table id="list"></table> 
       </div> 
       <div class="column"> 
       </div> 
      </div> 
    </div> 

는 CSS :

 #main_body{ 
    border: 1px solid black; 
    display: table; 
    width: 100%; 
    } 

    .row{ 
    display: table-row; 
    } 

    .column{ 
    display: table-cell; 
    } 

    #criteriacolumn{ 
    border:1px solid red; 
    width: 50%; 
    min-width: 200px; 
    } 

JS : 부모 컨트롤의 폭에 따라 격자 크기를 재설정

$("#list").jqGrid({ 
    url: "http://localhost:8080/Customer/rest/customers/cust", 
    datatype: "json", 
    mtype: "GET", 
    colNames: ["ID", "CU#","Name"], 
    colModel: [ 
     { name: "custId"}, 
     { name: "custNbr" }, 
     { name: "rptName", align: "right" }, 
    ], 
    rowNum:300, 
    autowidth:true 
    scrollOffset:false 
    }); 

Answer 1

사용 setGridWidth 속성

여기 내 코드입니다. 창 크기 조정 이벤트에서이 조치를 수행하십시오.

$(window).resize(function() { 
    var gridWidth = $('#criteriacolumn').width(); 
    if (gridWidth > 0) { 
     $("#list").setGridWidth(gridWidth);    
    } 
});