2014-02-28 102 views
0

我有一個使用側邊菜單和JQGrid的系統。隨着我的顯示器,我得到的菜單,如下圖所示的網格(在左邊的箱子是菜單的選項):響應式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的

回答

0

的想法是使用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'); 

希望這有助於

+0

當然,您可以在aplication內調整大小功能綁定到另一個contaner –