如何让 jqgrid 在 bootstrap 中隐藏左侧菜单面板时做出响应

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，这对您很重要：隐藏页面上的某些元素或调整窗口大小。使用 Bootstrap 类“hidden-xs”查看答案和演示确实定义了该列应隐藏在小网格上。

要对列标题进行换行，您需要在

white-space: pre-wrap;

上添加 CSS 规则

.ui-th-column>div

，如答案中所述。如果您需要在网格体内添加文本换行，那么您也可以在

.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;
}

Answer 3

中午好！ *.cshtml-file 中有一个超链接

 <pre>    <div class="navbar-header">
        <a class="navbar-minimalize  minimalize-styl-2  btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
    </div>

关键词 - “导航栏最小化”。