الجداول

ظهر أول سجل في قاعدة البيانات! لكننا لا نراه ، ويحتاج إلى الإصلاح. للقيام بذلك ، تحتاج إلى مكون Table (جدول يعرض البيانات الضرورية). فور الإضافة ، سيطلب منك تحديد البيانات التي ستكون فيها وتحديد نموذج ونقطة نهاية.

إعدادات الجدول

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

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

مشغلات الجدول

هناك ثلاثة محفزات ذات أهمية كبرى في الجداول - onDataUpdate و onShow و onFilter . لنبدأ بـ onShow ونحدد ما يجب أن يحدث عند عرض الجدول على الشاشة. سيتطلب ذلك ثلاث كتل:

1) Table Update Properties . قم بتعيين الخصائص المطلوبة للجدول. على سبيل المثال ، هنا يمكنك تحديد عدد السجلات في صفحة واحدة (تعيين المعلمة Records per page = 10 ) وإظهار أن الصفحة في وضع تحميل البيانات ( Loading = true )

2) Server request GET /country/ . لكي تظهر البيانات ، يجب أخذها إلى مكان ما. وللقيام بذلك ، قم بتقديم طلب إلى قاعدة البيانات لنقطة النهاية المقابلة. في الوقت نفسه ، انتبه إلى عدد معلمات الإدخال لنقطة النهاية هذه. فهي توفر مرونة أكبر في الاستعلام ولا تحصل إلا على البيانات المطلوبة حقًا.
في حالتنا هذه ، سنقوم بتعيين _limit = 10 لأن عدد الإدخالات في كل صفحة هو 10 ، ولا فائدة من تحميل المزيد. بالإضافة إلى ذلك ، سنقوم بترتيب الإخراج الصحيح ، ونفرز كل شيء حسب الاسم ( _sort_by = name ) ، ونقوم أيضًا بتعيين ترتيب الفرز. يمكن أن تأخذ المعلمة _sort_order القيمة ASC (من الكلمة Ascending ، للفرز المباشر ، من أصغر قيمة إلى أكبرها) أو DESC ( Descending ، ترتيب عكسي). الفرز الأبجدي المباشر جيد بالنسبة لنا ، لذا _sort_order = ASC .

تستحق المعلمة _with اهتمامًا خاصًا. عند تنفيذ الاستعلام بدونه ، يمكننا فقط الحصول على بيانات حول البلدان. لكن نموذج البلد مرتبط بالمدن ، وعلى الرغم من أن هذه البيانات لا تنتمي إلى الجدول المطلوب ، إلا أننا ما زلنا نريد رؤيتها. للقيام بذلك ، قم بتعيين _with = citys واحصل على الفور على بيانات حول المدن الموجودة في هذا البلد.

3) Table Update Data . يتم استلام البيانات ، ولكن يجب نقلها إلى جدول ليتم عرضها على الشاشة. للقيام بذلك ، نقوم بتمرير جميع المعلومات ( data ) الواردة في الكتلة السابقة ، وكذلك العدد الإجمالي للسجلات ( count - Total Records ) ، من أجل فهم عدد الصفحات التي يجب أن تكون في الجدول.

المشغل التالي هو onDataUpdate . يمكن تحديث البيانات الموجودة في الجدول كنتيجة لعمليات الأعمال المختلفة. وعندما يحدث هذا ، فمن الأفضل تحديد ما يجب أن يحدث مرة واحدة وعدم وضع نفس الكتل في كل عملية تجارية. في حالتنا ، سيكون من الصحيح استخدام كتلة Table Update Properties مرة أخرى ، ولكن هذه المرة لإزالة وضع التحميل ( Loading = false ) ، والذي تم تعيينه مسبقًا ، وإظهار أن الجدول جاهز للعمل.

آخر مشغل نحتاجه هو onFilter . إنه يحدد ما يجب أن يحدث في لحظة الانتقال إلى صفحات أخرى من الجدول. للقيام بذلك ، يحتوي على المعلمة _offset ، والتي ، وفقًا لرقم الصفحة ، تشير إلى الإزاحة المطلوبة عند تحميل البيانات.

على سبيل المثال ، في حالتنا ، إذا كان هناك 10 إدخالات في كل صفحة ، فستحتاج الصفحة الثالثة إلى إدخالات من 21 إلى 30. سيتم الحصول على هذه البيانات من _offset ويمكن تمريرها إلى Server request GET /country/ الكتلة. وبخلاف ذلك ، ستتزامن عملية الأعمال تمامًا مع العملية الموجودة على مشغل TableOnShow . في مثل هذه الحالات ، سيكون من المعقول أن يكون هناك مشغلان مختلفان يطلقان نفس العملية التجارية.

لكن في حالتنا ، يكمن الاختلاف المهم في المعلمة _offset . إذا تركت كل شيء كما في لقطة الشاشة أدناه ، فستبدأ العملية وفقًا onShow ، ولكنها ستتوقف عند Server request GET /country/ الكتلة نظرًا لأنه لا يمكن الحصول على قيمة _offset (يتم تمريرها من مشغل آخر).

من الأفضل حل هذه الحالة باستخدام المتغيرات. لنلق نظرة على مثال محدد. نحتاج إلى متغير من النوع Integer لحفظ قيمة _offset . لذلك ، نستخدم كتلة Integer واحدة للإعلان عن هذا المتغير ، لكننا نستخدم كتلتين مختلفتين من Set Variable لكتابة قيمته ، كل واحدة مرتبطة بمشغل مختلف.

وفقًا Table onShow ، لا نحتاج إلى أي إزاحة ، حيث يتم عرض البيانات الموجودة في الجدول من البداية و _offset = 0 ، لذلك قمنا بتعيين Value = 0 في Set Variable .

عندما يتم تشغيل مشغل Table onFilter ، نتلقى بالفعل قيمة _offset ونريد استخدامها لذلك سنقوم بتمرير قيمة _offset Value إلى Set Variable .

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