響應式JQGrid

Question

我有一個使用側邊菜單和JQGrid的系統。隨着我的顯示器，我得到的菜單，如下圖所示的網格（在左邊的箱子是菜單的選項）：

當我調整窗口大小或我調低屏幕決議中的jqGrid被搞砸了，我得到這個：

我怎樣才能獲得的jqGrid接近菜單不搞亂它呢？我一直在調查，我知道，使它響應是答案，但我不知道如何在這裏應用它

菜單動態應用，它有，如下圖所示：

<link href="../drop-down-menu/css/helper.css" media="screen" rel="stylesheet" type="text/css" /> 
    <link href="/drop-down-menu/css/dropdown/dropdown.vertical.css" media="screen" rel="stylesheet" type="text/css" /> 
    <link href="/drop-down-menu/css/dropdown/themes/flickr.com/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" /> 
    <ul id="nav" class="dropdown dropdown-vertical"> 
     <?php    
      foreach($menuhtml as $lineamenuhtml){ 
       echo $lineamenuhtml; 
      } 
     ?> 
    </ul> 

由jqGrid的使用的樣式（包括Twitter的引導）：

<link rel="stylesheet" type="text/css" media="screen" href="/css/flick/jquery-ui-1.8.16.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/css/ui.jqgrid.css" /> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 

AUTOEDIT設置爲true和shrinkToFit設置爲false在jqGrid的

Answer 1

的想法是使用jqGrid的setGridWidth客戶端方法，並在加載頁面時將其設置爲頁面大小（例如，在document.ready事件中）。這種方法的示例代碼：

$(document).ready(function() { 
    var pageWidth = $(window).width(); 
    jQuery("#GridID").setGridWidth(pageWidth); 
}); 

要進行實際的大小調整，實現以下邏輯功能綁定到窗口的resize事件：

• 利用其父的clientWidth計算網格的寬度和 （如果不可用）其offsetWidth屬性。
• 進行完整性檢查，以確保寬度變化超過X 像素（來解決一些特定應用的問題
• 最後，使用setGridWidth（）來更改網格的寬度

下面是例子代碼來處理調整：

jQuery(window).bind('resize', function() { 

    // Get width of parent container 
    var width = jQuery(targetContainer).attr('clientWidth'); 
    if (width == null || width < 1){ 
     // For IE, revert to offsetWidth if necessary 
     width = jQuery(targetContainer).attr('offsetWidth'); 
    } 
    width = width - 2; // Fudge factor to prevent horizontal scrollbars 
    if (width > 0 && 
     // Only resize if new width exceeds a minimal threshold 
     // Fixes IE issue with in-place resizing when mousing-over frame bars 
     Math.abs(width - jQuery(targetGrid).width()) > 5) 
    { 
     jQuery(targetGrid).setGridWidth(width); 
    } 

}).trigger('resize'); 

希望這有助於