Droptables: تصميم الطاولة

1. التنسيق في جدول

يمكنك من خلال شريط الأدوات تعيين نمط الخلية مثل: نوع الخط، وحجم الخط، ونمط النص، ولون خلفية الخلية، ولون النص، ومحاذاة الخلية الأفقية والرأسية،... ويمكن تطبيق ذلك على خلية واحدة أو عدة خلايا.

يمكنك تحديد ارتفاع الصف وعرض العمود بالبكسل. انتقل إلى قائمة "تنسيق" > "تطبيق حجم العمود/السطر" ، ثم اختر "تغيير حجم العمود" أو "تغيير حجم الصف" . في النافذة المنبثقة، يمكنك تحديد النطاق وتعيين قيمة البكسل للأعمدة أو الصفوف. انقر على "تم" لإنهاء العملية.

2. خيارات المظهر والفرز

في كل جدول، ستجد اختيار المظهر في قائمة . ما عليك سوى النقر على المظهر لتطبيقه.

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

تتيح لك خاصية الفرز إمكانية فرز البيانات باستخدام AJAX في واجهة المستخدم. يمكنك الاطلاع عليها من خلال قائمة "تنسيق" > "فرز" .

تُعنى محاذاة الجدول بمحاذاة العنصر div الذي يحتوي على الجدول بأكمله، مثلاً توسيط الجدول بأكمله. يمكنك إيجادها في قائمة "تنسيق" > "محاذاة الجدول" .

يتوفر تمييز الخلايا كخيار إضافي. يمكنك تفعيل خيار "السطر" أو "العمود" أو كليهما في الإعدادات . هذا الخيار مُعطّل افتراضيًا. يمكنك ضبط لون وشفافية التمييز.

3. أضف تلميحًا على الخلايا

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

يمكنك ضبط عرض التلميح بالبكسل. سينقلك ذلك إلى تلميح يحتوي على محرر للتعديل.

أضف المحتوى واحفظه، لقد انتهيت، ستظهر تلميحات الأدوات على الجانب العام عند تمرير مؤشر الماوس.

4. إدارة قوائم التحكم بالوصول (ACL) والواجهة الأمامية

يمكنك إدارة جداولك من واجهة جوملا الأمامية. من مدير قوائم جوملا، أضف عنصر قائمة جديد إدارة الجداول" كنوع Droptables frontend - Default" كقالب.

هذا ما يمكنك رؤيته في مدير Droptables من واجهة المستخدم.

يمكنك استخدام قائمة التحكم بالوصول (ACL) لمجموعة مستخدمي جملة للتحكم في إجراءات تعديل الجداول. أولًا، لتحديد من يُسمح له بعرض الجداول، انتقل إلى "أدوار المستخدمين" في Droptables .

يمكنك تعيين مالك للجدول من قائمة الجدول > الوصول إلى الجدول.

5. تجميد الصفوف والأعمدة

تجميد الأعمدة

تتوفر خاصية تجميد الأعمدة في قائمة " تنسيق" > "خيارات الاستجابة" . يمكنك تجميد ما يصل إلى 5 أعمدة، ويتم احتسابها من العمود الأول.

لتجميد الأعمدة/الصفوف، هناك خيار إضافي يسمح لك بتحديد ارتفاع الجدول (لأن حاوية الجدول الخاصة بك قد يكون لها ارتفاع لانهائي).

عندما تختار العمود المراد تجميده، ستتمكن من التمرير في جدولك وسيتم عرض العمود الثابت دائمًا.

تجميد الصفوف

يمكنك العثور عليه في قائمة التنسيق > رأس الجدول ، ومن هنا يمكنك تشغيل الخيار وتعيين الصفوف للتجميد (حتى 5 صفوف).

إذا كنت ترغب في ضبط ارتفاع الجدول، فيرجى العودة إلى خيارات الاستجابة.

ثم سيتم تجميد الصف الأول في واجهة المستخدم وفقًا للإعدادات.

6. تصفية بيانات الأعمدة

يتوفر خيار التصفية في قائمة التنسيق > عوامل التصفية . يمكنك تفعيله بالنقر لتمكين حقول تصفية البيانات العامة.

مثال على المرشحات:

7. حشو الخلايا ونصف قطر الحدود

يمكنك العثور على أيقونة الحدود في شريط الأدوات والتي تساعد في ضبط الحشو ونصف قطر الحدود في الخلية.

8. CSS مخصص

لننتقل إلى مستوى آخر. إذا كنت مصمم مواقع ويب ولديك مهارات في تحرير CSS، فستتمكن من إضافة CSS من خلال قائمة التنسيق > CSS المخصص .

تحتوي الخلايا والصفوف والأعمدة على إحداثيات لتحديد كل منها وتطبيق أنماط CSS مخصصة عليها. R هو الصف، وC هو العمود. هنا، الصف 1 (r1)، العمود 4 (c4) = dtr1 dtc4

يتم تلوين كود CSS باستخدام أداة Code Mirror. يمكن أن يكون كود CSS مختصراً، وهو يعمل أيضاً!

9. جداول جوملا المتجاوبة

هل تستجيب جداولي للأجهزة الصغيرة أم أنها تستخدم خاصية التمرير؟

إخفاء الكولونات

Droptables إدارة التصميم المتجاوب باستخدام أداة تحديد الأولويات كخيار إضافي. بشكل افتراضي، تكون ميزة التصميم المتجاوب مُعطّلة، مما قد يؤدي إلى ظهور محتوى زائد (وهو يعمل بكفاءة عالية على الأجهزة المحمولة). لتفعيل إخفاء الأعمدة ، انتقل إلى قائمة التنسيق > خيارات التصميم المتجاوب.

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

جدول مزود بخاصية التمرير (أفضل لعدد قليل من الأعمدة)

جدول مع إخفاء الأعمدة (أفضل لعدد كبير من الأعمدة)

عنوان متكرر

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

ستتوفر خيارات للتخصيص وفقًا لطلبك:

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

بعد ذلك، يمكنك رؤية كيف سيبدو الجدول في واجهة المستخدم.

10. تنزيل الجدول

لمشاركة جدولك مع العامة، انتقل إلى قائمة "الجدول" ، ثم فعّل خيار " تصدير ملف إكسل" . سيكون نوع الملف *.xlsx عند تنزيله من واجهة المستخدم.

11. ترقيم الصفحات

يمكنك العثور على هذه الميزة في قائمة "تنسيق" > "ترقيم الصفحات" في كل إصدار من الجدول. استخدم زر التبديل لتفعيلها واختيار عدد الصفوف المراد عرضها في الصفحة.

12. تنسيق الخلايا المفردة 

يمكنك ضبط التنسيق: التاريخ والوقت، العملات، الأرقام لخلية واحدة أو أكثر في Droptables . أولاً، حدد خلية واحدة أو عدة خلايا. ثم انتقل إلى قائمة التنسيق > التاريخ والوقت.

بعد ذلك، مع العملات والأرقام بنفس الطريقة.

13. طباعة الجدول في واجهة المستخدم

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