81
Używam tego w środowisku produkcyjnym już od jakiegoś czasu bez żadnych skarg (może wymagać pewnych poprawek, aby wyglądać bezpośrednio na Twojej witrynie ... na przykład odejmowanie szerokości paska bocznego itp.)
$(window).bind('resize', function() {
$("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');
W następstwie:
Poprzedni kod pokazany w tym poście został ostatecznie porzucony, ponieważ był zawodny. Teraz używam następującej funkcji API do zmiany rozmiaru siatki, zgodnie z zaleceniami w dokumentacji jqGrid:
jQuery("#targetGrid").setGridWidth(width);
Aby dokonać faktycznej zmiany rozmiaru, funkcja implementująca następującą logikę jest powiązana ze zdarzeniem resize okna:
Oblicz szerokość siatki, używając parametru clientWidth jej elementu nadrzędnego i (jeśli nie jest dostępny) atrybutu offsetWidth.
Przeprowadź kontrolę poprawności, aby upewnić się, że szerokość zmieniła się o więcej niż x pikseli (aby obejść niektóre problemy specyficzne dla aplikacji)
Na koniec użyj setGridWidth (), aby zmienić szerokość siatki
Oto przykładowy kod do obsługi zmiany rozmiaru:
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');
I przykładowe znaczniki:
<div id="grid_container"> <table id="grid"></table> <div id="grid_pgr"></div> </div>
źródło
Automatyczna zmiana rozmiaru:
Dla 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); }); }
W przypadku 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); }); } }
źródło
$(this).setGridWidth(gridParentWidth, true);
wydaje mi się, że dobrze mi to działa
$(window).bind('resize', function() { jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true); }).trigger('resize');
źródło
Używam 960.gs do układu, więc moje rozwiązanie jest następujące:
$(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" } });
// Inne siatki zdefiniowane poniżej ...
źródło
Jeśli ty:
shrinkToFit: false
(średnie kolumny o stałej szerokości)autowidth: true
Możesz utworzyć siatkę o płynnej szerokości za pomocą następujących stylów:
.ui-jqgrid { max-width: 100% !important; width: auto !important; } .ui-jqgrid-view, .ui-jqgrid-hdiv, .ui-jqgrid-bdiv { width: auto !important; }
Oto demo
źródło
Pożyczając z kodu pod twoim linkiem możesz spróbować czegoś takiego:
$(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%'); }); });
W ten sposób wiążesz się bezpośrednio ze zdarzeniem window.onresize, które w rzeczywistości wygląda tak, jak chcesz od swojego pytania.
Jeśli twoja siatka jest ustawiona na 100% szerokości, powinna automatycznie rozszerzać się, gdy jej kontener się rozszerza, chyba że wtyczka, której używasz, zawiera pewne zawiłości, o których nie wiem.
źródło
Główna odpowiedź zadziałała dla mnie, ale sprawiła, że aplikacja bardzo nie reagowała w IE, więc zgodnie z sugestią użyłem timera. Kod wygląda mniej więcej tak (
$(#contentColumn)
to div, w którym znajduje się JQGrid):function resizeGrids() { var reportObjectsGrid = $("#ReportObjectsGrid"); reportObjectsGrid.setGridWidth($("#contentColumn").width()); }; var resizeTimer; $(window).bind('resize', function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeGrids, 60); });
źródło
Witajcie entuzjaści przepełnienia stosu. Podobało mi się większość odpowiedzi, a nawet zagłosowałem za parę, ale żadna z nich nie działała dla mnie w IE 8 z jakiegoś dziwnego powodu ... Jednak natknąłem się na te linki ... Ten facet napisał bibliotekę, która wydaje się praca. Uwzględnij to w swoich projektach w adittion do jquery UI, wrzuć nazwę swojej tabeli i 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
źródło
autowidth: true
działało idealnie dla mnie. dowiedziałem się stąd .
źródło
autowidth
działa dobrze, gdy siatka jest ładowana po raz pierwszy, ale nie zmienia rozmiaru siatki po zmianie rozmiaru przeglądarki. Jak poradziłeś sobie z tym problemem, czy nie jest to dla ciebie wymaganie?To działa..
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? });
źródło
<script> $(document).ready(function(){ $(window).on('resize', function() { jQuery("#grid").setGridWidth($('#fill').width(), false); jQuery("#grid").setGridHeight($('#fill').height(),true); }).trigger('resize'); }); </script>
źródło