도시 매핑과 함께 JSON 응답을 사용하여 jqGrid에서 여러 테이블의 데이터를 표시하는 방법은 무엇입니까?

jqGrid: 여러 관련 테이블의 데이터 처리

강력한 jQuery 플러그인인 jqGrid는 다양한 소스의 데이터를 표시하는 데 탁월합니다. 이 예에서는 상호 연결된 두 테이블인 Students 및 Cities.

의 데이터를 효율적으로 표시하는 방법을 보여줍니다.

Students 테이블은 도시 ID를 외래 키로 사용하며 Cities 테이블에서 도시 이름을 참조합니다.

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

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

원하는 출력 형식은 실제 도시 이름과 함께 학생 정보를 표시하는 단일 jqGrid입니다.

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

이를 달성하기 위해 서버측 응답은 도시 ID를 이름으로 변환하는 cityMap을 포함하도록 구성됩니다.

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

클라이언트 측 jqGrid 코드는 beforeProcessing 이벤트를 활용하여 cityMap을 사용하여 열 속성을 동적으로 업데이트합니다. 이렇게 하면 올바른 도시 이름이 표시됩니다. 여기서 formatter: "select" 옵션은 직접 사용되지 않지만 런타임에 열 옵션을 동적으로 업데이트하는 원칙은 동일하게 유지됩니다.

다음은 클라이언트측 코드를 단순화한 것입니다.

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

beforeProcessing 함수는 응답의 cityMap을 사용하여 jqGrid가 그리드를 렌더링하기 전에 rows 데이터의 숫자 도시 ID를 해당 도시 이름으로 바꿉니다. 이 접근 방식은 복잡한 클라이언트 측 데이터 조작을 방지하고 논리를 간결하게 유지합니다.

위 내용은 도시 매핑과 함께 JSON 응답을 사용하여 jqGrid에서 여러 테이블의 데이터를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!