JQGrid Cột chiều rộng tự động

Question

Tôi chỉ tự hỏi làm thế nào chúng ta có thể thiết lập một chiều rộng cột jqGrid để tự động?

... 
colModel: [ 
{ name: 'MyDescription', index: 'description', align: 'left', width: 150, sortable: false }, 
... 

cho tuyên bố ở trên làm cách nào tôi có thể chỉ định chiều rộng tự động cho cột sao cho nó vừa với kích thước của nội dung tối đa trong cột.

Answer 1

Không có cách nào để chỉ định cột autowidth trong jqGrid. Nhưng bạn có thể sử dụng tùy chọn shrinkToFit của lưới được đặt thành true và đặt một số giá trị độ rộng gần đúng (ví dụ: 20, 20, 20, 80) và chiều rộng của cột sẽ được chia tỷ lệ theo chiều rộng của lưới.

Co lại vừa trang:

tùy chọn này mô tả các loại tính chiều rộng ban đầu của mỗi cột chống với chiều rộng của lưới điện. Nếu giá trị là đúng và giá trị trong tùy chọn chiều rộng được đặt sau đó: Mỗi chiều rộng cột được chia tỷ lệ theo chiều rộng tùy chọn được xác định. Ví dụ: nếu chúng tôi xác định hai cột có chiều rộng là 80 và 120 pixel, nhưng muốn lưới có 300 pixel - thì các cột được tính lại như sau: 1- cột = 300 (chiều rộng mới)/200 (tổng của tất cả chiều rộng) * 80 (chiều rộng cột) = 120 và 2 cột = 300/200 * 120 = 180. Chiều rộng lưới là 300px. Nếu giá trị là false và tùy chọn giá trị chiều rộng được đặt sau đó: Chiều rộng của lưới là độ rộng được đặt trong tùy chọn. Chiều rộng cột không được tính toán lại và có các giá trị được xác định trong colModel.

Answer 2

Bạn có thể thử sử dụng tableToGrid, theo như tôi nhớ nó giữ nguyên độ rộng. Nếu vậy, bạn cũng có thể xem xét mã nguồn của nó nếu hành vi của nó không hoàn toàn phù hợp với nhu cầu của bạn.

Answer 3

Bạn có thể sử dụng phương thức setGridWidth.

Ví dụ:

$(window).on('resize', function() { 
    $("#jqgrid").setGridWidth($(window).width()); 
}).trigger('resize'); 

DEMO

Answer 4

này được chủ yếu là làm việc cho tôi.

<div id="myjqgridwrapper" style="width:100%;"> 
    <table id="myjqgrid"></table> 
    <div id="myjqgridfooter"></div> 
</div> 

<script type="text/javascript"> 
    //script to autosize grid 
    //don't forget autowidth:true for initial size 
    $(window).bind('resize', function(){ 
     //set to 0 so grid does not continually grow 
     $('#myjqgrid').setGridWidth(0); 
     //resize to our container's width 
     $('#myjqgrid').setGridWidth($('#myjqgridwrapper').width()); 
    }).trigger('resize'); 
</script> 

Answer 5

Try this. Worked For Me 

.ui-common-table{ 
    width: 100% !important; 
} 

.ui-jqgrid .ui-jqgrid-hbox{ 
    padding-right: 0px !important; 
}