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