Comment afficher toutes les lignes dans jqGrid?

Dans la dernière version de jqGrid, vous pouvez définir rowNum sur -1 pour indiquer à la grille d'afficher toujours toutes les lignes:

 rowNum: -1 

Consultez la dernière documentation de jqGrid ici .

Plus précisément:

Définit le nombre d'enregistrements que nous voulons afficher dans la grille. Ce paramètre est transmis à l'URL pour l'utilisation par la routine du serveur en récupérant les données. Notez que si vous définissez ce paramètre sur 10 (c.-à-d. Récupérer 10 enregistrements) et que votre serveur retourne 15, seuls 10 enregistrements seront chargés. Réglez ce paramètre sur -1 (illimité) pour désactiver cette vérification.

Mettre à jour

Malheureusement, ce comportement a été interrompu dans jqGrid 3.6.3. Selon cette publication de Tony :

Oui c'est vrai. La raison en est le nouveau rouleau introduit: 1. À l'avenir, nous corrigerons ce comportement.

Ainsi, les développeurs de jqGrid sont conscients de ce problème et apparemment envisagent de le réparer dans une version ultérieure. Malheureusement, cette publication existe depuis plus d'un an …

À ce moment, tout ce que je peux recommander, c'est que vous définissez rowNum à un très grand nombre pour simuler le comportement de -1 .

Vous pouvez également essayer la solution de rowNum: '' ci-dessous pour utiliser rowNum: '' . Cependant, j'ai essayé ceci sur une grille contenant des données locales ( loadonce: true ). Lorsque vous essayez de trier les lignes, toutes les données locales de la grille disparaissent. Donc, cette solution ne semble pas fonctionner pour les grilles avec des données locales, sauf si ce défaut a été corrigé dans une version ultérieure de jqGrid (je l'ai testé sur jqGrid 3.8.2). Si vous avez des commentaires, postez un commentaire ci-dessous!

Mise à jour – 16 avril 2014

Selon l'équipe jqGrid, cela est maintenant corrigé:

J'ai ajouté un support pour définir différentes valeurs d'affichage sur la boîte de sélection de téléavertisseur, y compris -1 pour tous.

Je n'ai pas eu la chance de tester pour confirmer le correctif, cependant. Il est probable que ce changement sera dans la prochaine version après jqGrid 4.6.0.

Jqgrid (3.5 de toute façon) ne semble pas avoir un style élégant pour faire cela. Le meilleur que j'ai trouvé jusqu'à présent est d'ajouter quelque chose comme le suivant à vos options de grille:

 rowList:[10,20,30,100000000], loadComplete: function() { $("option[value=100000000]").text('All'); }, 

Où le 100000000 est un nombre arbitrairement supérieur au nombre maximal de lignes que vous renverrez jamais, et la ligne [valeur =] de l'option est telle que votre interface utilisateur est un peu plus agréable. Jenky, mais travaille pour moi.

Si vous ne souhaitez pas utiliser la pagination, modifiez-vous le code côté serveur pour simplement renvoyer toutes les lignes. N'utilisez pas le paramètre rows du tout.

Si vous souhaitez avoir la liste de diffusion mais également une option pour afficher tout, faites quelque chose comme ceci dans les propriétés de la grille

 jQuery("#statement_mods").jqGrid({ rowList:['ALL',30,50,100,200] }); 

Et ensuite, dans le code serveur, assurez-vous d'ignorer le paramètre des lignes si GET ['rows'] = 'ALL'

Cela marche:

 // Step1 - defines the rows jqGridOptions.rowList =[10, 50, 100, 500, 'All']; ... ... // Step2 - Change the 'All' to a meaningful value loadComplete: function (data) { $(".ui-pg-selbox option[value='All']").val(1000); } 

Si vous avez défini la pagination sur la barre de navigation, vous pouvez également accéder au nombre total de lignes écrites en bas à droite de la grille, puis ajouter à l'option RowList générée.

Faites quelque chose comme:

  // Get the total number of rows and delete space between numbers (Split the content of the div depending of the language (for me french) var val=jQuery("#pager_right div").text().split('sur')[jQuery("#pager_right div").text().split('sur').length-1].split(' ').join(''); // And do the appending if the option isn't already added if(!$(".ui-pg-selbox option[value='"+val+"']").length > 0) jQuery(".ui-pg-selbox").append($('<option></option>').val(val).html(val)); 

rowNum:-1 fait l'affaire pour moi

 Jqgrid.PagerSettings.PageSize = Max Row you want to display; Jqgrid.ToolBarSettings.ToolBarPosition = ToolBarPosition.Hidden; 

Je travaille comme ça:

 $('#bla').jqGrid({ ... 'rowNum' : 0, 'loadOnce' : true, 'loadComplete': function(data) { $(this).jqGrid('setGridParam', 'rowNum', data.total); }, ... }); 

Cela fonctionne avec et sans l'option loadOnce définie sur true. Notez que vous devez d'abord définir l'option rowNum sur 0, si vous rowNum cette option, il sera toujours par défaut aux 20 enregistrements à afficher. En outre, je suppose que vous renvoyez les lignes totales du serveur dans le format documenté JSON reader.

L'a résolu avec un changement simple: rowNum: inputDataArray.length

Où inputDataArray est le tableau que je fournis à la grille.

Vous pouvez également entrer dans jquery.jqGrid.js et changer "rowNum: 20" à "rowNum: Some-Really-Large-Number". Lorsque vous définissez votre jqGrid, ne spécifiez pas rowNum. Ensuite, retournez votre ensemble de données entier à jqGrid.

Définir rowNum: '' vous obtenez toutes les lignes.

Même s'il apparaît toujours dans le document que vous ne pouvez pas définir rowNum à -1 à partir de jqGrid 4.5.4, il fonctionne à nouveau (peut-être dans une version antérieure aussi).

Par défaut, la grille JQ affiche 20 lignes Max, si vous n'utilisez pas la pagination:

 // To over come with this problem ,you can just write the bold mark (rowNum:10000,): $("#MasterDataDefinationGrid").jqGrid({ url: 'FetchData.aspx/GetDataFromDB', datatype: 'json', mtype: 'POST', height: 300, autowidth: true, serializeGridData: function (postData) { return JSON.stringify(postData); }, ajaxGridOptions: { contentType: "application/json" }, loadonce: true, colNames: [Your column names], colModel: [Your model], formatter: 'actions', pager: '#MasterDataDefinationPager', pgbuttons: false,pgtext:false, multiselect: false, ignoreCase: true, **rowNum: 10000,** loadtext: 'Loading ...', gridview: true, hidegrid: false, jsonReader: { page: function (obj) { return 1; }, total: function (obj) { return 1; }, records: function (obj) { return obj.d.length; }, root: function (obj) { return obj.d; }, repeatitems: false, id: "0" }, caption: 'Data' });