Comment afficher les données de plusieurs tables dans jqGrid à l'aide d'une réponse JSON avec la cartographie de la ville ?

jqGrid : gestion des données de plusieurs tables associées

jqGrid, un puissant plugin jQuery, excelle dans l'affichage de données provenant de diverses sources. Cet exemple montre comment présenter efficacement les données de deux tables interconnectées : Students et Cities.

La table Students utilise les identifiants de ville comme clés étrangères, faisant référence à la table Cities pour les noms de ville :

<code>Students:
| SID | SNAME | CITY |
|---|---|---|
| 1 | ABC | 11 |
| 2 | XYZ | 12 |
| 3 | ACX | 13 |

Cities:
| CID | CNAME |
|---|---|
| 11 | Chennai |
| 12 | Mumbai |
| 13 | Delhi |</code>

Le format de sortie souhaité est un seul jqGrid affichant les informations sur les étudiants avec les noms réels des villes :

SID	SNAME	City
1	ABC	Chennai
2	XYZ	Mumbai
3	ACX	Delhi
4	KHG	Banglore
5	ADF	Hyderabad
6	KKR	Kolkatta

Pour y parvenir, la réponse côté serveur est structurée pour inclure un cityMap qui traduit les identifiants de ville en noms :

<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>

Le code jqGrid côté client exploite l'événement beforeProcessing pour mettre à jour dynamiquement les propriétés des colonnes à l'aide de cityMap. Cela garantit que les noms de villes corrects sont affichés. L'option formatter: "select" n'est pas directement utilisée ici, mais le principe de mise à jour dynamique des options de colonne lors de l'exécution reste le même.

Voici une représentation simplifiée du code côté client :

<code class="language-javascript">var filterToolbarOptions = {defaultSearch: "cn", stringResult: true, searchOperators: true},
    removeAnyOption = function ($form) { /* ... (function remains unchanged) ... */ },
    $grid = $("#list");

// ... (other code remains largely unchanged) ...

$grid.jqGrid({
    // ... (colModel remains largely unchanged) ...
    beforeProcessing: function (response) {
        // ... (logic to handle cityMap and update column properties) ...
    },
    jsonReader: { id: "SID"}
});
// ... (rest of the code remains largely unchanged) ...</code>

La fonction beforeProcessing utiliserait le cityMap de la réponse pour remplacer les identifiants numériques des villes dans les données rows par les noms de villes correspondants avant que jqGrid ne restitue la grille. Cette approche évite la manipulation complexe des données côté client et maintient la logique concise.

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!