đáp ứng/chất lỏng jQGrid với Twitter Bootstrap

Question

Tôi bắt đầu tạo ứng dụng sử dụng jQgrid ở nhiều nơi. Bây giờ khách hàng muốn sử dụng Twitter Bootstrap để họ có thể xem trang web độc đáo trong iPad.

Chúng tôi đã hoàn thành mọi thứ, ngoại trừ plugin jQGrid. Nó sử dụng một px width để xác định chiều rộng của lưới và column width.

jQuery("#list2").jqGrid({ 
    url:'server.php?q=2', 
    datatype: "json", 
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    colModel:[ 
     {name:'id',index:'id', width:55}, 
     {name:'invdate',index:'invdate', width:90}, 
     {name:'name',index:'name asc, invdate', width:100}, 
     {name:'amount',index:'amount', width:80, align:"right"}, 
     {name:'tax',index:'tax', width:80, align:"right"},  
     {name:'total',index:'total', width:80,align:"right"},  
     {name:'note',index:'note', width:150, sortable:false}  
    ], 
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager2', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
    caption:"JSON Example" 
}); 
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false}); 

Tôi không biết về cách xử lý vấn đề đáp ứng này với jQGrid. Ngoài ra, tôi có thể thay thế jQGrid bằng DataTable Plugin để đáp ứng. Nhưng chúng tôi sử dụng jQgrid ở nhiều nơi và chức năng rất tốt, chúng tôi không muốn phá vỡ chức năng hiện có.

Bất kỳ ý tưởng/đề xuất nào để sử dụng jQgrid làm hỗ trợ bố cục phản hồi/chất lỏng?

Answer 1

Tôi đề nghị xem this answer để biết một số ý tưởng về cách tạo chất lỏng lưới bằng phương pháp setGridWidth. Bên cạnh đó bạn nên xem xét lưới sau options:

• autowidth

Khi thiết lập là true, chiều rộng lưới điện được tính toán lại tự động với độ rộng của các yếu tố phụ huynh. Việc này chỉ được thực hiện ngay khi lưới được tạo. Để thay đổi kích thước lưới khi những thay đổi yếu tố phụ huynh chiều rộng bạn nên áp dụng mã tùy chỉnh và sử dụng phương pháp setGridWidth cho mục đích này

• Co lại vừa

Tùy chọn này, nếu đã đặt định nghĩa như thế nào với chiều rộng của các cột của lưới điện phải được tính lại, có tính đến chiều rộng của lưới. Nếu giá trị này là đúng và chiều rộng của các cột cũng được đặt, thì mỗi cột được chia tỷ lệ theo chiều rộng của cột.

Tùy chọn shrinkToFit được đặt theo mặc định, nhưng bạn cần đặt rõ ràng autowidth.

Điều đó có hữu ích không?

Answer 2

Có, bạn có thể làm cho nó đáp ứng với một phương pháp rất đơn giản.

Chỉ cần mở CSS của bạn và cung cấp chiều rộng trong %.

Ví dụ:

ui-grid{ width:100% !important; } 

Sau đó thay đổi cơ thể bảng cho phù hợp.

Answer 3

Tôi đã tìm thấy giải pháp này, nó hoạt động tốt trên các ứng dụng của tôi.

Bọc bạn bảng trong một div:

<div id="jqGrid_container"> 
    <table id="jqList"></table> 
    <div id="jqPager"></div> 
</div> 

Và trong mã javascript của bạn:

$(window).bind('resize', function() { 
    var width = $('#jqGrid_container').width(); 
    $('#jqList').setGridWidth(width); 
}); 

hoặc nếu bạn không cần phải thay đổi kích thước, chỉ cần:

$(document).ready(function() { 
    var width = $('#jqGrid_container').width(); 
    $('#jqList').setGridWidth(width); 
}); 

Tôi nghĩ bạn cũng cần phải đưa vào các tùy chọn jqgrid của mình: autowidth: true,.210 Co lại vừa trang: đúng,

Answer 4

Bạn có thể thêm đoạn mã này:

