JQGrid Resize issue

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

В ЯШ:

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