Question

我想让jqgrid对bootstrap做出响应，但是当左侧菜单面板被隐藏时如何调整jqgrid的大小，因为当单击按钮时隐藏左侧菜单时，只有当我们更改浏览器大小调整大小时才会调用window.resize函数如需参考，请访问此网站Jqrid demo

在这个示例中，如果我们隐藏左侧菜单，jqgrid将简单地移动到左侧而不是覆盖整个窗口屏幕，如果您检查数据表示例，它将向左移动并占据整个区域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方法隐藏/取消隐藏

   $('.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

“响应”元素有许多不同的定义。甚至引导程序允许您进行不同的变化。通常，您只需要在某个事件上调用setGridWidth，这对您来说很重要：在页面上隐藏一些元素或调整窗口大小。使用the answer查看使用Bootstrap类“hidden-xs”的the demo，确定该列应隐藏在小网格上。

要对列标题进行换行，您需要在white-space: pre-wrap;上添加CSS规则.ui-th-column>div，如the answer中所述。如果您需要在网格主体内添加文本包装，那么您也可以在.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中左侧菜单面板的隐藏

2 个答案: