响应式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'); 

希望这有助于