¿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.¿Cambia el tamaño de jqGrid cuando se cambia el tamaño del navegador?
Respuesta
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>
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.
¡Gracias por el consejo! Resulta que estaba llamando al código de cambio de tamaño del evento GridComplete, por cualquier 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 grilla. ¡Gracias de nuevo! –
Esto no funciona al cambiar el tamaño de una ventana en IE 8, creo. Lo hace cuando refrescas la página. – SoftwareSavant
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);
});
}
}
+1 brillante solución. – Peymankh
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: lo hice. – jmav
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');
También es muy útil en esta situación: el segundo parámetro para setGridWidth es 'shrink'. http://stackoverflow.com/questions/7745009/in-jqgrid-is-it-possible-to-resize-columns-to-fit-the-table-width-original-wid – Jim
Stephen, ¿viste la solución de jmav? Este parece ser el mejor, pero quería ver cómo lo contrastaba con este enfoque. – IcedDante
esto parece estar funcionando muy bien para mí
$(window).bind('resize', function() {
jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');
Gracias por la solución, pero no funcionaba correctamente, como si cambiara todo el div, pero no se aplica al encabezado. :( –
¿Por qué hay -30 en su ejemplo? –
No fue seguro. Fue hace 5 años :( –
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. ..
Cosas encantadoras .... –
Gracias Fergal. –
excelente solución, ¡gracias! –
autowidth: true
funcionó perfectamente para mí. aprendido de here.
'autowidth' funciona bien cuando la red se carga por primera vez, pero no cambiará el tamaño de la red cuando se cambia el tamaño del navegador. ¿Cómo resolvió ese problema, o no es un requisito para usted? –
@Justin Ethier: usted es Derecha. Quería que se configurara cuando la grilla se carga por primera vez, no cuando el navegador cambia de tamaño. Perdón, malinterpreté la pregunta. Entiendo por el voto negativo – understack
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);
});
Parece que sería complicado hacer que el cronómetro funcione correctamente. un vistazo a mi respuesta actualizada y vea si todavía necesita el temporizador? –
Simplemente comparé los 3 de ellos. s definitivamente una mejora sobre la solución de Stephens, pero el cambio de tamaño de la ventana sigue siendo bastante desigual. Con el temporizador, el cambio de tamaño es suave hasta que el evento se dispara, por lo que se necesita un poco de manipulación para que la duración del disparo de sincronización sea correcta. El temporizador es un poco torpe, pero creo que da los mejores resultados al final. – woggles
editar: Stephens sln funciona bien en otra página mía ... esta página solo comenzó a tener problemas una vez que agregué muchos otros controles jQueryUI a ella. – woggles
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
También estoy obteniendo un comportamiento extraño en IE8 con y sin vista de compatibilidad:/Mi cuadrícula se está cambiando a la mitad del tamaño que debería ser ... gracias por los enlaces – woggles
<script>
$(document).ready(function(){
$(window).on('resize', function() {
jQuery("#grid").setGridWidth($('#fill').width(), false);
jQuery("#grid").setGridHeight($('#fill').height(),true);
}).trigger('resize');
});
</script>
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?
});
Prueba esto:
width: null
shrinkToFit: true
que solo maneja la carga inicial de la grilla, no el cambio de tamaño del navegador –
@Justin Ethier en realidad maneja el cambio de tamaño perfectamente bien – Mindless
¿Tiene una demostración, como un jsfiddle, que dem ¿Lo hace funcionar? –
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;
}
- 1. ¿Cómo cambiar el tamaño de un applet de Java cuando se cambia el tamaño del navegador?
- 2. ¿Cambia el tamaño de jqGrid según el número de filas?
- 3. ¿Cómo cambiar automáticamente el tamaño de la cuadrícula cuando se cambia el tamaño del formulario?
- 4. ¿Cómo evito que las capas div se superpongan cuando se cambia el tamaño del navegador?
- 5. ¿Girar también cambia el tamaño?
- 6. ¿Cómo se cambia el tamaño del cuadro de diálogo Editar de JQGrid?
- 7. jQuery height() no cambia el tamaño
- 8. Tamaño de fuente que se expande cuando cambia el tamaño de la ventana
- 9. el tamaño del marco no cambia en el modo horizontal
- 10. El tamaño del marco de UIWebView no cambia el tamaño del contenido interno
- 11. Android Browser cambia el tamaño del texto automáticamente
- 12. Cambiar el tamaño del widget Tkinter Listbox cuando la ventana cambia de tamaño
- 13. La vista de desplazamiento no cambia de tamaño cuando cambia el contenido de la vista infantil
- 14. MPVolumeView cambia el tamaño del icono de Airplay
- 15. UIButton cambia el tamaño cuando cambio la fuente?
- 16. JQUERY UI Accordion ¿Cambia el tamaño del tamaño de la ventana?
- 17. ¿Cómo implementar una página web que se escala cuando se cambia el tamaño de la ventana del navegador?
- 18. detectar el tamaño de fuente del navegador
- 19. ¿Cómo se cambia el tamaño de un ImageView?
- 20. Java JTextArea que cambia el tamaño y se desplaza automáticamente
- 21. ¿Por qué cambia el tamaño del marco de Tkinter cuando se agrega un cuadro de texto?
- 22. ¿Cambia el tamaño del texto de una etiqueta cuando el texto es más largo que el tamaño de la etiqueta?
- 23. Bootstrap Modal Cambia el tamaño en el cambio de contenido
- 24. Evento para cuando el usuario cambia las pestañas del navegador
- 25. Java (Swing): encontrar el * tamaño * de pantalla * de un componente cuando se cambia el tamaño de la ventana
- 26. FlowLayout de Java no cambia el tamaño correctamente
- 27. ExtJS: Cambia automáticamente el tamaño de los campos de formulario en el tamaño de la ventana
- 28. Android ¿Cambia el tamaño de la imagen según el tamaño de pantalla?
- 29. El tamaño de fuente CSS cambia cuando la familia de fuentes retrocede
- 30. ¿Cambia el tamaño de la matriz al GC?
Si necesita soportar IE, es posible que desee reducir la frecuencia del cambio de tamaño mediante temporizadores. – fforw
¿Cuidar para elaborar? Tuve problemas en IE cuando se llamó al evento de cambio de tamaño sin el ancho de cambio de cuadrícula, lo que generó un comportamiento extraño en la cuadrícula. Es por eso que el código tiene en cuenta un umbral en el paso 2. –
¿Puedes compartir el código que usaste por favor? – leora