javascript - Cambiar el tamaño de jqGrid cuando se cambia el tamaño del navegador?

jquery resize

Question

¿Hay alguna manera de cambiar el tamaño de un jqGrid cuando se jqGrid tamaño de la ventana del navegador? He intentado con el método descrito here pero esa técnica no funciona en IE7.

Answer 1

Cambio de tamaño automático:

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

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

Answer 2

Como seguimiento:

El código anterior que se muestra en esta publicación finalmente se abandonó porque no era confiable. Ahora estoy usando la siguiente función API para cambiar el tamaño de la grilla, como lo recomienda la documentación de jqGrid:

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

Para hacer el cambio de tamaño real, una función que implementa la siguiente lógica está vinculada al evento de cambio de tamaño de la ventana:

• Calcule el ancho de la grilla usando el clientWidth de su padre y (si no está disponible) su atributo offsetWidth.

• Realice una comprobación de cordura para asegurarse de que el ancho haya cambiado más de x píxeles (para solucionar algunos problemas específicos de la aplicación)

• Finalmente, use setGridWidth () para cambiar el ancho de la grilla

Aquí hay un código de ejemplo para manejar el cambio de tamaño:

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

Y el marcado de ejemplo:

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

Answer 3

Esto funciona..

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

Answer 4

Estoy usando 960.gs para el diseño, por lo que mi solución es la siguiente:

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

// Otras cuadrículas definidas a continuación ...

Answer 5

He estado usando esto en producción desde hace algún tiempo sin ningún tipo de queja (puede tomar algunas modificaciones para que se vea bien en su sitio ... por ejemplo, restar el ancho de una barra lateral, etc.)

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

Answer 6

Hola entusiastas de desbordamiento de pila. Disfruté de la mayoría de las respuestas, e incluso voté como una pareja, pero ninguna de ellas funcionó para mí en IE 8 por alguna extraña razón ... Sin embargo encontré estos enlaces ... Este tipo escribió una biblioteca que parece trabajo. Inclúyalo en sus proyectos en adición a jquery UI, escriba el nombre de su tabla y el 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

Answer 7

La respuesta principal funcionó para mí, pero hizo que la aplicación no respondiera en IE, así que usé un temporizador como se sugiere. El código se ve algo así ( $(#contentColumn) es el div en el que se encuentra JQGrid):

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

var resizeTimer;

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

Answer 8

Si tu:

• have shrinkToFit: false (columnas de ancho fijo medio)
• tener autowidth: true
• no me importa la altura del fluido
• tener barra de desplazamiento horizontal

Puede hacer una cuadrícula con ancho de fluido con los siguientes estilos:

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

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

Aquí hay una demostración

Answer 9

Tomando prestado del código en su enlace puede intentar algo como esto:

$(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 esta forma, enlazará directamente al evento window.onresize, que realmente se parece a lo que quiere de su pregunta.

Si su cuadrícula está configurada en un ancho del 100%, se expandirá automáticamente cuando su contenedor se expanda, a menos que existan algunas complejidades en el complemento que está utilizando y que desconozco.

Answer 10

esto parece estar funcionando bien para mí

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

Answer 11

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

Answer 12

autowidth: true

funcionó perfectamente para mí aprendí de here