Comment améliorer les performances de jqGrid

Question

J'ai plus de 1000 lignes pour remplir les données via jqGrid. Lorsque je remplis des données via jqGrid, jqGrid prend plus de 20 secondes pour remplir les données. Ce temps est pris uniquement par jqGird (le temps d'exécution de la requête et l'autre heure sont exclus). J'ai besoin de remplir 1000 lignes en utilisant jqGrid et je ne veux pas utiliser la pagination. S'il vous plaît aidez-moi comment augmenter les performances de jgGrid.

Les versions que nous utilisons sont: jgGrid: 3.6.4 jQuery: jQuery UI 1.4.2: 1.7.2 Navigateur: IE 7

Voici le code:

jQuery("#displayItemPerformanceGrid").jqGrid({ 
    //datatype: displayItemPerformanceGridData, //json 
    url:'/DISMGMT/StandardProxy/displayItemPerformanceService?userRole='+userRole+ 
     '&userName='+userName+'&duration='+displayDuration+'&userId='+userId, 
    datatype: 'json', 
    colNames: ["CM","Display Location","Display Name","Item","Item Description", 
       "Store","DC","Date","Type","Promo Retail","Reg. Retail 50" "Units", 
       "Sales $", "Profit $"], 
//  $("#load_navGrid").html("Loading...").show(); 
    colModel: [ 
     {name:"cmName",index:"cmName",classes:"metric",width:130,resizable:true, 
     align:"left"}, 
     {name:"displayLocation",index:"displayLocation",width:80,align: "left"}, 
     {name:"displayName",index:"displayName",width:225,align:"left"}, 
     {name:"item",index:"item",sorttype:"int",width:60,align:"left"}, 
     {name:"itemDescription",index:"itemDescription",width:230,align:"left"}, 
     {name:"store",index:"store",sorttype:"int",width: 70,align: "right"//, 
     //unformat : spaceFormatter 
     }, 
     {name: "dc", index: "dc", sorttype: "int",width: 60,align: "right"//, 
     //unformat : spaceFormatter 
     }, 
     {name:"date",index:"date",sorttype:"date",datefmt:"mm-dd-yy",width:80, 
     align: "left"}, 
     {name: "type",index: "type",width: 45,align: "left"}, 
     {name: "price",index: "price",width: 70,align: "left"}, 
     {name: "regRetail",index: "regRetail",width: 70,align: "left"}, 
     {name:"units",index:"units",sorttype:"int",width:45,align:"right", 
     unformat : spaceFormatter}, 
     {name:"sales",index:"sales",sorttype:"int",width:45,align:"right", 
     unformat : spaceFormatter}, 
     {name:"profit1",index:"profit1",sorttype:"int",width:40,align:"right", 
     unformat : spaceFormatter} 
    ], 
    width: 982, 
    height: 137, 
    toolbar: [true, "top"], 
    viewrecords: true, 
    rowNum: 1500, 
//  gridview:true, 
    loadonce:true 
}); 

S'il vous plaît me suggérer comment améliorer les performances de jqGrid

Answer 1

Utiliser le défilement virtuel (voir le demo, Nouveau dans la version 3.7 -> Défilement virtuel).

Answer 2

Votre question ressemble à une autre question de forum trirand que j'ai récemment answered. Pour être sûr que je peux répéter l'information ici.

En général pour jqGrid n'est pas un problème pour afficher 1000 lignes. The demo example qui a 15 colonnes et 1000 lignes seront affichées sur mon ordinateur assez rapidement. Je n'ai pas IE7, mais dans IE8, IE9 beta, Chrome, Firefox, Opera et Safari (tous dans les dernières versions) le temps d'afficher la table est très rapide. Dans l'exemple, j'utilise l'interface utilisateur jQuery modifiée, où .ui-widget :active { outline: none; } est supprimé. Voir here et here pour plus de détails. Donc, pour être en mesure de vous aider, vous avez besoin définition complète de votre jqGrid inclus le code HTML et de tester les données JSON. Vous pouvez capturer les données en respectant Fiddler ou Firebug. Vous avez probablement quelques types de données, n'utilisez pas l'option gridview:true et utilisez la méthode afterInsertRow qui fait que jqGrid fonctionne plus lentement pour les pages de lagre. Il se peut aussi que vous travailliez beaucoup à l'intérieur du gestionnaire d'événements gridComplete ou loadComplete. Donc, sans avoir le code, je ne peux que deviner. Il peut également être important quelle colonne vous utilisez pour le tri des données et comment vous insérez les données dans la grille (avec le paramètre data, loadonce:true ou en utilisant addRowData). Un autre point de vue est l'utilisation de la radiomessagerie locale . Si vous préférez renvoyer toutes les 1000 lignes à la fois à partir du serveur, cela ne vous dérange pas d'utiliser local paging des 1000 lignes de données. Sur the next example je le démontre. Le problème est facile: toutes les 1000 lignes ne peuvent pas être affichées pour l'utilisateur à la fois. L'utilisateur doit faire défiler les lignes dans le navigateur Web ou dans le respect de la pagination locale jqGrid. L'avantage de la pagination locale est: seules les données d'une page seront placées dans la table. Toutes les autres données ne seront conservées que sous la forme triée en interne. Il peut améliorer les performances et ne change presque rien du point de vue des utilisateurs.

Plus de qu'eu intelligente filtrage local des données en ce qui concerne des toolbar filtering ou single field/advanced searchingpeut aider l'utilisateur à analyser très beaucoup d'informations des 1000 lignes qui lui seront affichés. Le filtrage local et la pagination locale peuvent être utilisés très nativement ensemble.