2010-12-15 94 views
0

Je réfléchis entre utiliser un plugin de grille pour Jquery vs ajouter manuellement des lignes à la table html (en utilisant Jquery). Tout ce que j'ai besoin de faire est d'afficher les données dans un tableau, d'avoir un champ modifiable, puis de sauvegarder les données dans la base de données. J'ai un délai limité et n'ai pas le temps d'apprendre un nouveau plugin (comme jqgrid qui est assez complexe).Utilisation d'un plugin vs remplir manuellement une table avec Jquery

Je voudrais normalement afficher environ 200 lignes à l'utilisateur .. ce que je me demande est en termes de vitesse serait-il vraiment une mauvaise performance d'ajouter 200 lignes à la table html? Un plugin accélèrerait-il vraiment la performance (d'où la nécessité d'en utiliser un)? Je sais que JavaScript peut être lent lorsqu'il n'est pas optimisé, c'est pourquoi je voudrais savoir.

Une idée/un conseil?

Répondre

1

Il n'y a rien qu'un plugin fait qui serait nécessairement plus rapide que ce que vous pouvez écrire vous-même. Cela étant dit, le moyen le plus rapide de le faire pour vous serait de créer une chaîne des lignes du tableau HTML (ajouter chaque ligne à la chaîne), puis de définir l'innerHTML à la chaîne. Ne créez pas les noeuds DOM directement & append, c'est la pire performance.

Source: http://www.quirksmode.org/dom/innerhtml.html

+0

Merci, après un google rapide, il s'avère que innerHtml est en lecture seule dans IE .... donc mon alternative serait de créer la table entière, placez-le dans la div et placez innerHtml de cette DIV? – sarsnake

+1

Ugh, stupide IE. innerHTML est uniquement en lecture seule lorsqu'il s'agit d'éléments de table. J'ai oublié celui là. Si vous pouvez utiliser jQuery, essayez $ ('# your_table'). Html (your_generated_html); Je pense que cela va utiliser innerHTML quand c'est possible. Espérons qu'il prendra soin de toute incohérence du navigateur. – sioked

+0

donc essentiellement, ce qui ralentit le processus est la création du nœud DOM plutôt que d'ajouter des chaînes ...? – sarsnake

1

Regardez les exemples de the answer. Dans l'exemple sera ajouté 1000 lignes à la grille et tout le travail rapidement.

Ce serait beaucoup mieux si vous avez posté le prototype de votre grille que vous utilisez actuellement. En outre, jqGrid supporte de nombreux scénarios pour les données locales et distantes et de nombreuses façons d'éditer les données locales et distantes. Avez-vous déjà choisi une direction ou au moins la direction dans laquelle vous voulez aller? Si vous envisagez d'accéder à un serveur dorsal distant avec une base de données, des informations supplémentaires sont requises. Au moins un besoin de savoir quelle technologie vous utilisez sur le serveur (ASP.NET MVC, WFC, services Web ASMX, PHP, Java Servlet et ainsi de suite).

+0

J'accède au serveur en utilisant le service Web. Je masser les données à l'intérieur du service Web. Tout ce que je dois faire du côté client est décrit dans le corps de la question. Je voudrais garder est simple - à savoir peupler la table avec des données est à peu près tout ce que je dois faire. Ce que je me demande, c'est si cela vaut la peine pour moi d'apprendre un tout nouveau plugin, car j'ai un temps limité pour terminer. – sarsnake

+0

@gnomixa: Si vous voulez remplir la grille avec les données des objets JavaScript, alors le moyen le plus bast est d'utiliser le paramètre 'data' de jqGrid comme dans l'exemple http://www.ok-soft-gmbh.com/ jqGrid/1000.htm. Si vous voulez éditer des données en ce qui concerne le service Web, voir http://stackoverflow.com/questions/3917102/jqgrid-add-row-and-send-data-to-webservice-for-insert/3918615#3918615. Pour charger les données directement à partir du serveur Web, voir http://stackoverflow.com/questions/3161302/jqgrid-page-1-of-x-pager/3161542#3161542, http://stackoverflow.com/questions/3169408/jqgrid- setgridparam-datatypelocal/3170652 # 3170652. – Oleg

+0

@gnomixa: Je peux répéter encore une fois que vous incluez votre code actuel dans votre question. Si vous avez écrit sur les problèmes de performance, vous devriez déjà avoir un exemple de travail. L'affichage d'un tel exemple peut expliquer beaucoup plus que des conseils généraux.Vous utilisez probablement certaines fonctionnalités de jqGrid qui font que tout fonctionne lentement. Si vous avez un temps limité, cela pourrait accélérer la résolution de vos problèmes. – Oleg