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

Respuestas:

69

He estado usando esto en producción durante algún tiempo sin ninguna queja (puede ser necesario realizar algunos ajustes para verse bien en su sitio ... por ejemplo, restar el ancho de una barra lateral, etc.)

$(window).bind('resize', function() {
    $("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');
Stephen Fuhry
fuente
También es muy útil en esta situación: el segundo parámetro para setGridWidth es 'encoger'. stackoverflow.com/questions/7745009/…
Jim
Stephen, ¿viste la solución de jmav? Este parece el mejor, pero quería ver cómo lo contrastaba con este enfoque
IcedDante
53

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 de API para cambiar el tamaño de la cuadrícula, 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 cuadrícula usando el clientWidth de su padre y (si no está disponible) su atributo offsetWidth.

  • Realice una verificació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 cuadrícula

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 marcado de ejemplo:

<div id="grid_container">
    <table id="grid"></table>
    <div id="grid_pgr"></div>
</div>
Justin Ethier
fuente
2
Si necesita admitir IE, es posible que desee reducir la frecuencia de cambio de tamaño a través de temporizadores.
para el
¿Cuidado para elaborar? Tuve problemas en IE cuando se llamó al evento de cambio de tamaño sin que la cuadrícula cambiara el ancho, lo que provocó un comportamiento extraño en la cuadrícula. Es por eso que el código tiene en cuenta un umbral en el paso 2.
Justin Ethier
¿Qué pasa si quiero cambiar el CSS para agregar / editar formulario de jqgrid?
Bhavik Ambani
36

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);
                });
            }
        }
jmav
fuente
Bueno, puedo confirmar que la versión 3.5+ anterior funciona muy bien con jqGrid 4.4.1 en IE9, pero con FireFox 16 y 17, la tabla sigue creciendo un poco más cada vez que ajusto el ancho del navegador.
MattSlay
Tal vez tengas problemas con las fronteras, definidas en css, yo lo hice.
jmav
Probablemente querrá pasar verdadero como segundo parámetro en su llamada setGridWidth () en versiones recientes de jqGrid. Si no lo hace, las columnas de su tabla no se redimensionan cuando la tabla cambia de tamaño. ie$(this).setGridWidth(gridParentWidth, true);
Josh Schumacher
8

esto parece estar funcionando bien para mí

$(window).bind('resize', function() {
    jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');
Darren Cato
fuente
Gracias por la solución, pero no funcionó correctamente, como si cambiara todo div, pero no solicite el encabezado. :(
Vikas Gupta
¿Por qué hay -30 en tu ejemplo?
Vasil Popov
no estoy seguro. Fue hace 5 años :(
Darren Cato
7

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

Sultán Shakir
fuente
5

Si tu:

  • tener 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 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

Chintsu
fuente
4

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 manera, se vincula directamente al evento window.onresize, que en realidad se parece a lo que desea de su pregunta.

Si su cuadrícula está configurada al 100% de ancho, debería expandirse automáticamente cuando su contenedor se expanda, a menos que haya algunas complejidades en el complemento que está utilizando que no conozco.

Dave L
fuente
¡Gracias por el consejo! Resulta que estaba llamando al código de cambio de tamaño desde el evento GridComplete, por alguna razón, esto no funciona en IE. De todos modos, extraje el código de cambio de tamaño en una función separada y lo llamo tanto en la función de cambio de tamaño como después de que se crea la cuadrícula. ¡Gracias de nuevo!
Justin Ethier
Esto no funciona al cambiar el tamaño de una ventana en IE 8, creo. Sin embargo, lo hace cuando actualiza la página.
SoftwareSavant
3

La respuesta principal funcionó para mí, pero hizo que la aplicación no respondiera en IE, así que usé un temporizador como se sugirió. El código se parece a esto ( $(#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);
});
woggles
fuente
Parece que sería complicado hacer que el temporizador funcione correctamente. ¿Puedes echar un vistazo a mi respuesta actualizada y ver si todavía necesitas el temporizador?
Justin Ethier
1
Solo comparé los 3. La suya es definitivamente una mejora sobre la solución de Stephens, pero el cambio de tamaño de la ventana sigue siendo bastante irregular. Con el temporizador, el cambio de tamaño es suave hasta que se activa el evento, por lo que se necesita un poco de manipulación para obtener la duración correcta del disparo. El temporizador es un poco torpe, pero creo que al final da los mejores resultados.
woggles
editar: Stephens sln funciona bien en otra página mía ... esta página solo comenzó a tener problemas una vez que le agregué un montón de otros controles jQueryUI.
woggles
Esta es una pregunta muy tonta. Pero soy un NOOB completo en Jquery, así que por favor, perdóneme, pero ¿dónde estamos colocando todas estas funciones? Dentro de Jquery (documento) .ready (function () {} o lo estamos pegando? Solo me pregunto, también, ¿de dónde vienen $ (window) y el ancho?
SoftwareSavant
@DmainEvent, puse $ (window) .bind en $ (Document) .ready, y reszieTimer var y resizeGrids funcionan fuera de $ (Document) .ready. $ (ventana) es el elemento de ventana que está integrado en jquery y .width () es una función de jquery que calcula el ancho de un elemento
woggles
3

Hola, entusiastas del desbordamiento de Stack. Disfruté la mayoría de las respuestas, e incluso voté a favor de un par, 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úyelo en tus proyectos además de jquery UI, agrega el nombre de tu 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

SoftwareSavant
fuente
También estoy obteniendo un comportamiento extraño en IE8 con y sin vista de compatibilidad: / Mi cuadrícula está cambiando a la mitad del tamaño que debería tener ... gracias por los enlaces
woggles
1
autowidth: true

funcionó perfectamente para mí. aprendido de aquí .

subestimar
fuente
2
autowidthfunciona bien cuando la cuadrícula se carga por primera vez, pero no cambiará el tamaño de la cuadrícula cuando se cambie el tamaño del navegador. ¿Cómo resolvió ese problema o no es un requisito para usted?
Justin Ethier
@Justin Ethier: tienes razón. Quería que se estableciera cuando la cuadrícula se carga por primera vez, no cuando se cambia el tamaño del navegador. Lo siento, leí mal la pregunta. Entiendo el voto negativo.
understack
1

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?
});
Erik
fuente
0
<script>
$(document).ready(function(){    
$(window).on('resize', function() {
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize');      
});
</script>
Minimax
fuente