Je veux rendre jqgrid réactif avec bootstrap, mais comment redimensionner jqgrid lorsque le panneau de menu de gauche est masqué car lorsque le menu de gauche est masqué lors d'un clic sur le bouton, la fonction window.resize n'est pas appelée uniquement lorsque nous changeons la fonction de redimensionnement de la taille du navigateur. référence s'il vous plaît visitez ce site Démo Jqrid

Dans cet exemple, si nous masquons le menu de gauche, jqgrid se déplacera simplement vers la gauche au lieu de couvrir tout l'écran de la fenêtre et si vous vérifiez l'exemple des tables de données, il se déplacera vers la gauche et occupera toute la zone datatables

Le bouton dans l'URL http de référence se trouve à côté de la recherche de texte pour quelque chose

Mon exemple

code html

Panneau de gauche masquer lorsque vous cliquez sur une balise d'ancrage

<!-- 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>

Javascript

<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");
});

Méthode jquery appelée dans le menu de gauche masquer / afficher

   $('.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>
0
pise 5 janv. 2016 à 16:18

2 réponses

Meilleure réponse

Il existe de nombreuses définitions différentes de l'élément «sensible». Même le bootstrap vous permet différentes variantes. En général, vous devez simplement appeler setGridWidth sur un événement, ce qui est important pour vous: masquer un élément sur la page ou redimensionner la fenêtre. Regardez la réponse avec la démo qui utilise la classe Bootstrap "hidden-xs" définit que la colonne doit être cachée sur une petite grille.

Pour encapsuler les en-têtes de colonnes, vous devez ajouter la règle CSS white-space: pre-wrap; sur .ui-th-column>div, décrite dans la réponse. Si vous devez ajouter un habillage du texte à l'intérieur du corps de la grille, vous pouvez également ajouter la même règle sur .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;
}

Voir la démo modifiée http://jsfiddle.net/OlegKi/andm1299/26/

0
Community 23 mai 2017 à 11:52

Ce Css a fait le travail pour moi. Peut être utile pour quelqu'un

.ui-jqgrid,
.ui-jqgrid-view,
.ui-jqgrid-hdiv,
.ui-jqgrid-bdiv,
.ui-jqgrid-pager
{
width: 100% !important;
}
0
Gagankumar Gullipalli 28 juil. 2020 à 14:41