jQuery("#grid").jqGrid({ 
...... 
beforeRequest: function() { 
        responsive_jqgrid($("#divWhereYourgridIsDisplayed")); 
       }, 
....... 
}); 

Và sau này, bạn nên thêm:

function responsive_jqgrid(jqgrid) { 
       jqgrid.find('.ui-jqgrid').addClass('clear-margin span12').css('width', ''); 
       jqgrid.find('.ui-jqgrid-view').addClass('clear-margin span12').css('width', ''); 
       jqgrid.find('.ui-jqgrid-view > div').eq(1).addClass('clear-margin span12').css('width', '').css('min-height', '0'); 
       jqgrid.find('.ui-jqgrid-view > div').eq(2).addClass('clear-margin span12').css('width', '').css('min-height', '0'); 
       jqgrid.find('.ui-jqgrid-sdiv').addClass('clear-margin span12').css('width', ''); 
       jqgrid.find('.ui-jqgrid-pager').addClass('clear-margin span12').css('width', ''); 
      } 

Hope làm việc này :)

Answer 5

này hoạt động tốt cho bootstrap responsive

jQuery("#your-list-id").setGridWidth($('.your-reference-element').width()-10, true); 

sẽ sử dụng chiều rộng "tham chiếu của phần tử" để thay đổi kích thước lưới

Answer 6

Phiên bản mới của jqGrid 5.0 có hỗ trợ gốc của Bootstrap.

Kể từ phiên bản 5.0 Guriddo jqGrid có thể được điều chỉnh dễ dàng với bất kỳ khung CSS nào. Chúng tôi đã phát triển một cổng Bootstrap. Để sử dụng tính năng mà bạn sẽ chỉ cần bao gồm CSS phù hợp

<link rel="stylesheet" type="text/css" media="screen" href="path_to_css_files/ui.jqgrid-bootstrap.css" /> 

tập tin và nói với jqGrid sử dụng Bootstrap - với các tùy chọn:

$("#grid").jqGrid({ 
    ... 
    styleUI : "Bootstrap", 
    ... 
}); 

Trừ Column Chooser và tái định cỡ các lưới với một con chuột, chúng tôi hỗ trợ tất cả các tính năng jqGrid hiện có.

Demo

Source

Answer 7

tùy chỉnh CSS

Tôi đã thử các mã sau nhưng quan sát thấy rằng nó không cung cấp bất kỳ cuộn cho các thiết bị đáp ứng. Do đó quyết định để tùy chỉnh kiểu jqGrid:

$(window).on("resize", function() { 
    var $grid = $("#list"), 
     newWidth = $grid.closest(".ui-jqgrid").parent().width(); 
    $grid.jqGrid("setGridWidth", newWidth, true); 
}); 

Hãy tìm hack của tôi để làm JQ Lưới đúng đáp ứng

/**** JQ lưới đáp ứng ***/

#gview_jqgrid, div#myPager {width:100% !important;height:100% !important;} 
.ui-jqgrid-hdiv, .ui-jqgrid-htable {width:100% !important;height:100% !important;} 
.ui-jqgrid-bdiv, #jqgrid {width:100% !important;height:100% !important;} 
.ui-jqgrid .ui-jqgrid-hbox {padding-right:0 !important;} 
.ui-jqgrid tr.jqgrow td { white-space: pre-wrap !important;} 
div#gbox_jqgrid { width: 100% !important; overflow-x: scroll; margin-bottom: 80px !important;} 

Thêm này vào biểu định kiểu tùy chỉnh & được đặt để xem JQGrid đáp ứng đầy đủ!

Bất kỳ đề xuất nào khác sẽ được hoan nghênh nhất. Hãy dùng thử & Hãy tận hưởng!

Answer 8

đang Tiếp theo làm cho tất cả các bảng jqGrid trên trang đáp ứng:

$(window).on("resize", function() { 
    $('.ui-jqgrid').each(function(){ 
     $('#'+$(this).attr("id").substring(5)).setGridWidth($(this).parent().width()); 
    }); 
});