jqgrid غير صحيحة لتحديد قيم خيارات القائمة المنسدلة في مربع التحرير

على الرغم من تحديد قيم البلد والدولة بشكل صحيح في نموذج التحرير، فإن قيم الخيارات المعروضة في مربع تحديد الحالة غير صحيحة عند تحرير النموذج. تستمر هذه المشكلة حتى عند التبديل مرة أخرى إلى دولة المملكة المتحدة بعد تحديد دولة الولايات المتحدة.

كيفية حل قيم الخيارات غير الصحيحة في مربع تحديد الولاية

لحل هذه المشكلة، من الضروري إجراء ذلك بشكل صحيح قم بملء مربع تحديد الحالة بناءً على قيمة البلد المحددة عند تحميل نموذج التحرير. يتضمن النهج ما يلي:

1. نشر قيم الحالة بناءً على تحديد البلد في وظيفة dataInit.
2. إعادة بناء مربع تحديد الحالة إذا تم تغيير البلد.

حل الكود

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 && id !== lastSel) {
            if (lastSel != -1) {
                resetStatesValues();
                grid.restoreRow(lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id, ri, ci) {
        if (id && 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();
              }
          });

ملاحظات

• يتم استخدام طريقة الشبكة.setColProp(...) لتعيين خصائص العمود.
• يتم استخدام وظيفة dataInit للتهيئة مربع التحديد وتعبئته بالخيارات.
• يتم استخدام مصفوفة dataEvents لإرفاق معالجات الأحداث بمربع التحديد.