Làm cách nào để sử dụng cột cố định jqgrid cho các chiều rộng màn hình khác nhau?

Question

Tôi có một lưới JQgrid với nhiều cột. Một số người có màn hình rất rộng và một số có máy tính xách tay nhỏ.

Tôi muốn một giải pháp mà những người có màn hình rộng có thể có lưới kéo dài miễn là kích thước của cửa sổ.

Đối với những người có máy tính xách tay, tôi muốn họ có các cột được cố định để khi họ cuộn, họ không bị mất cột đầu tiên trong lưới.

Cách tốt nhất để hỗ trợ bố cục này là gì?

Answer 1

chủ đề này mô tả làm thế nào để thiết lập chiều rộng lưới điện dựa trên kích thước cửa sổ trình duyệt:

javascript - Resize jqGrid when browser is resized? - Stack Overflow

một Điều này cho thấy việc sử dụng colModel tùy chọn 'cố định' để thiết lập cột nhất định đến một kích thước cố định:

jQGrid set column width - Stack Overflow

Và cuối cùng, trang web này cung cấp một số mã ví dụ và các mẹo bổ sung để sử dụng JQGrid:

10 JQGrid Tipls learned from my experience << SANDBOX…….

Answer 2

Để có cả bố trí chất lỏng và colums đông lạnh theo kích thước màn hình xem ví dụ này có một bảng chất lỏng và một cột đầu tiên đông lạnh:

Bước 1 - Thêm jquery.jqGrid.min.js kịch bản từ trang web chính.

Bước 2 - Thêm jquery.jqGrid.fluid.js kịch bản từ trang web http://code.google.com/p/codeincubator/source/browse/Samples/steveharman/jQuery/jquery.jqgrid.fluid/jquery.jqGrid.fluid.js?r=170

Bước 3 - html

<div id="grid_wrapper" class="ui-corner-all floatLeft"> 
<table id="theGrid" class="scroll"> 
</table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 
</div> 

Step4 - Kích hoạt các kịch bản

function resize_the_grid() 

     { 
     $('#theGrid').fluidGrid({base:'#grid_wrapper', offset:-20}); 
     } 

$(document).ready(function(){ 

     var myGrid = $('#theGrid');   

     myGrid.jqGrid({ 

      datatype:'clientSide', 

      altRows:true, 

      colNames:['Name', 'Side', 'Power'], 

      colModel:[ 

      { name:'name', index: 'name', frozen : true }, 

      { name:'side', index: 'side' }, 

      { name:'power', index: 'power' } ], 

      pager: jQuery('#pager'), 

      viewrecords: true, 

      imgpath: 'css/start/images', 

       caption: 'The Force: Who\'s Who?', 

       height: "100%" 

     }); 

     myGrid.addRowData("1", {name:"Luke", side:"Good", power:"6"}); 

     myGrid.addRowData("2", {name:"Vader", side:"Dark", power:"9"}); 

     myGrid.addRowData("3", {name:"Han", side:"meh?", power:"0"});   

     resize_the_grid(); 
}); 

$(window).resize(resize_the_grid); 

Hy vọng điều này giúp đỡ.