Rumah  >  Artikel  >  hujung hadapan web  >  Mengapakah nilai pilihan kotak pilihan Negeri tidak betul dalam borang edit jqGrid saya?

Mengapakah nilai pilihan kotak pilihan Negeri tidak betul dalam borang edit jqGrid saya?

Linda Hamilton
Linda Hamiltonasal
2024-11-01 12:56:02353semak imbas

Why are the State select box option values incorrect in my jqGrid edit form?

jqgrid salah pilih nilai pilihan lungsur turun dalam kotak edit

Walaupun memilih nilai Negara dan Negeri dengan betul dalam bentuk edit, nilai pilihan dipaparkan dalam kotak pilih Negeri tidak betul apabila borang diedit. Isu ini berterusan walaupun apabila beralih kembali ke negara UK selepas memilih negara AS.

Cara menyelesaikan nilai pilihan yang salah dalam kotak pilihan Negeri

Untuk menyelesaikan isu ini, adalah perlu dengan betul isikan kotak pilihan Negeri berdasarkan nilai Negara yang dipilih apabila borang edit dimuatkan. Pendekatan ini melibatkan:

  1. Mengisi nilai Negeri berdasarkan pemilihan Negara dalam fungsi dataInit.
  2. Membina semula kotak pilih Negeri jika Negara ditukar.

Penyelesaian Kod

<code class="javascript">var countries = { '1': 'US', '2': 'UK' };
var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' };
var statesOfCountry = {
    1: { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
    2: { '5': 'London', '6': 'Oxford' }
};

var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states} });
};

$("#list").jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name: 'Name', width: 200 },
        { 
            name: 'Country', 
            width: 100, 
            editable: true, 
            formatter: 'select',
            edittype: 'select', 
            editoptions: {
                value: countries,
                dataInit: function (elem) {
                    setStateValues($(elem).val());
                },
                dataEvents: [
                    { type: 'change', fn: function (e) { changeStateSelect($(e.target).val(), e.target); } },
                    { type: 'keyup', fn: function (e) { $(e.target).trigger('change'); } }
                ]
            }
        },
        {
            name: 'State', 
            width: 100, 
            editable: true, 
            formatter: 'select',
            edittype: 'select', 
            editoptions: { value: states }
        }
    ],
    onSelectRow: function (id) {
        if (id &amp;&amp; id !== lastSel) {
            if (lastSel != -1) {
                resetStatesValues();
                grid.restoreRow(lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id, ri, ci) {
        if (id &amp;&amp; id !== lastSel) {
            grid.restoreRow(lastSel);
            lastSel = id;
        }
        resetStatesValues();
        grid.editRow(id, true, null, null, 'clientArray', null,
                        function (rowid, response) {  // aftersavefunc
                            grid.setColProp('State', { editoptions: { value: states} });
                        });
        return;
    },
    editurl: 'clientArray',
    sortname: 'Name',
    height: '100%',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    pager: '#pager',
    caption: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).jqGrid('navGrid','#pager', 
          { edit: true, add: true, del: false, search: false, refresh: false },
          { // edit options
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          },
          { // add options
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          });</code>

Nota

  • Kaedah grid.setColProp(...) digunakan untuk menetapkan sifat lajur.
  • DataInit fungsi digunakan untuk memulakan kotak pilih dan mengisinya dengan pilihan.
  • Tatasusunan dataEvents digunakan untuk melampirkan pengendali acara pada kotak pilihan.

Atas ialah kandungan terperinci Mengapakah nilai pilihan kotak pilihan Negeri tidak betul dalam borang edit jqGrid saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn