خيارات مربع التحديد التابعة في نموذج تحرير jqGrid

يسمح لك jqGrid بإنشاء مربعات تحديد ديناميكية لتحرير النماذج، حيث تعتمد الخيارات على التحديد الذي تم إجراؤه في مربع تحديد ذي صلة. يعد هذا مفيدًا لسيناريوهات مثل تحديد بلد وملء خيارات الحالة وفقًا لذلك.

المشكلة: قيم الخيار غير الصحيحة

ومع ذلك، تنشأ مشكلة عند تحرير سجل باستخدام مربع تحديد الحالة المأهولة ديناميكيًا. تبدأ قيم الخيار لمربع تحديد الحالة من 0 بدلاً من القيمة المتوقعة 5.

الحل: إعادة تعيين خيارات التحرير وإعادة الإنشاء يدويًا

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

إليك كيفية تنفيذ الحل:

1. إعادة تعيين خيارات التحرير:

   • عند تحميل الصفحة، قم بتعيين خيارات التحرير لمربع تحديد الحالة على ثابت القيمة.

2. تغيير البيانات:

   عندما يتغير مربع تحديد البلد، قم بإعادة تعيين خيارات تحرير مربع تحديد الحالة إلى قيمة ثابتة.
3. إعادة البناء حدد المربع:
   بناءً على البلد المحدد، أنشئ خيارات جديدة لمربع تحديد الحالة.
   • للتحرير المضمن، قم بتحديث مربع التحديد للصف المحدد.
   • لتحرير النموذج، قم بتحديث مربع التحديد في نموذج التحرير.
4. الحفاظ على الحالة القيم:
   بعد تغيير البلد وإعادة بناء مربع تحديد الحالة، تأكد من أن الحالة المحددة تنعكس بشكل صحيح عن طريق تعيين قيمة خيار التحرير المناسب.

مقتطف الكود:

// إعادة تعيين خيارات التحرير لمربع تحديد الحالة فار إعادة تعيينStatesValues ​​= وظيفة () { Grid.setColProp('State', {editoptions: {value:states}}); }; // أنشئ خيارات جديدة لمربع تحديد الولاية بناءً على البلد المحدد فار تشانج ستات سيليكت = الوظيفة (كونتري آيد، كونتري إليم) { var sc =stateOfCountry[countryId]; var newOptions = 'الكل'; // إذا لزم الأمر for (stateId in sc) { newOptions = ''states[stateId] ''; } Grid.setColProp('State', {editoptions: { value:statesOfCountry[countryId]} }); إذا ($(countryElem).is('.FormElement')) { // تحرير النموذج $(countryElem).Closest('form.FormGrid').find("select#state.FormElement").html(newOptions); } آخر { // التحرير المضمن varrow = $(countryElem).أقرب('tr.jqgrow'); varrowId =row.attr('id'); $("select#"rowId "_State"،row[0]).html(newOptions); } };

// Reset the editoptions for the state select box
var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states}});
};

// Build new options for the state select box based on the selected country
var changeStateSelect = function (countryId, countryElem) {
    var sc = statesOfCountry[countryId];
    var newOptions = 'All'; // If needed
    for (stateId in sc) { newOptions  = ''   states[stateId]   ''; }
    grid.setColProp('State', { editoptions: { value: statesOfCountry[countryId]} });
    if ($(countryElem).is('.FormElement')) {
        // Form editing
        $(countryElem).closest('form.FormGrid').find("select#state.FormElement").html(newOptions);
    } else {
        // Inline editing
        var row = $(countryElem).closest('tr.jqgrow');
        var rowId = row.attr('id');
        $("select#"   rowId   "_State", row[0]).html(newOptions);
    }
};

الاستنتاج

من خلال إعادة تعيين خيارات التحرير، وإعادة بناء مربع تحديد الحالة يدويًا، والحفاظ على قيمة الحالة المحددة، يمكنك التأكد من عرض نموذج التحرير في jqGrid قيم الخيار الصحيح لمربعات التحديد التابعة.