jqGrid에 간접 데이터(예: ID의 도시 이름)를 어떻게 표시할 수 있나요?

jqGrid: 간접 데이터 표시 처리

표 형식의 데이터를 처리할 때 다양한 테이블의 데이터를 표시해야 하는 경우가 많습니다. 예를 들어 학생 이름과 도시 ID가 포함된 기본 테이블과 도시 ID를 실제 도시 이름에 매핑하는 다른 테이블이 있는 경우 도시 ID 대신 그리드에 도시 ​​이름을 표시할 수 있습니다.

직접접속방식의 한계

일반적인 접근 방식은 도시 ID 필드를 기반으로 이러한 테이블을 조인하는 것입니다. 그러나 실제 도시 이름 대신 도시 ID 필드가 포함된 클래스 구조를 사용하는 경우 이 접근 방식은 실용적이지 않습니다.

해결책: 조회 기능을 사용하여 ID 디코딩

이 문제를 해결하기 위해 jqGrid에서는 formatter: "select" 기능을 제공합니다. 이 기능을 사용하면 도시 ID를 해당 도시 이름으로 디코딩할 수 있습니다. 그러나 이 디코딩을 수행하려면 값 맵이 필요하며 jqGrid가 서버 응답을 처리하기 전에 이 맵을 설정해야 합니다.

권장되는 접근 방식은 "select" 포맷터를 사용하여 열에 사용될 추가 editoptions.value 속성 데이터로 서버 응답을 확장하는 것입니다. 이 확장 응답의 형식은 다음과 같습니다.

<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 설정에서 다음과 같이 열을 구성할 수 있습니다.

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

이 방법을 사용하면 서버에서 받은 데이터를 기반으로 열 옵션을 동적으로 설정할 수 있습니다. 또한 언어 기본 설정을 지정하거나 선택 요소에서 많은 수의 항목을 처리하는 등 더 복잡한 시나리오를 구현할 수 있는 유연성을 제공합니다.

위 내용은 jqGrid에 간접 데이터(예: ID의 도시 이름)를 어떻게 표시할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!