JQGrid Größe ändern

Question

Ich habe vor kurzem begonnen, JQGrid in einer App zu verwenden, die ich bei der Arbeit entwickle. Allerdings habe ich Probleme mit der Größe der Fenstergröße.

Das JQGrid befindet sich in einer Tabellenspalte, die auf 25% des übergeordneten Containers festgelegt ist. Wenn ich das Fenster erweitere, wird das JQGrid korrekt erweitert, aber wenn ich es verkleinere, wird es nicht proportional zum übergeordneten Container verkleinert, dh das JQGrid ist mehr als 25% seines Elternteils.

Wenn mir jemand etwas darüber sagen könnte, warum das passiert?

Hier ist mein Code:

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

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

Die 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

Verwenden setGridWidth Eigenschaft die Rastergröße in übergeordnete Steuerbreite basierend auf zurückgesetzt. Führen Sie diese Aktion im Fenster "Größe ändern" aus.

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