使jqGrid在Web瀏覽器上響應的方法

Question

我是jqGrid的新手，我需要在調整Web瀏覽器窗口大小時調整網格大小。 我申請了autowidth : true; ， shrinkToFit: true; 在網格中，但這是行不通的。

設置CSS width : 100%是唯一的一個實現，但在jqGrid的情況下它並不好
它在許多內部結構中明確地設置了px width 。

什么是解決它的最佳方法？

Answer 1

jqGrid在許多內部結構（div，表等）上使用固定width值。 所以不能只設置CSS width : 100% 。 然而，還有另一種方法可以做到這一點。 可以在window對象上注冊resize事件處理程序並顯式調用setGridWidth 。 該方法將jqGrid的所有內部結構調整為新寬度。 所以這將是干凈的方法。

如果使用autowidth: true則jqGrid僅將jqGrid的寬度設置為其父級的寬度一次。 在$(window).resize處理程序內部，我們可以獲得父級的新 （當前）寬度並重置網格width的值。 相應的代碼如下

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

我用$("#list").closest(".ui-jqgrid")而不是$("#list")因為jqGrid的建立在主一些潛水<table>元素。 $("#list").closest(".ui-jqgrid")給出外部 div，其中包含網格的所有元素。

改進的小提琴演示演示代碼實時。

Answer 2

我寫了一個可以用來制作網格響應的CSS： https ： //github.com/guylando/Responsive-jqGrid/blob/master/Responsive-jqGrid.css

在我看來它比使用javascript更快。

這是css代碼：

 .ui-jqgrid .ui-jqgrid-toppager .ui-pager-control, .ui-jqgrid .ui-jqgrid-pager .ui-pager-control { height: auto; } .ui-jqgrid .ui-pager-control td[id$="_toppager_center"], .ui-jqgrid .ui-pager-control td[id$="pager_center"] { width: auto !important; white-space: normal !important; height: auto; } .ui-jqgrid .ui-pager-control td[id$="_toppager_left"], .ui-jqgrid .ui-pager-control td[id$="pager_left"] { width: auto !important; white-space: normal !important; height: auto; } .ui-jqgrid .ui-pager-control td[id$="_toppager_right"], .ui-jqgrid .ui-pager-control td[id$="pager_right"] { width: auto !important; white-space: normal !important; height: auto; } .ui-jqgrid .ui-jqgrid-bdiv, .ui-jqgrid .ui-jqgrid-view.table-responsive, .ui-jqgrid, .ui-jqgrid-pager, .ui-jqgrid-toppager, .ui-jqgrid-hdiv { width: auto !important; } .ui-jqgrid .ui-pager-control td[id$="_toppager_left"], .ui-jqgrid .ui-pager-control td[id$="pager_left"], .ui-jqgrid .ui-pager-control td[id$="_toppager_center"], .ui-jqgrid .ui-pager-control td[id$="pager_center"] { overflow-x: auto; overflow-y: hidden; } 

Answer 3

添加到下面的方法到jqgrid的beforeEvent ......

功能

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', '');
}

Answer 4

我嘗試了以下代碼，但發現它沒有為響應設備提供任何滾動條。 因此決定自定義JQGRID樣式表：

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

請找到我的hack讓JQ Grid正確響應

/ **** JQ網格響應*** /

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

將其添加到自定義樣式表並設置為查看JQGrid完全響應！

任何其他建議將是最受歡迎的。 嘗試一下並享受吧！