如何使 jqgrid 响应 bootstrap 中左侧菜单面板的隐藏

Question

我想让 jqgrid 响应 bootstrap，但是如何在隐藏左侧菜单面板时调整 jqgrid 的大小，因为当单击按钮时隐藏左侧菜单时，仅不会调用 window.resize 函数当我们改变浏览器大小时调用调整大小功能。参考请访问此站点Jqrid demo

在此示例中，如果我们隐藏左侧菜单，jqgrid 将简单地向左移动而不是覆盖整个 window 屏幕，如果您检查数据表示例，它将向左移动并占据整个区域 datatables

参考 http url 中的按钮位于文本搜索旁边

我的例子

html代码

点击锚标签时隐藏左面板

<!-- Left panel code start to hide unhide left panel-->
<div class="navbar-header">
     <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
</div>

<!-- Left panel code end to hide unhide left panel-->

<!-- Left Panel Start --> 
<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
            <li>
                <a href="index-2.html"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">
                    <li><a href="index-2.html">Dashboard v.1</a></li>
                    <li><a href="dashboard_2.html">Dashboard v.2</a></li>
                    <li><a href="dashboard_3.html">Dashboard v.3</a></li>
                    <li><a href="dashboard_4_1.html">Dashboard v.4</a></li>
                    <li><a href="dashboard_5.html">Dashboard v.5 <span class="label label-primary pull-right">NEW</span></a></li>
                </ul>
            </li>
        </ul>
   </div>
</nav>
<!-- Left Panel End-- > 

<!-- Jqgrid div -->
<div class="container-fluid">
    <table id="table_list_1"></table>
</div>

Java 脚本

<script>
    $(document).ready(function () {

        // Examle data for jqGrid
        var mydata = [
            { "Id": "1", IsActive:"N", CategoryName: "Name 1", "ComboDuration": "83123a" },
            { "Id": "2", IsActive:"N", CategoryName: "Name 3", "ComboDuration": "83432a" },
            { "Id": "3", IsActive:"N", CategoryName: "Name 2", "ComboDuration": "83566a" }
        ];

        // Configuration for jqGrid Example 1
        $grid = $("#table_list_1");
        $grid.jqGrid({
            data: mydata,
            datatype: "local",
            autowidth: true,
            rowList: [10, 20, 30],
            colNames: ["", "Active", "Name", "Duration"],
            colModel: [
                { name: "act", template: "actions" },
                { name: "IsActive", align: "center", sortable: false},
                { name: "CategoryName", sortable: false },
                { name: "ComboDuration", align: "center", sortable: false,
                    classes: "hidden-xs", labelClasses: "hidden-xs" }       
            ],
            autoResizing: { compact: true },
            cmTemplate: { editable: true, autoResizable: true },
                iconSet: "fontAwesome",
            jsonReader: {
                id: "Id",
                repeatitems: false
            },
            autowidth: true,
            rownumbers: true,
            sortname: "Id",
            caption: "Categories",
            viewrecords: true
        }).jqGrid("filterToolbar");

        $(window).bind("resize", function () {
            $grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
        }).triggerHandler("resize");
});

jquery 在左侧菜单上调用的方法 hide/unhide

   $('.navbar-minimalize').click(function () {

    // how to resize grid from here below code do not resize jqgrid
$("#table_list_1").jqGrid("setGridWidth", $("#table_list_1").closest(".container-fluid").width());
$("#table_list_1").triggerHandler('resize')
    $("body").toggleClass("mini-navbar");
    SmoothlyMenu();

});
</script>

Answer 1

"responsive"元素有多种不同的定义。甚至 bootstrap 也允许您使用不同的变体。一般来说，您只需要在某些事件上调用 setGridWidth，这对您很重要：在页面上隐藏某些元素或调整 window 的大小。看看 the answer with the demo，它使用 Bootstrap class "hidden-xs" 定义列应该隐藏在小网格上。

要换行 headers 列，您需要在 .ui-th-column>div 上添加 CSS 规则 white-space: pre-wrap;，如 the answer 中所述。如果您需要在网格 body 内添加文本换行，那么您也可以在 .ui-jqgrid-btable .jqgrow>td 上添加相同的规则：

.ui-th-column>div,
.ui-jqgrid-btable .jqgrow>td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    vertical-align: middle;
}

查看修改后的演示http://jsfiddle.net/OlegKi/andm1299/26/

Answer 2

这个 Css 帮我完成了工作。可能对某人有用

.ui-jqgrid,
.ui-jqgrid-view,
.ui-jqgrid-hdiv,
.ui-jqgrid-bdiv,
.ui-jqgrid-pager
{
width: 100% !important;
}

如何使 jqgrid 响应 bootstrap 中左侧菜单面板的隐藏

how to make jqgrid responsive on hidden of left menu panel in bootstrap

jquery

jqgrid

twitter-bootstrap-3

datatables-1.10