La variable rowheight est-elle une possibilité dans SlickGrid?

C'est possible mais ce n'est pas trivial et vous prendrez probablement une pénalité de performance. Le fonctionnement de SlickGrid nécessite de pouvoir répondre rapidement aux deux questions suivantes:

• pour une rangée x donnée, quel est le décalage supérieur de cette rangée?
• pour un offset Y donné, quelle ligne est à cet offset?

lorsque vous utilisez une hauteur de rangée statique, répondre à ces questions est trivial; cependant, avec la hauteur de rangée dynamique, vous aurez besoin de maintenir un couple des structures de données supplémentaires.

voici à peu près ce que j'ai changé dans Slick.Grille.js

• Ajouter un nouveau tableau pour suivre les tailles de lignes. Initialiser toutes les lignes à la taille par défaut
• supprimer les règles CSS dans createCssRules qui fixent la hauteur de la cellule
• ajouter du code à la fin des renderRows qui vérifie la hauteur rendue de chaque cellule dans la rangée et fixe ensuite la hauteur de toutes les cellules au maximum (et stocke la hauteur dans le tableau de la taille de la rangée). Vous aussi besoin d'ajuster le haut de décalage basé sur la somme des hauteurs des lignes au-dessus de l'actuel.
• ajouter du code à la fin du rendu pour redimensionner la toile à la somme de toutes les hauteurs de lignes.
• mise à jour de getViewport pour retourner les lignes du haut et du bas en fonction de la somme des hauteurs des lignes.
• il y a une poignée d'autres endroits où les options.rowHeight est utilisé. Vous pouvez ignorer certains d'entre eux, mais au moins, partout où la toile est redimensionnée doit être modifié.

pour rendre cela pratique (performant), vous aurez également besoin d'un cache des offsets de row top (un cache de sommes de la taille de la rangée). Cela permettra un calcul rapide pour la première question et permettra une recherche binaire pour répondre à la seconde.

j'espère que ça aide.

j'ai mis cela en œuvre dans mon projet, avec l'aide de la réponse de @Stephen Robinson ici.

Si quelqu'un est intéressé, ils peuvent vérifier:

https://github.com/vihari/Seaview/blob/version3.0/SlickGrid-master/slick.grid.js.

Il peut être activé avec le fichier ci-dessus si vous définissez des options.enableWrap de vrai.

Remercier.

je sais que cela ne répond pas au cœur de la question, mais a décidé sur une solution simple pour l'instant qui est un effort minimal et répond à mes exigences en ce moment. Donc, c'est juste au cas où d'autres étaient à la recherche d'une solution simple.

