JQGrid Tri personnalisé

Question

Je dispose d'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, puis par une colonne de nom; à chaque fois. Je pense que le onSortCol est l'endroit où je devrais commencer, mais il n'y a pas beaucoup d'informations dans la documentation sur la façon de trier le contenu de la table. Idéalement, je voudrais ne pas avoir à écrire mon propre algorithme de tri et simplement me brancher d'une manière ou d'une autre sur l'API JQGrid. Toutes les données se trouvent côté client et je voudrais éviter un aller-retour vers le 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: "Contacts sélectionnés",
    hidegrid: false,
    autowidth: true,
    rowNum: 10000,
    height: "100%",
    loadui: 'block',
    colNames: ['lecID', 'lrlID', 'mjID', 'Rôle', 'Nom', 'Entité', '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 = $('').addClass('remove-contact jqui-button-fix');
            $jqGrid.jqGrid('setRowData', ids[i], { Remove: $('

Answer 1

Dans votre grille, vous avez 5 colonnes visibles et triables : 'RoleLookupName', 'FullName', 'Entity', 'ContactInformation', 'DNumber'. Après le chargement des données de la grille à partir du serveur, le type de données sera changé de 'json' à 'local' correspondant au comportement du paramètre loadonce: true. Désormais, le tri se fera localement. Étant donné que vous ne définissez pas la propriété sorttype dans aucune colonne, le sorttype: 'text' par défaut sera utilisé.

D'après ce que je comprends, les données des colonnes 'RoleLookupName', 'Entity', etc. peuvent contenir des doublons, vous souhaitez donc trier la grille par une combinaison de la colonne de tri principale (comme 'RoleLookupName' par exemple) et de la deuxième colonne ('FullName' par exemple). En cas de doublon dans la colonne de tri principale, la grille sera toujours triée selon le deuxième critère de la deuxième colonne. Pour implémenter ce comportement, vous devez utiliser un tri personnalisé. Vous pouvez le mettre en œuvre en utilisant le sorttype comme fonction (voir la réponse).

L'idée du sorttype en tant que fonction est simple. Le sorttype doit renvoyer une chaîne ou un entier qui doit être utilisé à la place de la valeur 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émo pourrait également vous intéresser pour comprendre. Elle démontre une technique encore plus avancée où non seulement le tri personnalisé est mis en œuvre, mais aussi la recherche personnalisée.