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

Question

¿Hay alguna manera de cambiar el tamaño de un jqGrid cuando se cambia el 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

Como seguimiento:

El código anterior se muestra en este post fue abandonado porque era poco fiable. Ahora estoy usando la siguiente función API para cambiar el tamaño de la red, como se recomienda en la documentación jqGrid:

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

para hacer el cambio de tamaño, una función de la aplicación de la siguiente lógica está obligado a evento de cambio de tamaño de la ventana:

• Calcule el ancho de la cuadrícula utilizando clientWidth de sus padres y (si no está disponible) su atributo offsetWidth.

• hacer una simple comprobación para asegurarse de que la anchura ha cambiado más de x píxeles (para evitar algunos problemas específicos de la aplicación)

• Por último, utilizar setGridWidth() para cambiar el ancho de la red

Aquí es código de ejemplo para cambiar el tamaño de la manija:

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

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

Answer 2

Inspirándose en el código en su enlace podría 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 usted está uniéndose directamente al evento window.onresize, que en realidad 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 se expanda su contenedor, a menos que existan algunas complejidades en el complemento que está utilizando que desconozco.

Answer 3

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 4

estado usando este en producción durante algún tiempo sin ningún tipo de quejas (Puede tomar algunas modificaciones para que se vea bien en su sitio ... por ejemplo, restando el ancho de una barra lateral, etc.)

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

Answer 5

esto parece estar funcionando muy bien para mí

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

Answer 6

estoy usando 960.gs para la disposición así 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 redes definen a continuación. ..

Answer 7

autowidth: true 

funcionó perfectamente para mí. aprendido de here.

Answer 8

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

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

var resizeTimer; 

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

Answer 9

entusiastas de desbordamiento de pila Hola. Disfruté de la mayoría de las respuestas, e incluso voté como 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 10

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

Answer 11

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 12

Prueba esto:

width: null 
shrinkToFit: true 

Answer 13

Si:

• tener shrinkToFit: false (media columnas de ancho fijo)
• tienen autowidth: true
• no se preocupan por la altura de líquido
• tienen barra de desplazamiento horizontal

Usted puede hacer la red con ancho de fluido con siguientes estilos :

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

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

Here is a demo