响应型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">

自动编辑设置为true，shrinkToFit设置为JQGrid上的false。

Answer 1

其思想是使用setGridWidth客户端jqGrid方法，并在页面加载时(例如在document.ready事件中)将其设置为页面大小。这种方法的示例代码：

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

要执行实际的调整大小，实现下列逻辑的函数绑定到窗口的调整大小事件：

• 使用其父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');

希望这能有所帮助