Meilleure grille JavaScript / JQuery dynamique [fermée]

87

Je travaille avec JavaScript, JQuery et HTML. L'interface utilisateur de mon projet est complètement dynamique. Je recherche une grille JavaScript / JQuery dynamique prenant en charge les fonctionnalités suivantes.

Quelqu'un peut-il me dire s'il existe une bonne grille de sources ouvertes qui prend en charge les fonctionnalités suivantes?

Je devrais être en mesure de créer une instance de la grille au moment de l'exécution et de l'ajouter au DOM.
Prend en charge les modèles de colonnes (zone de texte, sélection, case à cocher ou toute entrée ou texte simple)
Prise en charge de définir un nouveau modèle de colonne ou de remplacer le modèle de colonne existant en temps réel.
Peu de contrôles d'entrée (par exemple, zone de texte, case à cocher ..) présents sous une colonne peuvent être activés et peu peuvent être désactivés .
Prend en charge setData () en temps réel.
Prend en charge l'événement si des données d'entrée ont été modifiées par l'utilisateur.
Il devrait prendre en charge la sélection d'une ligne
Ajoutez ou supprimez la prise en charge de lignes en temps réel sans rendre l'ensemble de la grille.
Prend en charge la pagination.
Prend en charge le tri par colonne en temps réel.
Déclenche un événement si les données sont triées par utilisateur en temps réel.
L'interface utilisateur de la grille doit prendre en charge les colonnes réalisables
Redimensionnable automatiquement (ce sera génial si la grille est redimensionnable automatiquement en fonction de la taille de l'élément parent)
A certainement une bonne documentation.

javascript jquery grid

— Somnath
source

7

Écrivez-le vous-même. Si vous voulez toutes ces fonctionnalités, vous devez le faire vous-même. La solution personnalisée est toujours la meilleure solution.

— Raynos

28

Je ne suis pas sûr que ce soit toujours la meilleure solution. Je veux dire - je ne suis pas sur le point de créer mon propre moteur de base de données plutôt que d'utiliser InnoDB ...

— Grim ...

2

@Roynos, j'ai moi-même écrit peu de choses mais j'ai besoin d'investir beaucoup de temps pour implémenter toutes les fonctionnalités comme le tri, le redimensionnement ... etc. donc je recherche un contrôle de grille. J'évalue toujours toutes les grilles une par une.

— Somnath

22

@Raynos C'est ridicule. La meilleure solution est la solution qui fonctionne au moindre coût. Pourquoi le construire si c'est déjà fait?

— richard

@RichardDesLonde vous avez raison. Mon option est de sélectionner la meilleure solution existante et de l'étendre en fonction de vos besoins.

— Somnath

42

Certains sont utiles:

Libre:

Payé:

Les meilleures entrées à mon avis sont Flexigrid et jQuery Grid.

— Soham
source

Jusqu'à présent, j'ai commencé à aimer jQuery Grid. trirand.com/blog/jqgrid/jqgrid.html Mais je ne suis toujours pas sûr. Tenez-vous au courant ...

— Somnath

@Somnath - La grille jQuery est-elle celle avec laquelle vous étiez le plus satisfait? J'ai un besoin similaire et j'évalue des DataTables, mais l'ajout de lignes (et leur intégration dans l'ordre de tri) ne fonctionne pas bien.

— MattW

@MattW Oui j'aime jQuery Grid, l'ajout de données est vraiment facile. Vous pouvez également rendre chaque colonne triable simplement en définissant un indicateur. Ma liste d'exigences était vraiment grande. Mais peu de choses que je construis moi-même et dans quelques cas j'utilise jQuery Grid. Il a également une API cool et facile. À ce stade, je suis satisfait de jQuery Grid. C'est bon.

— Somnath

@Somnath Alors, lequel avez-vous finalement choisi? L'en-tête DataTable est également une bonne option. Lequel est le plus rapide? Et lequel prend en charge le regroupement?

— Vivek Vardhan

@VivekVardhan im using trirand.com/blog/jqgrid/jqgrid.html

— Somnath

38

vous pouvez essayer http://datatables.net/

DataTables est un plug-in pour la bibliothèque jQuery Javascript. C'est un outil très flexible, basé sur les bases de l'amélioration progressive, qui ajoutera des contrôles d'interaction avancés à n'importe quel tableau HTML. Principales caractéristiques:

