如何使jqgrid響應隱藏在引導程序的左側菜單面板

Question

我想使jqgrid響應與引導，但如何調整jqgrid當左側菜單面板被隱藏，因爲當左側菜單隱藏在按鈕單擊，window.resize函數只有當我們改變瀏覽器大小時纔會調用調整大小功能調用。有關參考請訪問本站Jqrid demo

在本例中，如果我們隱藏左側菜單，jqgrid將簡單地移動到左側而不是覆蓋整個窗口屏幕，如果您檢查datatables示例它將移動到左側並佔據整個區域datatables

參考http url中的按鈕位於文本搜索的旁邊s omething

我的例子

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與the demo它使用Bootstrap類「hidden-xs」確定該列應該隱藏在小網格上。

要包裝列標題，您需要添加上的CSS規則white-space: pre-wrap;，如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/