Как сделать jqgrid отзывчивым на скрытую панель меню слева в bootstrap

Question

Я хочу сделать jqgrid отзывчивым с загрузкой, но как изменить размер jqgrid, когда панель меню слева скрыта, потому что, когда левое меню скрыто при нажатии кнопки, функция window.resize не вызывается только при изменении размера изменения размера браузера. За ссылкой обратитесь на этот сайт. Jqrid demo

В этом примере, если мы скроем левое меню, jqgrid просто переместится влево, а не закрывает весь экран окна, и если вы проверите например, он перемещается влево и занимает всю площадь 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

<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

Существует много разных определений «отзывчивого» элемента. Даже бутстрап позволяет вам разные варианты. В общем, вам нужно просто вызвать setGridWidth на каком-то событии, что важно для вас: скрытие какого-либо элемента на странице или изменение размера окна. Посмотрите the answer с the demo, который использует класс Bootstrap «hidden-xs», чтобы определить, что столбец должен быть скрыт на небольшой сетке.

Чтобы сделать обертывание заголовков столбцов, вам необходимо добавить правило CSS white-space: pre-wrap; на .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/