web-dev-qa-db-fra.com

jqGrid GridUnload / GridDestroy

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

Dans un wiki, j'ai trouvé:

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

Je ne trouve aucune différence entre GridUnload/GridDestroy ou ai-je un problème?

J'utilise jqGrid 3.8.

javascriptjqgrid
24
Scharlotte

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

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

La méthode GridDestroy fonctionne comme jQuery.remove . Il supprime tous les éléments qui appartiennent à la grille inclus le <table>.

En revanche, la méthode GridUnload supprime tout, mais l'élément vide <table> Reste sur la page . Vous pouvez donc créer une nouvelle grille au même endroit. La méthode GridUnload est très utile si vous avez besoin de créer en un seul endroit différentes grilles dépendent de 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 voulez simplement remplacer GridUnload dans le code par GridDestroy la démo ne fonctionnera pas: après la destruction de la première grille, aucune autre grille ne sera créée au même endroit.

58
Oleg

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

Cela signifie que si vous avez attaché certains gestionnaires d'événements à l'élément HTML de la table (c'est-à-dire avec jquery on, comme ('#gridID'). On ('event', 'selector', handler)) ils seront également supprimés. Conséquemment, les événements ne se déclencheront pas sur la nouvelle grille si vous remplacez l'ancienne grille par une nouvelle ...

7
Fazi

La réponse d'Oleg fonctionne bien pour moi tant que je n'ai pas d'en-tête de groupe.

Lorsque j'ajoute une ligne d'en-tête de groupe avec 'setGroupHeaders'

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

Cela fonctionne très bien dans Chrome mais pas dans IE11.

Dans IE11, chaque 'jqg-troisième-ligne-en-tête' se retrouve rendu sur différentes lignes (en diagonale).

J'utilise free-jqGrid: query.jqgrid.src.js version 4.13.4 pour le débogage. J'ai retracé 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 associées à chaque élément "jqg-troisième-ligne-en-tête". Cela conduit à une disposition haute et diagonale de l'en-tête "jqg-troisième rangée"
Bug potentiel:.

Les méthodes $ parent.height () et $ ts.height () ci-dessus renvoient l'ancienne hauteur de la table jqGrid dans IE11. Dans Chrome ils renvoient la 'th' hauteur calculée (top = 0). J'ai ajouté et testé les 2 lignes commentées qui utilisent la hauteur de ligne. IE11 fonctionne très bien lorsque la hauteur de ligne est utilisée. I ne comprennent pas complètement la logique de redimensionnement de JqGrid, donc ce n'est peut-être pas un correctif.
Solution alternative:

Si vous spécifiez.

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

Lorsque redimensionnable est faux, le code ci-dessus n'est pas rencontré et la hauteur et le haut ne sont pas définis.
Le jqGrid d'Oleg est un très joli contrôle. Peut-être qu'il peut tester sa grille de démonstration avec un en-tête de groupe sur IE11.

1
jiminka