j'ai commencé avec une boîte de saisie, où changer la valeur redimensionnerait la ligne. Cependant, j'ai maintenant établi à l'aide du curseur. En fait, puisque j'ai si peu de données dans ma grille (garantie d'être de petites quantités de données, et très peu rows), je redimensionne dynamiquement la grille au fur et à mesure que le curseur glisse. Maintenant, je sais que beaucoup diront que c'est une idée terrible parce que ça peut être horriblement lent, mais encore une fois, j'utilise une très petite quantité de données.

la clé est que je recrée à nouveau la grille avec la nouvelle valeur rowHeight définie dans les options.

1. Include jQuery UI:
2. Créer des éléments pour le curseur et la valeur
3. assurez-vous que votre grille est défini et initialisé lorsque la page charge.

4. ajouter le code pour manipuler le curseur et recréer la grille (alternativement, vous pourriez déplacer ce que j'ai dans la fonction "slide" à la fonction "stop" si vous ne voulez pas redessiner sur chaque touche de glissement):

   $j( "#resizeRowSlider" ).slider({
         range:"min"
       , min: 50
       , max: 200
       , value: 50
       , create: function( even, ui ) {
           $j("rowResizeValue").html( "50" );
       }
       , slide: function( event, ui ) {
           $j( "rowResizeValue" ).html( ui.value );
   
           options.rowHeight = ui.value;
   
           // I do a manual resize; you could use autoHeight:true in grid options
           resizeGrid();
   
           grid = new Slick.Grid("#" + gridElemId, json, columns , options);
           grid.setSelectionModel(new Slick.RowSelectionModel() );
   
           refreshGrid(); // Handle invalidate, resizeCanvas
       }
       , stop: function( event, ui ) {
       }
   });
   

je dois aussi noter que ce n'est pas sur une base par ligne, mais encore une fois, il répond à mes besoins pour l'instant. Ce n'est pas idéal, mais ça fonctionne. En outre, si vous avez vraiment besoin de rendre la grille la première fois sans débordement, vous pouvez créez un div caché chaque fois que vous obtenez le texte en question et ajoutez display:table-cell, puis obtenir la hauteur div et définir cette valeur les options de grille pour rowHeight. Ensuite, créez (ou recréez) la grille.

simple et simple, ceci n'est pas supporté dans SlickGrid et ne le sera probablement jamais. Désolé.

il y a aussi l'implémentation de hauteur variable par JLynch7 sur github:

https://github.com/JLynch7/SlickGrid/tree/variableRowHeight

autant je comprends la hauteur est définie par l'utilisateur et ne sont pas automatiquement calculés en fonction du contenu de la rangée de cellules (j'ai seulement regardé l'exemple/exemple-variable-ligne-hauteur-dataview.html)

j'ai récemment bifurqué SlickGrid pour ajouter un tas de nouvelles fonctionnalités - y compris les lignes variables (et redimensionnables). Vous pouvez essayer ici: https://github.com/globexdesigns/doby-grid

comme résumé des options ci-dessus aucune d'entre elles n'est officielle, supportée et prête à la production. Même l'option doby-grid (plus supportée) n'est pas encore prête pour la production.

Remarque, il y a aussi des différences entre:

• la hauteur de la rangée peut être changée séparément pour chaque rangée.
• Le texte peut s'enrouler autour de la ligne suivante.
• la hauteur de la rangée peut s'ajuster automatiquement pour s'adapter au contenu.

Étonnamment, avec toutes les variantes de SlickGrid ci-dessus (et beaucoup d'autres bibliothèques de DataGrid), vous pourriez obtenir un ou deux de ce qui précède, mais pas tous les trois.

si vous n'êtes pas si préoccupé par officiel, soutenu et prêt à la production, alors ce sont mes impressions de tester les 3 variantes SlickGrid énumérées ci-dessus:

vue sur la mer

• les utilisateurs signalent des problèmes avec seulement l'affichage blanc, non testé avec les cellules d'édition (avertissement), la pagination peut ne pas fonctionner (avertissement.)
• mon test de la démo a trouvé qu'il enveloppait le texte et modifiait automatiquement la hauteur de la cellule ok, mais a un bug que les lignes/bordures sont désactivées de quelques pixels. Donc peut-être utilisable, mais pas prêt pour la production.
• j'ai essayé de télécharger et de l'utiliser. Il a l'emballage du texte dans les cellules-bon. Son réglage automatique de la hauteur de la cellule est très cassé/incomplet, ce qui rend l'emballage du texte pratiquement inutile (sauf si vous fixez la hauteur de la rangée - pas grand). J'ai en partie réparé l'auto réglage de la hauteur de la cellule, mais un peu plus de travail à faire. Pas une tâche simple. Ne pas travailler hors de la boîte. Certainement pas prêt pour la production.

JLynch7

• aucune démo à exécuter sans téléchargement.
• j'ai essayé de télécharger et de l'utiliser. Il est bogué (j'ai dû le corriger pour le faire fonctionner), ajoute la hauteur de ligne variable, mais ne semble pas envelopper le texte et ne règle pas automatiquement la hauteur de ligne basée sur le texte!. Il n'est pas activement exploité. Et pas très populaire, donc pas très bien pris en charge. Seaview semble être plus avancé, même si sa fonction "auto adjust the row height" est cassée.

doby-grille

• Est en alpha - pas de prêt de production. Semble comme une fourchette considérable - beaucoup de changements.
• j'ai essayé. Commencer est déroutant, mais ça a marché. Il faut bowser et Require JS.
• options.resizableRows est la moitié de ce que nous voulons - vous peut changer manuellement la hauteur des rangées de façon dynamique. Mais il n'y a pas de re-dimensionnement automatique des hauteurs de rang pour s'adapter au contenu!!??!!
• Ce problème déclare que " L'ajout d'une hauteur de rangée vraiment dynamique (qui est affectée par le contenu de la rangée) nous obligera à désactiver un grand nombre des caractéristiques.". Ils offrent quelques solutions possibles, mais un dev déterminé a essayé et a eu beaucoup de mal avec elle. Il aurait pu le faire marcher, ou il aurait pu abandonner. Je ne vais pas le risque il.

Pour Vihari Piratla de la solution - j'ai téléchargé vue sur la mer, a modifié son /SlickGrid-master/exemples/exemple1-simple.html pour ajouter la nouvelle option enableWrap - lors de mon test l'example1-simple.html continue de fonctionner comme prévu lorsque enableWrap est défini à false, mais quand il est défini à true, la grille est vide et n'a pas de contenu. Je me demandais s'il y avait une façon spéciale d'utiliser l'option enableWrap?

Définir cette variable à l'extérieur....

var tableHeight = 0;

avant de créer le slick grid, utilisez les lignes suivantes:

/ 30 px pour chaque ligne, cela couvrira l'en-tête... Vous pouvez ajuster cette valeur pour votre table.

tableHeight = dataTable.length * 30;    

if(tableHeight >  ($(window).height() - 400)){
       $("#myGrid").height($(window).height() - 400);
}else{
       $("#myGrid").height(tableHeight);
}

si l'utilisateur change l'écran lorsque la page est déjà générée, la table sera redimensionnée ci-dessous en fonction de l'écran et du nombre de lignes de données:

    $(window).resize(function() {

    // For grid height
    if(tableHeight >  ($(window).height() - 400)){
        $("#myGrid").height($(window).height() - 400);
    }else{
        $("#myGrid").height(tableHeight);
    }

    // For grid width
    $("#myGrid").width("100%");

    // Resize the grid dynamically. 
    gridName.resizeCanvas();
});

comme non des fourchettes de SlickGrid sont vraiment des options viables à bien des égards, j'ai pensé qu'il serait utile à de nombreux lecteurs de ce post pour discuter des alternatives à SlickGrid.

je considère que les 'alternatives viables' qui supportent entièrement la hauteur de ligne variable sont: chaque ligne peut avoir une hauteur de ligne différente qui s'adapte automatiquement pour s'adapter au contenu, et laisse le texte envelopper à la ligne suivante.

j'ai examiné cela assez longuement, et malheureusement je n'ai pas trouvé des solutions de rechange viables qui sont liées à SlickGrid. Parmi d'autres alternatives, je n'en ai trouvé qu'une qui est gratuite pour un usage commercial - dojox DataGrid, cependant il n'est pas clair comment vous pourriez utiliser des éditeurs personnalisés avec ceci (la plupart des éditeurs commerciaux offrent ceci).

il existe un certain nombre d'alternatives viables qui nécessitent un paiement pour une utilisation commerciale: dhtmlxGrid, jQuery EasyUI DataGrid, jQWidgets, Wijmo Grid widget, JideTable, et Sencha ExtJS Grids. De cela, je serais personnellement dire que le meilleur est dhtmlxGrid http://dhtmlx.com/docs/products/dhtmlxGrid/ - la version Gratuite est GPL, la version Pro est de 199$.