Größe von jqGrid ändern, wenn die Größe des Browsers geändert wird?

Gibt es eine Möglichkeit, die Größe eines jqGrid zu ändern, wenn die Größe des Browserfensters geändert wird? Ich habe die hier beschriebene Methode ausprobiert , aber diese Technik funktioniert in IE7 nicht.

Ich verwende dies seit einiger Zeit ohne Beschwerden in der Produktion (möglicherweise sind einige Anpassungen erforderlich, um auf Ihrer Website richtig auszusehen. Zum Beispiel das Abziehen der Breite einer Seitenleiste usw.)

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

Als Nachfolge:

Der vorherige Code in diesem Beitrag wurde schließlich aufgegeben, weil er unzuverlässig war. Ich verwende jetzt die folgende API-Funktion, um die Größe des Rasters zu ändern, wie in der jqGrid-Dokumentation empfohlen:

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

Um die eigentliche Größenänderung durchzuführen, ist eine Funktion, die die folgende Logik implementiert, an das Größenänderungsereignis des Fensters gebunden:

• Berechnen Sie die Breite des Rasters mithilfe der clientWidth des übergeordneten Elements und (falls nicht verfügbar) des OffsetWidth-Attributs.

• Führen Sie eine Überprüfung der Integrität durch, um sicherzustellen, dass sich die Breite um mehr als x Pixel geändert hat (um einige anwendungsspezifische Probleme zu umgehen).

• Verwenden Sie abschließend setGridWidth (), um die Breite des Rasters zu ändern

Hier ist ein Beispielcode für die Größenänderung:

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');

Und Beispiel Markup:

<div id="grid_container">
    <table id="grid"></table>
    <div id="grid_pgr"></div>
</div>

Automatische Größenänderung:

Für 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);
            });
        }

Für 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);
                });
            }
        }

Das scheint gut für mich zu funktionieren

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

Ich verwende 960.gs für das Layout, daher lautet meine Lösung wie folgt:

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

// Andere unten definierte Gitter ...

Wenn du:

• haben shrinkToFit: false(mittlere Spalten mit fester Breite)
• haben autowidth: true
• Kümmere dich nicht um die Flüssigkeitshöhe
• haben horizontale Bildlaufleiste

Sie können Raster mit flüssiger Breite mit folgenden Stilen erstellen:

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

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

Hier ist eine Demo

Wenn Sie sich den Code unter Ihrem Link ausleihen, können Sie Folgendes ausprobieren:

$(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%');
    });
});

Auf diese Weise binden Sie direkt an das window.onresize-Ereignis, das tatsächlich so aussieht, wie Sie es von Ihrer Frage erwarten.

Wenn Ihr Raster auf 100% Breite eingestellt ist, sollte es sich automatisch erweitern, wenn sich sein Container erweitert, es sei denn, das verwendete Plugin weist einige Komplikationen auf, die ich nicht kenne.

Die Hauptantwort funktionierte für mich, machte die App jedoch im IE extrem unempfindlich, sodass ich wie vorgeschlagen einen Timer verwendete. Code sieht $(#contentColumn)ungefähr so aus ( ist das Div, in dem sich das JQGrid befindet):

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

var resizeTimer;

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

Hallo Stack-Überlauf-Enthusiasten. Ich habe die meisten Antworten genossen und sogar ein paar Stimmen hochgestimmt, aber keiner von ihnen hat aus irgendeinem seltsamen Grund für mich im IE 8 funktioniert ... Ich bin jedoch auf diese Links gestoßen ... Dieser Typ hat eine Bibliothek geschrieben, die zu sein scheint Arbeit. Nehmen Sie es in Ihre Projekte auf, und fügen Sie den Namen Ihrer Tabelle und das div hinzu.

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

autowidth: true

hat perfekt für mich funktioniert. von hier gelernt .

Das funktioniert..

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

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