Zmienić rozmiar jqGrid po zmianie rozmiaru przeglądarki?

81

Czy istnieje sposób na zmianę rozmiaru jqGrid po zmianie rozmiaru okna przeglądarki? Wypróbowałem opisaną tutaj metodę , ale ta technika nie działa w IE7.

Justin Ethier
źródło

Odpowiedzi:

69

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');
Stephen Fuhry
źródło
Również bardzo przydatne w tej sytuacji: Drugi parametr setGridWidth to „shrink”. stackoverflow.com/questions/7745009/…
Jim,
Stephen, czy widziałeś rozwiązanie jmav? Wydaje się, że jest to najlepsze, ale chciałem zobaczyć, jak
zestawiłeś
53

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>
Justin Ethier
źródło
2
Jeśli potrzebujesz obsługi IE, możesz chcieć ograniczyć częstotliwość zmiany rozmiaru za pomocą timerów.
fforw
Możesz rozwinąć temat? Miałem problemy z IE, gdy zdarzenie resize zostało wywołane bez zmiany szerokości siatki, co doprowadziło do dziwnego zachowania samej siatki. Dlatego kod uwzględnia próg w kroku 2.
Justin Ethier
Co jeśli chcę zmienić css dla formy dodawania / edycji jqgrid?
Bhavik Ambani
36

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);
                });
            }
        }
jmav
źródło
Cóż, mogę potwierdzić, że powyższa wersja 3.5+ działa świetnie z jqGrid 4.4.1 na IE9, ale z FireFox 16 i 17 tabela powiększa się nieco za każdym razem, gdy dostosowuję szerokość przeglądarki.
MattSlay,
Może masz problemy z granicami zdefiniowanymi w css - ja tak.
jmav
Prawdopodobnie będziesz chciał przekazać true jako drugi parametr w wywołaniu setGridWidth () w ostatnich wersjach jqGrid. Jeśli tego nie zrobisz, rozmiar kolumn w tabeli nie zostanie zmieniony po zmianie rozmiaru tabeli. tj.$(this).setGridWidth(gridParentWidth, true);
Josh Schumacher,
8

wydaje mi się, że dobrze mi to działa

$(window).bind('resize', function() {
    jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');
Darren Cato
źródło
Dzięki za rozwiązanie, ale nie działało poprawnie, tak jak zmienia cały div, ale nie stosuje się do nagłówka. :(
Vikas Gupta
Dlaczego w twoim przykładzie jest -30?
Vasil Popov
Nie jestem pewny. To było 5 lat temu :(
Darren Cato
7

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

Sultan Shakir
źródło
5

Jeśli ty:

  • mieć shrinkToFit: false(średnie kolumny o stałej szerokości)
  • mieć autowidth: true
  • nie dbam o wysokość płynu
  • mają poziomy pasek przewijania

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

Chintsu
źródło
4

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.

Dave L.
źródło
Dzięki za wskazówkę! Okazuje się, że wywoływałem kod resize ze zdarzenia GridComplete - z jakiegoś powodu nie działa to w IE. W każdym razie wyodrębniłem kod zmiany rozmiaru do oddzielnej funkcji i wywołałem go zarówno w funkcji zmiany rozmiaru, jak i po utworzeniu siatki. Dzięki jeszcze raz!
Justin Ethier
To nie działa podczas zmiany rozmiaru okna w IE 8, jak sądzę. Dzieje się tak jednak po odświeżeniu strony.
SoftwareSavant
3

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);
});
Woggles
źródło
Wydaje się, że byłoby trudne, aby zegar działał poprawnie. Czy możesz spojrzeć na moją zaktualizowaną odpowiedź i sprawdzić, czy nadal potrzebujesz timera?
Justin Ethier,
1
Właśnie porównałem wszystkie 3 z nich. Twoje jest zdecydowanie lepszym rozwiązaniem w stosunku do rozwiązania Stephens, ale zmiana rozmiaru okna jest nadal dość nierówna. Dzięki licznikowi czasu zmiana rozmiaru jest płynna, dopóki zdarzenie nie zostanie uruchomione, więc uzyskanie prawidłowego czasu trwania wyzwalacza czasowego zajmuje trochę czasu. Stoper jest trochę niezdarny, ale myślę, że na końcu daje najlepsze rezultaty.
wogles
edycja: Stephens sln działa dobrze na innej mojej stronie ... ta strona zaczęła się męczyć dopiero po dodaniu do niej kilku innych kontrolek jQueryUI.
wogles
To bardzo głupie pytanie. Ale w Jquery jestem kompletnym NOOB-em, więc proszę o wybaczenie, ale gdzie umieścimy te wszystkie funkcje? Wewnątrz Jquery (dokument) .ready (function () {} czy też go wystawiamy? Zastanawiam się też, skąd pochodzi $ (okno) i szerokość?
SoftwareSavant
@DmainEvent, umieściłem $ (window) .bind w $ (Document) .ready, a funkcje reszieTimer var i resizeGrids poza $ (Document) .ready. $ (window) to element okna wbudowany w jquery, a .width () to funkcja jquery, która oblicza szerokość elementu
woggles
3

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

SoftwareSavant
źródło
Dostaję też dziwne zachowanie w IE8 z widokiem zgodności i bez: / Moja siatka
zmienia
1
autowidth: true

działało idealnie dla mnie. dowiedziałem się stąd .

rozumieć
źródło
2
autowidthdział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?
Justin Ethier
@Justin Ethier: masz rację. Chciałem, aby ustawiał się przy pierwszym ładowaniu siatki, a nie przy zmianie rozmiaru przeglądarki. Przepraszam, że źle przeczytałem pytanie. Rozumiem głosowanie w dół.
rozumiem
1

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?
});
Erik
źródło
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
źródło