jqGrid GridUnload / GridDestroy

quand j'utilise $('#mygrid').jqGrid('GridUnload'); ma grille est détruite: pas de pageur/ pas d'en-tête.

dans un wiki j'ai trouvé:

la seule différence par rapport à la méthode précédente est que la grille est détruite, mais le l'élément de table et le pager (le cas échéant) sont laissés prêts à être utilisés à nouveau.

Je ne trouve aucune différence entre GridUnload/ GridDestroy ou est-ce que je fais quelque chose de mal?

j'utilise jqGrid 3.8.

23
demandé sur Joel 2011-02-07 13:42:44

3 réponses

pour pouvoir créer jqGrid sur la page, vous devez insérer un élément vide <table> sur le lieu de la page où vous voulez voir la grille. L'exemple le plus simple de l'élément de table est <table id="mygrid"></table> .

l'élément vide <table> lui-même sera pas vu sur la page jusqu'à ce que vous appeliez $('#mygrid').jqGrid({...}) et les éléments de grille comme les en-têtes de colonne seront créés.

La méthode GridDestroy fonctionne comme jQuery.supprimer . supprime tous les éléments qui appartiennent à la grille inclusve le <table> élément.

La méthode GridUnload , d'autre part de supprimer tous les, mais le vide <table> élément de rester sur la page . Vous êtes donc en mesure de créer une nouvelle grille au même endroit. La méthode GridUnload est très utile si vous avez besoin de créer sur un endroit des grilles différentes dépendent à des conditions différentes. Regardez l'ancienne réponse avec la démo . La démo montre comment deux grilles différentes peuvent être créées dynamiquement au même endroit. Si vous remplacez GridUnload dans le code par GridDestroy , la démo ne fonctionnera pas: après destruction de la première grille, aucune autre grille ne sera créée au même endroit.

58
répondu Oleg 2017-05-23 12:18:16

en plus de la réponse D'Oleg, je voudrais souligner que GridUnload fait un peu plus que supprimer la grille de la table. Il supprime l'élément original de la table HTML (et le pager), et annonce un identique à sa place(au moins dans 4.5.4 il fait).

cela signifie que si vous avez attaché des gestionnaires d'événements à l'élément HTML de la table(I. e avec jquery on, like ('#gridID').sur('event','selector',gestionnaire)), ils seront également supprimées. Consiquently les événements ne tirera pas sur la nouvelle grille si vous remplacez l'ancienne grille par une nouvelle...

7
répondu Fazi 2013-10-25 07:34:40

la réponse d'Oleg fonctionne bien pour moi tant que je n'ai pas de groupe headers.

quand j'ajoute la ligne d'en-tête de groupe avec 'setGroupHeaders '

les résultats d'une 'GridUnload' suivi par un $('#mygrid').jqGrid ({...}) ne sont pas cohérentes.

il fonctionne bien dans le Chrome, mais pas dans le IE11.

Dans IE11, chaque 'jqg-troisième-ligne d'en-tête' l'article se termine rendus sur des lignes différentes (en diagonale).

j'utilise free-jqGrid:query.jqgrid.src.js version 4.13.4 pour le débogage. J'ai tracé le problème jusqu'au code, dans ce fichier, qui commence par la ligne 9936: 

if (o.useColSpanStyle) {
    // Increase the height of resizing span of visible headers
    $htable.find("span.ui-jqgrid-resize").each(function () {
        var $parent = $(this).parent();
        if ($parent.is(":visible")) {
            this.style.cssText = "height:" + $parent.height() + "px !important; cursor:col-resize;";
            //this.style.cssText = "height:" + $parent.css('line-height'); + "px !important;cursor:col-resize;";
        }
    });
    // Set position of the sortable div (the main lable)
    // with the column header text to the middle of the cell.
    // One should not do this for hidden headers.
    $htable.find(".ui-th-column>div").each(function () {
        var $ts = $(this), $parent = $ts.parent();
        if ($parent.is(":visible") && $parent.is(":has(span.ui-jqgrid-resize)") && !($ts.hasClass("ui-jqgrid-rotate") || $ts.hasClass("ui-jqgrid-rotateOldIE"))) {
            // !!! it seems be wrong now
            $ts.css("top", ($parent.height() - $ts.outerHeight(true)) / 2 + "px");
            // $ts.css("top", ($parent.css('line-height') - $ts.css('line-height')) / 2 + "px");
        }
     });
}
$(ts).triggerHandler("jqGridAfterSetGroupHeaders");
});

ce code définit la hauteur et les valeurs css supérieures de chaque élément "jqg-third-row-header". Cela conduit à une disposition haute et diagonale du "JQG-third-row-header"

Bug Potentiel: .

L' $parent.hauteur() et $ts.hauteur() les méthodes ci-dessus, le retour de l'ancien jqGrid hauteur de la table dans IE11. Dans Chrome, ils renvoient la hauteur " th " calculée(top = 0). J'ai ajouté et testé les 2 lignes commentées qui utilisent line-height. IE11 fonctionne bien lorsque ligne-hauteur est utilisé. Je ne comprends pas complètement la logique de jqGrid resize, donc ce n'est peut-être pas une solution.

Autre Solution:

si vous spécifiez. 

 colModel: 
     {
     label: 'D',
     name: 'W',
     width: 6,
     align: 'center',
     resizable:false  //required for IE11 multiple calls to this init()
     },

lorsque resizable est false le code ci-dessus n'est pas rencontré et la hauteur et le dessus ne sont pas définis.

Le jqGrid d'Oleg est un très bon contrôle. Peut-être pourra-t-il tester sa grille de démonstration avec un groupheader sur IE11.

1
répondu jiminka 2016-07-30 00:32:50