响应式 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 Bootstrap）：

<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">

在 JQGrid 上 Autoedit 设置为 true，shrinkToFit 设置为 false

Answer 1

想法是使用 jqGrid 的 setGridWidth 客户端方法，并在页面加载时（例如在 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');

希望对你有帮助