Je me demandais s’il existait un meilleur moyen de charger de gros ensembles de données Json à partir du serveur.
J’utilise jqgrid comme loadonce: true. Je dois charger environ 1500 enregistrements à la fois et je n’utilise pas d’option de pagination. Y a-t-il un meilleur moyen d’y parvenir? Merci d’avance.
Ceci est mon code de grid –
$(function(){ $("#testgrid").jqGrid({ url:getGridUrl, datatype: 'json', mtype: 'GET', height: 250, colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int",search:false}, {name:'invdate',index:'invdate', width:90, sorttype:"date",search:false}, {name:'name',index:'name', width:100,search:false}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float",search:false}, {name:'total',index:'total', width:80,align:"right",sorttype:"float",search:false}, {name:'note',index:'note', width:150, sortable:false,search:false} ], multiselect: true, multiboxonly:true, caption: "Manipulating Array Data", pager: '#testgridpager', //Auto load while scrolling //scroll: true, //to hide pager buttons pgbuttons:false, recordtext:'', pgtext:'', loadonce: true, sortname: 'id', sortorder: 'asc', viewrecords: true, multiselect: true, jsonReader : { root: "rows", //page: "page", //total: "total", records: "records", repeatitems: false, cell: "cell", id: "id" }, loadComplete: function(data) { var rowId; //alert(data.length); //alert('load complete'+data.rows.length); //set checkboxes false if mode is set to true if(mode){ for(var i=0;i<data.rows.length;i++){ rowId=data.rows[i].id; disableRow(rowId); var searchVal = $("#gs_amount").val().trim(); if(searchVal ==data.rows[i].amount){ jQuery("#testgrid").jqGrid('setSelection',rowId); //heighlightSearch(); } } } } }); //toolbar search $("#testgrid").jqGrid('filterToolbar',{stringResult:true,searchOnEnter:false}); }); function disableRow(rowId){ $("#testgrid").jqGrid('setRowData', rowId, false, {color:'gray'}); var trElement = jQuery("#"+ rowId,$('#testgrid')); trElement.removeClass("ui-state-hover"); trElement.addClass('ui-state-disabled'); trElement.attr("disabled",true); }
Par exemple, vous pouvez voir le temps de chargement de 1500 lignes pour votre grid en cas d’utilisation de gridview: true
.
Le problème le plus loadComplete
performances de votre exemple loadComplete
fonction loadComplete
. Si vous devez apporter quelques modifications à la grid, vous devez utiliser jQuery pour manipuler le contenu de la grid. La meilleure performance que vous puissiez archiver si vous utilisez directement les éléments DOM de la grid, comme dans l’exemple
loadComplete: function() { var i=0, indexes = this.p._index, localdata = this.p.data, rows=this.rows, rowsCount = rows.length, row, rowid, rowData, className; for(;i
Vous pouvez voir l'exemple correspondant en direct ici .
Dans l'implémentation de la fonction loadComplete
, j'utilise le fait que jqGrid ayant le paramètre loadonce:true
utilise les parameters internes _index
et les data
pouvant être utilisées pour accéder au contenu de la grid. Dans l'exemple, j'ai désactivé les lignes qui ne contiennent pas "200" dans la colonne des amount
.
UPDATED : La réponse explique comment utiliser rowattr
callback pour simplifier la solution et obtenir les meilleures performances (dans le cas de gridview: true
cause est gridview: true
).
Je serais tenté de regarder dans la fonctionnalité de chargement automatique de jqGrid sur le défilement. Je ne chargerais jamais 1500 lignes à l’avance. Une raison pour laquelle vous ne pouvez pas page?