web-dev-qa-db-fra.com

Redimensionner jqGrid lorsque le navigateur est redimensionné?

Est-il possible de redimensionner jqGrid lorsque la fenêtre du navigateur est redimensionnée? J'ai essayé la méthode décrite ici mais cette technique ne fonctionne pas dans IE7.

javascriptjqueryjqgridgridresize
81
Justin Ethier

En guise de suivi:

Le code précédent présenté dans cet article a finalement été abandonné car il n’était pas fiable. J'utilise maintenant la fonction API suivante pour redimensionner la grille, comme recommandé par la documentation de jqGrid:

jQuery("#targetGrid").setGridWidth(width);

Pour effectuer le redimensionnement réel, une fonction mettant en oeuvre la logique suivante est liée à l'événement de redimensionnement de la fenêtre:

  • Calculez la largeur de la grille en utilisant clientWidth de son parent et (si ce n'est pas disponible) son attribut offsetWidth.

  • Effectuez une vérification de cohérence pour vous assurer que la largeur a changé de plus de x pixels (pour résoudre certains problèmes spécifiques à l'application).

  • Enfin, utilisez setGridWidth () pour changer la largeur de la grille.

Voici un exemple de code pour gérer le redimensionnement:

jQuery(window).bind('resize', function() {

    // Get width of parent container
    var width = jQuery(targetContainer).attr('clientWidth');
    if (width == null || width < 1){
        // For IE, revert to offsetWidth if necessary
        width = jQuery(targetContainer).attr('offsetWidth');
    }
    width = width - 2; // Fudge factor to prevent horizontal scrollbars
    if (width > 0 &&
        // Only resize if new width exceeds a minimal threshold
        // Fixes IE issue with in-place resizing when mousing-over frame bars
        Math.abs(width - jQuery(targetGrid).width()) > 5)
    {
        jQuery(targetGrid).setGridWidth(width);
    }

}).trigger('resize');

Et exemple de balisage:

<div id="grid_container">
    <table id="grid"></table>
    <div id="grid_pgr"></div>
</div>
53
Justin Ethier

J'utilise cela en production depuis quelque temps maintenant sans aucune plainte (il est possible que quelques ajustements soient nécessaires pour regarder directement sur votre site. Par exemple, en soustrayant la largeur d'une barre latérale, etc.)

$(window).bind('resize', function() {
    $("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');
68
Stephen Fuhry

Redimensionnement automatique:

Pour jQgrid 3.5+

        if (grid = $('.ui-jqgrid-btable:visible')) {
            grid.each(function(index) {
                gridId = $(this).attr('id');
                gridParentWidth = $('#gbox_' + gridId).parent().width();
                $('#' + gridId).setGridWidth(gridParentWidth);
            });
        }

Pour jQgrid 3.4.x:

       if (typeof $('table.scroll').setGridWidth == 'function') {
            $('table.scroll').setGridWidth(100, true); //reset when grid is wider than container (div)
            if (gridObj) {

            } else {
                $('#contentBox_content .grid_bdiv:reallyvisible').each(function(index) {
                    grid = $(this).children('table.scroll');
                    gridParentWidth = $(this).parent().width() – origami.grid.gridFromRight;
                    grid.setGridWidth(gridParentWidth, true);
                });
            }
        }
36
jmav

cela semble bien fonctionner pour moi

$(window).bind('resize', function() {
    jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');
8
Darren Cato

J'utilise 960.gs pour la mise en page et ma solution est la suivante:

    $(window).bind(
        'resize',
        function() {
                    //  Grid ids we are using
            $("#demogr, #allergygr, #problemsgr, #diagnosesgr, #medicalhisgr").setGridWidth(
                    $(".grid_5").width());
            $("#clinteamgr, #procedgr").setGridWidth(
                    $(".grid_10").width());
        }).trigger('resize');
// Here we set a global options

jQuery.extend(jQuery.jgrid.defaults, {
    // altRows:true,
    autowidth : true,
    beforeSelectRow : function(rowid, e) { // disable row highlighting onclick
        return false;
    },
    datatype : "jsonstring",
    datastr : grdata,  //  JSON object generated by another function
    gridview : false,
    height : '100%',
    hoverrows : false,
    loadonce : true,
    sortable : false,
    jsonReader : {
        repeatitems : false
    }
});

// Demographics Grid

$("#demogr").jqGrid( {
    caption : "Demographics",
    colNames : [ 'Info', 'Data' ],
    colModel : [ {
        name : 'Info',
        width : "30%",
        sortable : false,
        jsonmap : 'ITEM'
    }, {
        name : 'Description',
        width : "70%",
        sortable : false,
        jsonmap : 'DESCRIPTION'
    } ],
    jsonReader : {
        root : "DEMOGRAPHICS",
        id : "DEMOID"
    }
});

// Autres grilles définies ci-dessous ...

7
Sultan Shakir

En empruntant le code sur votre lien, vous pouvez essayer quelque chose comme ceci:

$(window).bind('resize', function() { 
    // resize the datagrid to fit the page properly:
    $('div.subject').children('div').each(function() {
        $(this).width('auto');
        $(this).find('table').width('100%');
    });
});

De cette façon, vous vous liez directement à l'événement window.onresize, qui ressemble en réalité à ce que vous souhaitez de votre question.

Si votre grille est définie sur 100% width, elle devrait automatiquement se développer lorsque son conteneur se développera, à moins que le plug-in que vous utilisez ne subisse certaines subtilités que je ne connais pas.

4
Dave L

Si vous:

  • avoir shrinkToFit: false _ (colonnes de largeur fixe moyenne)
  • avoir autowidth: true
  • ne vous souciez pas de la hauteur du liquide
  • avoir une barre de défilement horizontale

Vous pouvez créer une grille avec une largeur fluide avec les styles suivants:

.ui-jqgrid {
  max-width: 100% !important;
  width: auto !important;
}

.ui-jqgrid-view,
.ui-jqgrid-hdiv,
.ui-jqgrid-bdiv {
   width: auto !important;
}

Voici une démo

4
Chintsu

La réponse principale a fonctionné pour moi mais a rendu l’application extrêmement insensible dans IE, alors j’ai utilisé une minuterie comme suggéré. Le code ressemble à quelque chose comme ceci ($(#contentColumn) est le div dans lequel JQGrid est assis):

  function resizeGrids() {
    var reportObjectsGrid = $("#ReportObjectsGrid");
    reportObjectsGrid.setGridWidth($("#contentColumn").width());
};

var resizeTimer;

$(window).bind('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeGrids, 60);
});
3
woggles

Bonjour les amateurs de débordement de pile. J'ai apprécié la plupart des réponses, et j'ai même voté en faveur d'un couple, mais aucune d'entre elles n'a fonctionné pour moi sur IE 8 pour une raison étrange ... J'ai toutefois rencontré ces liens .. Ce mec a écrit une bibliothèque qui semble fonctionner. Incluez-la dans vos projets en plus de l'interface utilisateur, indiquez le nom de votre table et de la div.

http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx

http://code.google.com/p/codeincubator/source/browse/#svn%2FSamples%2Fsteveharman%2FjQuery%2Fjquery.jqgrid.fluid%253Fstate%253Dclosed

3
SoftwareSavant

Cela marche..

var $targetGrid = $("#myGridId");
$(window).resize(function () {
    var jqGridWrapperId = "#gbox_" + $targetGrid.attr('id') //here be dragons, this is     generated by jqGrid.
    $targetGrid.setGridWidth($(jqGridWrapperId).parent().width()); //perhaps add padding calculation here?
});
1
Erik
autowidth: true

a parfaitement fonctionné pour moi. appris de ici .

1
understack
<script>
$(document).ready(function(){    
$(window).on('resize', function() {
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize');      
});
</script>
0
Minimax