Comment puis-je afficher des données indirectes (par exemple, les noms de villes à partir des identifiants) dans un jqGrid ?

jqGrid : Gestion de l'affichage indirect des données

Lorsque vous traitez des données tabulaires, vous devez souvent afficher les données de différents tableaux. Par exemple, si vous disposez d'une table principale contenant les noms des étudiants et les identifiants de ville, et d'une autre table qui mappe les identifiants de ville aux noms de ville réels, vous souhaiterez peut-être afficher les noms de ville dans la grille au lieu des identifiants de ville.

Limitations de la méthode de connexion directe

Une approche courante consiste à joindre ces tables en fonction du champ d'identification de la ville. Toutefois, cette approche devient peu pratique si vous utilisez une structure de classe contenant un champ d'ID de ville au lieu du nom réel de la ville.

Solution : utilisez la fonction de recherche pour décoder l'ID

Pour résoudre ce problème, jqGrid fournit la fonction formatter: "select". Cette fonction vous permet de décoder un identifiant de ville en nom de ville correspondant. Cependant, une carte de valeurs est nécessaire pour effectuer ce décodage, et cette carte doit être définie avant que jqGrid ne traite la réponse du serveur.

L'approche recommandée consiste à étendre la réponse de votre serveur avec des données d'attribut editoptions.value supplémentaires qui seront utilisées pour la colonne à l'aide du formateur "select". Cette réponse étendue peut être au format suivant :

<code class="language-json">{
    "cityMap": {"11": "Chennai", "12": "Mumbai", "13": "Delhi"},
    "rows": [
        { "SID": "1",  "SNAME": "ABC", "CITY": "11" },
        { "SID": "2",  "SNAME": "XYZ", "CITY": "12" },
        { "SID": "3",  "SNAME": "ACX", "CITY": "13" },
        { "SID": "4",  "SNAME": "KHG", "CITY": "13" },
        { "SID": "5",  "SNAME": "ADF", "CITY": "12" },
        { "SID": "6",  "SNAME": "KKR", "CITY": "11" }
    ]
}</code>

Dans vos paramètres jqGrid vous pouvez configurer les colonnes comme suit :

<code class="language-javascript">colModel: [
    {name: "SNAME", width: 250},
    {name: "CITY", width: 180, align: "center"}
],
beforeProcessing: function (response) {
    var $self = $(this);
    $self.jqGrid("setColProp", "CITY", {
        formatter: "select",
        edittype: "select",
        editoptions: {
            value: $.isPlainObject(response.cityMap) ? response.cityMap : []
        }
    });
},
jsonReader: { id: "SID"}</code>

Cette méthode vous permet de définir dynamiquement les options de colonne en fonction des données reçues du serveur. Il vous offre également la flexibilité nécessaire pour implémenter des scénarios plus complexes, tels que la spécification de préférences linguistiques ou la gestion d'un grand nombre d'éléments dans un élément de sélection.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!