استخدام الجداول في تطبيقات الويب

يتم استخدام Table set properties الجدول وكتل Table update properties لتصميم الجداول.

للوهلة الأولى ، يبدو أن هاتين الكتلتين متماثلتان. الفرق في طريقة عملها:

Table Set Properties يغير الإعدادات الحالية بالكامل. حتى لو قمت بتعيين حقل إدخال واحد فقط ، ستتغير جميع الحقول ؛ سوف يصبحون فارغين. تقوم كتلة Table Update Properties بتغيير الحقول المحددة فقط ، لذا فهي حل رائع إذا كنت تريد فقط تغيير إعدادات الجدول جزئيًا.

دعونا نرى نوع إعدادات العرض التي يمكن تطبيقها على الجداول.

يتم تعيين الإعدادات باستخدام حقول الإدخال في كتل خصائص Table set properties Table update properties . هناك المجالات التالية:

  • Component ID - يحدد الجدول الذي سيتم تطبيق التغييرات عليه ؛
  • Title الجدول
  • Style - تغيير حجم الصفوف في الجدول ؛
  • Pagination - مسؤول عن الجداول متعددة الصفحات ؛ يمكن استخدامه في جدول يحتوي على عدد كبير من الإدخالات حتى لا يفرط في التحميل ؛
  • Bordered - حدود في الجدول ؛
  • Visible - إظهار / إخفاء الجدول ؛
  • Loading - حالة التحميل ؛ يوضح هذا الخيار للمستخدمين أن هناك تغييرات في الجدول.

تعمل الإعدادات التالية فقط عند تمكين pagination :

  • Current page - اختيار صفحة الجدول المراد عرضها ؛
  • Records for page - عدد السجلات لكل صفحة ؛
  • Total records - إجمالي عدد السجلات في الجدول.

مثال عملي

دعنا نستخدم جدولًا بسيطًا لنموذج "المهمة".

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

في Component ID ، حدد الجدول المطلوب.

في Title ، أدخل اسم الجدول - To Do List.

ضبط Style - الأوسط.

قم بتشغيل Pagination.

قم بتشغيل Bordered .

من الضروري تشغيل Visible . خلاف ذلك ، لن يتم رؤية الجدول.

قم بتشغيل Loading.

اضبط Current page على 1 لترى الصفحة الأولى.

Records for page محددة بـ 5.

يتم تعيين Total records على 10 ، على سبيل المثال.

يمكن حفظ جميع الإعدادات الآن.

المزيد حول Loading

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

لذلك يلزم وجود عملية تجارية من شأنها تغيير خصائص الجدول بعد اكتمال تحميل البيانات BP.

تنتهي كتلة تحميل البيانات بكتلة Table update data ، وهناك مشغل onDataUpdate سيتم تشغيله بعد تحديث الجداول.

قم بتعيين BP جديدة لها. خذ كتلة Table update properties لتغيير حقل واحد فقط وإيقاف التحميل.

يمكن حفظ جميع التغييرات ، وسيتم عرض الجدول كما هو مطلوب.

مشغل onFilter

دعنا نلقي نظرة فاحصة على مشغل onFilter . يعمل فقط عند تمكين ترقيم الصفحات ، عندما يكون هناك انتقال عبر صفحات الجدول. يحتوي على مجالين إضافيين:

  • _limit - ينقل عدد السجلات المعروضة في الجدول في وقت تشغيل ترقيم الصفحات ؛
  • _offset - يحدد السجل الذي سيتم بدء المعالجة منه.

لنقم بإعداد BP لشرح كيفية عمل مشغل onFilter .

يعمل مشغل onFilter عندما يكون هناك انتقال من صفحة إلى أخرى في جدول متعدد الصفحات (ترقيم الصفحات).

لنأخذ جدولاً من ثلاث صفحات ، كل منها يحتوي على خمس سجلات.

قم بإنشاء BP الذي سيعرض البيانات من حقول onFilter في الواجهة.

للقيام بذلك ، قم بتحويل _limit و _offset باستخدام كتل to string ومرر النتيجة إلى كتل notification .

عند الانتقال من الصفحة الأولى إلى الثانية ، ستظهر رسالتان: _limit - 5 و _offset - 5. وهذا يعني أنه كان هناك خمسة سجلات في الصفحة السابقة من الجدول (_limit), ويقوم الجدول الآن بمعالجة السجلات بدءًا من الخامس (_offset) . في حالة الانتقال إلى الصفحة الثالثة ، ستكون هناك الرسائل التالية: _limit - 5 (لأن الصفحة السابقة بها أيضًا خمسة سجلات) و _offset - 10 (لأن الجدول يعالج السجلات بدءًا من 10).

onRowClick and onRowDoubleClick triggers.

لنلقِ نظرة على مشغلات onRowClick و onRowDoubleClick . تعمل عندما يكون هناك نقرة أو نقرة مزدوجة على صف. تحتوي هذه المشغلات على حقل Record ID الذي يخزن معرف السجل الذي تم النقر فوقه. يفيد في إنشاء جداول مرتبطة وبناء تسلسلات هرمية

لإظهار كيفية عمل هذا المشغل ، فلنقم بإعداد BP الذي سيعرض للمستخدم رقم السطر الذي نقر عليه.

To string وكتل Notification مطلوبة. في To string ، قم بتمرير قيمة حقل Record ID . وبعد التحويل ، قم بتمرير القيمة الناتجة إلى حقل العنوان في كتلة Notification .

قراءة المزيد أفضل الممارسات

استكشاف أخطاء العمليات التجارية وإصلاحها
استكشاف أخطاء العمليات التجارية وإصلاحها
كيفية البحث عن الأخطاء وإصلاحها في التطبيق
التصحيح والتسجيل
التصحيح والتسجيل
كيفية تسجيل البيانات واستخدامها لتصحيح الأخطاء في AppMaster
Inspired to try this yourself?

قم بتنمية مهاراتك بدون كود مع AppMaster Team!

تحقق من دوراتنا وتعلم خطوة بخطوة كيفية استخدام AppMaster على أكمل وجه!

المزيد من موارد AppMaster

حل أي مشكلة بمساعدة خبرائنا.
وفر الوقت وركز على إنشاء تطبيقاتك.

ساعد لدعم

حل أي مشكلة بمساعدة خبرائنا.

الحصول على الدعم

كابل بيانات

معلومات مفيدة حول البدء والميزات.

اقرأ المستندات

دروس الفيديو

تعلم كيفية استخدام AppMaster مع دروس الفيديو.

شاهد البرامج التعليمية

مجتمع المستخدمين

كن جزءًا من مجتمعنا واكتشف المزيد.

الانضمام إلى المجتمع