مكونات للخيارات

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

Select المكون

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

عند إنشاء مكون Select ، يجب ملؤه بالخيارات التي سيتم التحديد منها. للقيام بذلك ، كما هو الحال في Relselect ، تحتاج إلى الحصول على قائمة عامة بالبلدان. ولكن بعد ذلك ، لا نرسل هذه القائمة إلى Select مباشرةً ولكن نقوم بتحويلها إلى خيارات متاحة ، يتم تمثيل كل منها كنموذج Select Option . لذلك ، نعلن أن مصفوفة Select Options كمتغير ونملأها بالبيانات الضرورية في حلقة.

في هذا المثال ، ستكون حقول Select Options الأساسية هي Label (نص الخيار المقترح) Value (معرفها الرقمي). قم بتعيين هذه القيم على اسم البلد ومعرفه.

عند اكتمال الحلقة ، يجب أن ننشئ ونضيف خيارًا آخر سيعرض جميع المدن المتاحة دون التصفية حسب البلدان. لنقم بتعيين Label = World و Value = 0 .

عند تحديد أي خيار ، سيتم إطلاق مشغل Select onChange . دعنا نستخدمه لمعرفة الخيار المحدد وكتابته إلى المتغير العالمي الجديد Country selected . في هذه الحالة ، من الضروري إجراء فحص إضافي ، وإذا تم تحديد الخيار الأخير (جميع المدن المتاحة) ، فيجب ضبط قيمة هذا المتغير على فارغ ( null ).

يتمثل الإجراء الأخير في عملية الأعمال هذه في بدء النقر فوق الزر " Refresh " ، والذي يقوم بتحديث البيانات الموجودة في الجدول. تحتاج عملية الأعمال أيضًا إلى تغيير طفيف لمراعاة ظهور متغير جديد.

يمكننا الآن اختيار المدن التي يجب أن تظهر من أي دولة في الجدول.

مكون Dropdown

وأخيرًا ، دعنا نلقي نظرة على مكون آخر يسمح لك باختيار خيارات مختلفة - Dropdown . الفرق الرئيسي هو أن تحديد خيار معين يجب أن يؤدي على الفور إلى بعض الإجراءات بدلاً من مجرد تذكر الخيار المحدد. يمكن أن يطلق عليه زر مع وظائف موسعة.

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

لنبدأ بالتكوين العام للمكون. دعنا نختار مظهره والخيارات المتاحة.

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

لتكرار عناصر الجدول ، يتكون Component ID من جزأين ، مفصولة بعلامة "-". الجزء الأول هو معرف المكون القياسي. لكن الجزء الثاني هو فقط معرف السجل ، والذي يجعل إضافته معرف المكونات المتكررة فريدًا.

مع العلم بهذا ، علينا فقط الحصول على هذا المعرف. لذلك ، سنقوم بتقسيم السلسلة إلى أجزاء ( Split string مقسمة) ومعرفة قيمة الجزء الثاني ( index = 1 )

كخطوة تالية ، نحتاج إلى معرفة الخيار الذي تم تحديده.

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

الآن أصبح حذف السجلات من قاعدة البيانات محميًا من النقرات غير المقصودة.