Bagaimanakah Saya Boleh Memaparkan Data Tidak Langsung (cth., Nama Bandar daripada ID) dalam jqGrid?

jqGrid: Mengendalikan paparan data tidak langsung

Apabila berurusan dengan data jadual, anda selalunya perlu memaparkan data daripada jadual yang berbeza. Contohnya, jika anda mempunyai jadual utama yang mengandungi nama pelajar dan ID bandar, dan jadual lain yang memetakan ID bandar kepada nama bandar sebenar, anda mungkin mahu memaparkan nama bandar dalam grid dan bukannya ID bandar.

Had kaedah sambungan langsung

Pendekatan biasa adalah dengan menyertai jadual ini berdasarkan medan ID bandar. Walau bagaimanapun, pendekatan ini menjadi tidak praktikal jika anda menggunakan struktur kelas yang mengandungi medan ID bandar dan bukannya nama bandar sebenar.

Penyelesaian: Gunakan fungsi carian untuk menyahkod ID

Untuk menyelesaikan masalah ini, jqGrid menyediakan fungsi formatter: "select". Fungsi ini membolehkan anda menyahkod ID bandar ke dalam nama bandar yang sepadan. Walau bagaimanapun, ia memerlukan peta nilai untuk melaksanakan penyahkodan ini, dan peta ini perlu ditetapkan sebelum jqGrid memproses respons pelayan.

Pendekatan yang disyorkan adalah untuk melanjutkan respons pelayan anda dengan data atribut editoptions.value tambahan yang akan digunakan untuk lajur menggunakan pemformat "pilih". Respons lanjutan ini boleh dalam format berikut:

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

Dalam tetapan jqGrid anda, anda boleh mengkonfigurasi lajur seperti berikut:

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

Kaedah ini membolehkan anda menetapkan pilihan lajur secara dinamik berdasarkan data yang diterima daripada pelayan. Ia juga memberi anda fleksibiliti untuk melaksanakan senario yang lebih kompleks, seperti menentukan pilihan bahasa atau mengendalikan sejumlah besar item dalam elemen pemilihan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Data Tidak Langsung (cth., Nama Bandar daripada ID) dalam jqGrid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!