Pagination de longueur variable
Filtrage à la volée
Tri multi-colonnes avec détection du type de données
Gestion intelligente des largeurs de colonne
Afficher les données de presque toutes les sources de données
DOM, tableau Javascript, fichier Ajax et traitement côté serveur (PHP, C #, Perl, Ruby, AIR, Gears, etc.)
Options de défilement pour la fenêtre de tableau
Entièrement internationalisable
Prise en charge de jQuery UI ThemeRoller
Solide comme le roc - soutenu par une suite de plus de 2600 tests unitaires
Grande variété de plug-ins inc. TableTools, FixedColumns, KeyTable et plus
C'est gratuit!
Sauvegarde d'état
Colonnes masquées
Création dynamique de tables
Chargement automatique des données Ajax
Positionnement DOM personnalisé
Filtrage sur une seule colonne
Types de pagination alternatifs
Interaction DOM non destructive
Mise en évidence des colonnes de tri
Options de source de données avancées
Prise en charge étendue des plug-ins
Tri, détection de type, fonctions API, pagination et filtrage
Entièrement thématisable par CSS
Documentation solide
110+ exemples pré-construits
Prise en charge complète d'Adobe AIR

— enclavé
source

3

Veuillez mettre en forme correctement les fonctionnalités clés. N'utilisez pas simplement le copier / coller. Faut-il le lire une fois après le copier / coller?

Que signifie "Interaction DOM non destructive"? Avoir du mal à comprendre pourquoi il s'agit d'un roman ou d'une fonctionnalité, et ce qu'il couvre / garantit.

— John Zabroski

1

@John, ce n'est plus mentionné sur la page liée, mais si vous recherchez cette phrase sur le Web, vous trouverez "Le plus gros changement de la v1.4 est l'interaction DOM non destructive. Cela signifie que DataTables n'écrasera pas les éléments du tableau afin d'exécuter ses fonctions (véritable amélioration progressive!), plutôt il déplace les éléments. Dans la v1.3 et avant de créer dynamiquement le HTML requis pour le corps à chaque tirage, ce n'est plus le cas. L'avantage immédiat est que tous les attributs (classes, etc.) de la table d'origine sont préservés [...] "

— CodeCaster

5

ce n'est pas un logiciel libre je pense, mmm, un problème avec lui.

— David

4

semble que ces grilles DataTables ne soient pas modifiables, et si vous en avez besoin, vous devez payer pour la version modifiable: editor.datatables.net/purchase/index

— yetanothercoder

8

Ma suggestion pour la grille JQuery dynamique est ci-dessous.

http://reconstrukt.com/ingrid/

https://github.com/mleibman/SlickGrid

http://www.datatables.net/index

Le meilleur est:

DataTables est un plug-in pour la bibliothèque jQuery Javascript. C'est un outil très flexible, basé sur les bases de l'amélioration progressive, qui ajoutera des contrôles d'interaction avancés à n'importe quel tableau HTML.

Pagination de longueur variable

Filtrage à la volée

Tri multi-colonnes avec détection du type de données

Gestion intelligente des largeurs de colonne

Afficher les données de presque toutes les sources de données

DOM, tableau Javascript, fichier Ajax et traitement côté serveur (PHP, C #, Perl, Ruby, AIR, Gears, etc.)

Options de défilement pour la fenêtre de tableau

Entièrement internationalisable

Prise en charge de jQuery UI ThemeRoller

Solide comme le roc - soutenu par une suite de plus de 2600 tests unitaires

Grande variété de plug-ins inc. TableTools, FixedColumns, KeyTable et plus

Création dynamique de tables

Chargement automatique des données Ajax

Positionnement DOM personnalisé

Filtrage sur une seule colonne

Types de pagination alternatifs

Interaction DOM non destructive

Mise en évidence des colonnes de tri

Options de source de données avancées

Prise en charge étendue des plug-ins

Tri, détection de type, fonctions API, pagination et filtrage

Entièrement thématisable par CSS

Documentation solide

110+ exemples pré-construits

Prise en charge complète d'Adobe AIR

5

Jetez un œil à agiletoolkit.org car il a un CRUD simple à utiliser qui prend en charge 2,4,6,7,9,10 et 12 prêts à l'emploi (utilise Ajax pour défendre la grille lors de l'ajout, de la suppression de données et il s'intègre avec jquery.

Je posterais quelques exemples mais sur un iPad pour le moment.

— Trevor Nord
source