JQGrid Custom Triing

J'ai un JQGrid peuplé de données fonctionnant correctement. La fonctionnalité de tri par défaut fonctionne comme prévu. Cependant, je voudrais trier par la colonne cliquée, et par une colonne de nom; à chaque fois. Je pense que onSortCol est l'endroit où je devrais commencer, mais il n'y a pas grand-chose dans la documentation sur la façon de trier le contenu de la table. Idéalement, j'aimerais ne pas avoir à écrire mon propre algorithme de tri et simplement me connecter à l'API JQGrid de quelque façon. Toutes les données sont sur le client et j'aimerais éviter un voyage au serveur si possible.

Voici le code que j'utilise pour créer la grille:

 $jqGrid = $('#people_SelectedContacts').jqGrid({ ajaxGridOptions: { type: "POST" }, url: 'AJAX/GetContacts', datatype: "json", postData: JSON.stringify({ ID: $('#ID').val() }), loadonce: true, sortable: true, caption: "Selected Contacts", hidegrid: false, autowidth: true, rowNum: 10000, height: "100%", loadui: 'block', colNames: ['lecID', 'lrlID', 'mjID', 'Role', 'Name', 'Entity', 'Contact', 'D #', ''], colModel: [ { name: 'LECID', hidden: true }, { name: 'LRLID', hidden: true }, { name: 'MJID', hidden: true }, { name: 'RoleLookupName', index: 'RoleLookupName' }, { name: 'FullName', index: 'FullName' }, { name: 'Entity', index: 'Entity' }, { name: 'ContactInformation', index: 'ContactInformation' }, { name: 'DNumber', index: 'DNumber' }, { name: 'Remove', sortable: false, width: 25 } ], jsonReader: { root: 'ReturnValues.Contacts', repeatitems: false }, beforeProcessing: function (data, status, xhr) { if (!data.ReturnValues.Contacts) { data.ReturnValues.Contacts = new Array(); } $.each(data.ReturnValues.Contacts, function (index, value) { value.Entity = FormatAddress(value); value.ContactInformation = FormatContact(value); value.DNumber = FormatDocket(value); }); }, gridComplete: function () { var ids = $jqGrid.jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { removeButton = $('<span>').addClass('remove-contact jqui-button-fix'); $jqGrid.jqGrid('setRowData', ids[i], { Remove: $('<div>').append(removeButton).html() }); } }, loadComplete: function (data) { }, onSortCol: function (index, iCol, sortorder) { } });

Dans votre grille, vous avez 5 colonnes qui sont visibles et sortables: 'RoleLookupName', 'FullName', 'Entity', 'ContactInformation', 'DNumber'. Après le chargement des données de grille du serveur, le type de données sera changé de 'json' à 'local' correspond au comportement du paramètre loadonce: true . À partir de maintenant, le tri sera fonctionnel localement. Parce que vous ne définissez pas la propriété sorttype dans n'importe quelle colonne, le type de sorttype: 'text' par défaut sera sorttype: 'text' .

La façon dont je comprends les données dans les colonnes 'RoleLookupName', 'Entity' et ainsi de suite peut contenir des doublons, de sorte que vous souhaitez trier la grille par combinaison de la colonne de tri principale (comme 'RoleLookupName' par exemple) et la deuxième colonne (' FullName 'par exemple). Dans le cas des doublons dans la colonne de tri principal, la grille sera toujours triée selon le deuxième critère de la deuxième colonne. Pour implémenter le comportement, vous devez utiliser un tri personnalisé. Vous pouvez l'implémenter par l'utilisation du sorttype de sorttype comme fonction (voir la réponse ).

L'idée du sorttype de sorttype comme fonction est simple. Le type de sorttype doit renvoyer une chaîne ou un nombre entier qui doit être utilisé à la place de la cellule principale. Par exemple, vous pouvez définir 'RoleLookupName' comme suit

 { name: 'RoleLookupName', index: 'RoleLookupName', sorttype: function (cell, obj) { return cell + '_' + obj.FullName; }}

Une autre réponse qui inclut la démonstration pourrait vous intéresser pour la compréhension. Il démontre une technique encore plus avancée où il est implémenté non seulement le tri personnalisé, mais aussi la recherche personnalisée.