الجدول

تتكون الجداول من أعمدة قابلة للتكوين ويمكنها سرد قيم كائنات SKOOR أو بيانات من مصدر بيانات خارجي

image-20240730-110122.png

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

المرشحات

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

داخل مربع حوار التصفية: حدد بسهولة عوامل مثل "يحتوي على" و"يساوي" و"أكبر من" وما إلى ذلك، وأدخل القيم دون الحاجة إلى حفظ صيغة التعبير:

  • مرشحات النطاق: بالنسبة للأعمدة الرقمية والتاريخية على وجه التحديد، يمكنك بسهولة تحديد النطاقات (من..إلى)

  • أدوات اختيار التاريخ والوقت: أدوات اختيار مدمجة لأعمدة التاريخ والطابع الزمني تجعل اختيار نطاقات الوقت أمرًا سهلاً

  • التحديد المتعدد: حدد قيم متعددة من قائمة لاستعلامات "IN"

image-20251215-094546.png

أحرف البدل

تدعم جميع فلاتر النص أحرف البدل *. وهذا يسمح بالبحث عن أجزاء من سلسلة.

  • Dev*

  • Dev*ment

  • *ment

  • 100*

  • 2022*

الأعمدة التي تحتوي على أرقام أو تواريخ

  • IN(x,y,z)
    حدد قيمة واحدة أو عدة قيم. تتضمن النتائج فقط السجلات التي تتطابق فيها البيانات الموجودة في العمود مع القيمة الموجودة في المرشح.

  • NOT(IN(x,y,z))
    عكس in

  • BETWEEN(x,y)      
    حدد قيمتين. تتضمن النتيجة فقط السجلات التي تكون فيها البيانات في العمود بين القيمتين المحددتين.

  • >
    حدد قيمة واحدة. تتضمن النتائج فقط السجلات التي تكون فيها البيانات في العمود أكبر من القيمة في الفلتر.

  • <
    حدد قيمة واحدة. تتضمن النتائج فقط السجلات التي تكون فيها البيانات الموجودة في العمود أقل من القيمة الموجودة في عامل التصفية.

  • >=
    حدد قيمة واحدة أو عدة قيم. تتضمن النتائج فقط السجلات التي تكون فيها البيانات في العمود أكبر من أو مساوية للقيمة الموجودة في عامل التصفية.

  • <= 
    حدد قيمة واحدة أو عدة قيم. تتضمن النتائج فقط السجلات التي تكون فيها البيانات في العمود أقل من أو مساوية للقيمة الموجودة في عامل التصفية.

الأعمدة التي تحتوي على نص

  • AND(x,y,z)
    حدد سلسلتين أو أكثر من السلاسل أو الأحرف. تتضمن النتائج فقط السجلات التي تحتوي على جميع السلاسل المحددة.

  • OR(x,y,z)
    حدد سلسلتين أو أكثر أو أحرفًا. تتضمن النتائج فقط السجلات التي تحتوي على سلسلة واحدة على الأقل من السلاسل المحددة.

  • NOT(x)
    حدد حرفًا أو سلسلة. تتضمن النتائج فقط السجلات التي لا تحتوي على السلسلة المحددة.

يمكن أيضًا تداخل عوامل تصفية النص.

إعادة تعيين الفلاتر

يمكن إعادة تعيين جميع الفلاتر (استعادة الإعدادات الافتراضية) أو مسحها باستخدام الرابط المقابل أعلى الجدول أو في مربع حوار الفلتر:

image-20251215-093504.pngimage-20251215-093553.png

المرشحات المضمنة والقيم الافتراضية

يمكن عرض الفلاتر مضمنة في رأس العمود إذا تم تحديد "إظهار في الرأس" في تكوين العمود، والذي يعرض أيضًا حقول التكوين القديمة "مطابقة النص" و"الفلاتر الافتراضية".

image-20251215-093925.png

بالنسبة للفلاتر المعروضة في مربع حوار الفلتر، يوجد حقل فلتر افتراضي أكثر سهولة في الاستخدام.

image-20251215-094141.png

رؤوس وأعمدة ثابتة

يمكن تكوين عدد الرؤوس والأعمدة الثابتة في إعدادات الجدول:

image-20240730-084047.png

التجميع والتجميع الفرعي

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

أنواع الأعمدة

لمزيد من التفاصيل حول تحرير الأعمدة، راجع القسم أدناه تفاصيل العمود

يمكن تكوين أنواع الأعمدة التالية:

الإعداد

الوصف

الاسم

يعرض اسم كائن SKOOR

النوع

يعرض نوع كائن SKOOR

النوع الفرعي

يعرض النوع الفرعي لكائن SKOOR

الحالة

يعرض حالة كائن SKOOR. يمكن عرض الحالة على شكل مصباح أو نص بسيط. يؤدي النقر على الحالة إلى فتح سجل حالة الكائن

إحصائيات الحالة

يعرض النسبة المئوية لحالة معينة خلال نطاق زمني محدد لكائن SKOOR (يمكن تخصيص الحالة والنطاق الزمني)

الخاصية

يعرض خاصية معينة لكائن SKOOR

العد

يحسب عدد كائنات SKOOR بناءً على عامل تصفية أو عملية بحث

القيمة

يعرض قيمة كائن SKOOR

اسم الجهاز

إذا كان الصف يحتوي على كائن من نوع مهمة، يتم عرض اسم الجهاز ذي الصلة

الأصل

يعرض الكائن الأصلي للكائن الحالي

الأسباب

سبب الحالات غير المتساوية مع OK

رسالة

الرسائل التي تم إنشاؤها من المهام

اختر

يعرض علامة للاختيار

الصيانة

يعرض عمليات الصيانة المخطط لها والجارية لكائن SKOOR

مصدر البيانات

يعرض قيمة عمود لصف مصدر البيانات

استعلام البيانات

يعرض قيمة عمود استعلام البيانات

التعبير

يعرض تعبيرًا محددًا في صف الجدول

تعليق

يضيف تعليقات توضيحية إلى صف الجدول


تحرير أداة الجدول:

الأساسيات

تنقسم تهيئة الجدول إلى قسمين.

  • في الجزء الأول، يتم تكوين الإعدادات العامة للجدول مثل رأس الجدول وعدد الصفوف في كل صفحة أو وظائف التجميع

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

    • يمكن تحميل كائنات SKOOR باستخدام مرشح الكائنات. كل كائن يتم إنشاؤه بواسطة المرشح ينتج عنه صف واحد في الجدول

    • يمكن الاستعلام عن قواعد البيانات باستخدام نوع البحث "مصدر البيانات" (الجداول أو طرق العرض) أو "استعلام البيانات" (SQL).

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

image-20240405-150409.png

الإعداد

الوصف

حجم الصفحة

عدد الصفوف المرئية في كل صفحة. إذا كان هناك المزيد من الصفوف، يتم عرض محدد الصفحات

إظهار جميع الصفحات في التقرير

إذا لم يتم تحديد هذا الخيار، فستظهر الصفحة الأولى فقط من الجدول المقسم إلى صفحات في التقارير

إظهار الصفوف الفارغة

اعرض الصفوف الفارغة إذا كان عدد الصفوف أقل من حجم الصفحة.

إظهار العنوان

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

رأس ثابت

يظل العنوان مرئيًا عند التمرير الرأسي للصفوف. يتطلب هذا عادةً تكوين ارتفاع عنصر واجهة المستخدم لتمكين التمرير داخله.

لون خلفية الصفوف البديلة

يتم عرض الصفوف المتجاورة بألوان مختلفة قليلاً لزيادة سهولة القراءة

عدد الأعمدة الثابتة

عدد الأعمدة بدءًا من اليسار التي ستظل مرئية عند التمرير أفقيًا

صف مجمّع

يضيف صفًا بالقيم المجمعة إلى الجدول.

  • ينطبق فقط على الأعمدة الرقمية مع تمكين عرض القيمة المجمعة

موضع الصف المجمع

عرض القيم المجمعة في أعلى الجدول أو أسفله

عدد الأعمدة الفرعية المجمعة

يضيف صف تجميع بناءً على عمود واحد أو أكثر

  • إذا تم تعيينه على عمودين، فسيتم إضافة عنوان صف التجميع إلى العمود الثالث، متبوعًا بالقيم المجمعة

  • لن تتم إضافة عناوين التجميع مثل المجموع الفرعي أو المتوسط إلى الأعمدة من النوع الرقمي أو التاريخي

  • يمكن تشغيل التجميع أو إيقافه في تكوين العمود

إظهار التجميعات الفرعية المتداخلة

يضيف إجمالي فرعي فوق مجموعة قيم مجمعة. يوضح المثال التالي إجمالي جميع الفروع بالإضافة إلى الإجمالي الفرعي لكل فرع وقسم 

الاحتفاظ بالفلاتر

إذا كانت خيار "الاحتفاظ بالفلاتر" نشطًا، فلن يتم مسح فلاتر الأعمدة الديناميكية عند تغيير الصفحة

السماح بالتصدير

يمكن تصدير البيانات إلى تنسيقات CSV أو XLSX

انقر فوق الإجراء

حدد الإجراء المطلوب تنفيذه عند النقر فوق عنصر في الجدول.

تتوفر العناصر النائبة التالية:

${params.<paramName>}

${object}

${customObject}

${columns.<columnName>}

${columnName}

${value}

توفير معلمة تصفية الجدول

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

اسم معلمة تصفية الجدول

اسم معلمة URL لفلتر الجدول. الافتراضي هو tableFilter.

مصدر البيانات

الإعداد

الوصف

نوع البحث

حدد مصدر البيانات المطلوب. تتغير حقول جزء مصدر البيانات من التكوين وفقًا لنوع البحث

كائن، كائنات أدناه

حدد كائن SKOOR واحدًا أو أكثر باستخدام عوامل تصفية الكائنات الشائعة

مصدر البيانات

حدد قاعدة بيانات. يتم تكوين قواعد البيانات في قسم البيانات والكائنات

جدول

حدد أحد الجداول أو طرق العرض لقاعدة البيانات

استعلام البيانات

حدد استعلام بيانات. يتم تكوين استعلامات البيانات في قسم البيانات والكائنات

تطبيق استعلام مصفوفة التصفية

إذا تم تكوين أداة مصفوفة التصفية على لوحة المعلومات، يتم تطبيق عوامل التصفية الخاصة بتلك الأداة إذا كانت أعمدة كلتا الأداتين متطابقة

استعلام البحث

حدد عوامل التصفية كما هو موضح في محرر استعلام مصدر البيانات

التعليقات

حدد السماح بالتعليقات التوضيحية لتمكين ميزة التعليقات التوضيحية. تأكد من تعريف عمود واحد أو أكثر كمفتاح هنا، والذي يُستخدم لتعيين كل تعليق توضيحي إلى صف بيانات:

الأعمدة

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

افتح الإعدادات بالنقر فوق عنصر عمود:

image-20240830-125521.png

الإعداد

الوصف

النوع

يعتمد نوع العمود على نوع البحث المحدد في قسم مصدر البيانات في عنصر واجهة المستخدم

الاسم

اسم العمود. يتم عرضه في رأس الجدول

العنوان

حقل تعبير لاستخدام العناصر النائبة كعنوان عمود، إذا كان فارغًا، فسيتم استخدام القيمة الموجودة في الاسم.

تشغيل عند النقر المزدوج

لا يتم تشغيل الإجراء المحدد في قسم ClickAction إلا بالنقر المزدوج

العرض

العرض الدقيق بالبكسل أو النسبة المئوية (اختياري)

الحد الأدنى للعرض

الحد الأدنى لعرض العمود بالبكسل أو النسبة المئوية (اختياري)

محاذاة

محاذاة النص إلى اليسار أو التوسيط أو اليمين

ارتفاع الرأس

ارتفاع العنوان بالبكسل

نوع الفلتر

نوع الفلتر الديناميكي

  • لا

  • تحديد (تصفية حسب القيم المتاحة من الجدول الحالي)

  • نص (تصفية حسب النص)

  • تحديد متعدد

عرض في العنوان

متاح فقط إذا تم تعيين نوع التصفية على "text" أو "select".
يسمح بعرض التصفية في رأس العمود بدلاً من مربع حوار التصفية.

إذا تم تحديده، يعرض مطابقة النص القديمة والمرشح الافتراضي.

إذا لم يتم تحديده، يظهر حقل مشغل/قيمة افتراضية مدمج.

مطابقة النص

متاح فقط إذا تم تعيين نوع التصفية على "text".

يحدد سلوك مرشح الجدول.

  • exact (تطابق النص): يقوم بمطابقة دقيقة.

  • contains (تطابق النص): يقوم بالمطابقة إذا كانت القيمة تحتوي على نص التصفية.

  • starts_with (تطابق النص): يطابق إذا كانت القيم تبدأ بنص التصفية.

  • ends_with: يطابق إذا كانت القيم تنتهي بنص التصفية.

يمكن استخدام حرف البدل * في جميع أوضاع مطابقة النص (حتى في exact)

التصفية الافتراضية

يمكن ضبط نص التصفية الديناميكي مسبقًا. يرجى ملاحظة أن التصفية تكون نشطة حتى إذا لم يتم عرض العمود

أولوية الفرز

قم بتعيين أولوية الفرز لجعل العمود قابلاً للفرز. يتم فرز الصفوف وفقًا لأولوية الفرز. إذا كان لعمودين نفس أولوية الفرز، يتم تحديد الأولوية حسب أسبقية العمود

اتجاه الفرز الافتراضي

فرز تصاعدي أو تنازلي بشكل افتراضي

إظهار

إما إظهار العمود (الافتراضي) أو عدم إظهاره. يرجى ملاحظة أن المرشحات الافتراضية نشطة حتى بالنسبة للأعمدة المخفية

إخفاء إذا كان فارغًا

إخفاء العمود إذا لم يكن هناك صف في الجدول يحتوي على قيمة لهذا العمود

إخفاء على الشاشات الصغيرة

إخفاء العمود إذا كان لا يتناسب مع الشاشة

إخفاء التكرارات

إخفاء القيم المتكررة. يمكن استخدام هذا لتحقيق نوع من التجميع:

دمج الصفوف المكررة

إظهار صف واحد فقط من جميع الصفوف التي تحتوي على نفس القيمة في هذا العمود 

إظهار القيمة المجمعة

تشغيل أو إيقاف تشغيل هذه القيمة في صفوف التجميع أعلى أو أسفل الجدول

اتجاه العنوان

رأس أفقي أو عمودي. إذا اخترت عموديًا، فيجب عليك تعيين ارتفاع الرأس إلى قيمة مناسبة (لأسباب فنية، لا يمكن تحديد حجم الرأس تلقائيًا)

عرض كـ HTML

تفسير علامات HTML في هذا العمود

فئة شرطية

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

كائن مخصص

اضبطه لاستخدام كائن SKOOR مخصص

إعدادات أنواع الأعمدة

الاسم

يعرض اسم كائن الصف. لا توجد إعدادات متاحة.

النوع

يعرض نوع كائن الصف. لا توجد إعدادات متاحة.

النوع الفرعي

يعرض النوع الفرعي لكائن الصف. لا توجد إعدادات متاحة.

الحالة

يعرض حالة كائن الصف على شكل مصباح أو نص.

الإعداد

الوصف

نوع العرض

حدد كيفية عرض حالة كائن SKOOR:

  • مصباحimage-20240903-073725.png

  • التنسيقimage-20240903-073739.png

عمود

العمود الذي يمكن العثور فيه على الحالة.

جميع الحالات في التحديد

عرض جميع الحالات في الفلتر.

image-20240903-171330.png

عندما يعرض نوع البحث كائنات SKOOR، يمكن تعريف إجراء النقر للعمود. من خلال تنشيط كائن مخصص، يمكنك عرض حالة كائن SKOOR عشوائي (محدد بواسطة مرشح الكائن). 

عندما يكون نوع البحث هو مصدر البيانات أو استعلام البيانات، حدد العمود الذي يحتوي على الحالات المطلوبة من القائمة المنسدلة "عمود":

إذا تم استخدام عمود الحالة في جدول قائم على مصدر البيانات أو استعلام البيانات، يمكن تعيين القيم إلى الحالات (SKOOR Dashboard >= 7.1.2).

لتعيين قيم متعددة لحالة واحدة، يمكن تعريف القيم كقائمة مفصولة بفواصل.

إحصائيات الحالة

يحسب النسبة المئوية للكائن الموجود في الحالة المحددة. إذا تم تكوين كائن مخصص في العمود، فيمكن تحديد أكثر من كائن واحد بواسطة عامل تصفية البحث. في هذه الحالة، يتم تجميع جميع الكائنات بواسطة دالة التجميع المحددة.

الإعداد

الوصف

الحالة

حدد الحالة التي تريد الحصول على إحصائياتها

الصيانة على ما يرام

حدد ما إذا كان يجب اعتبار الصيانة على ما يرام

وظيفة التجميع

حدد وظيفة التجميع التي سيتم استخدامها في حساب إحصائيات الحالة.

خاصية

يعرض خاصية كائن الصف.

عد

يحسب الكائنات استنادًا إلى مرشح الكائنات

يقبل حقل الشروط العناصر النائبة المعتادة.

للحصول على مرجع إلى كائن الصف، يمكن استخدام مقتطف الشرط التالي:

{
  "item": "id",
  "operator": "eq",
  "expression": %id%
}

من الممكن أيضًا تعيين فئة مخصصة لعدد معين. وهذا مفيد بشكل خاص لتلوين الأعداد الأكبر من قيمة محددة:

فئات مفيدة:

  • غامق

  • رئيسي

  • ثانوي

  • تحذير

  • موافق

قيمة

يعرض قيمة كائن الصف. من خلال تنشيط كائن مخصص، يمكنك عرض قيمة كائن SKOOR عشوائي (يتم تحديده بواسطة مرشح الكائن). 

يمكن تحديد القيمة من خلال مفتاح القيمة الخاص بها. تقبل قيم الإرجاع وقيم السلسلة المؤشر في صيغة المصفوفة (على سبيل المثال returnValue[0]) أو اسم الوحدة المحددة.

الإعداد

الوصف

اسم القيمة

حدد اسم قيمة كائن SKOOR.

إظهار الوحدة

حدد ما إذا كنت تريد عرض وحدة القياس لتلك القيمة أم لا.

دالة التجميع

حدد دالة التجميع التي سيتم تطبيقها على القيمة.

اسم الجهاز

يعرض اسم الجهاز ذي الصلة إذا كان الكائن مهمة.

الأصل

يعرض الكائن الأصلي للكائن الحالي.

الأسباب

سبب وجود الكائنات في حالة مثل رئيسية أو ثانوية أو تحذير.

رسالة

يعرض رسالة معلومات المهمة إن كانت متوفرة.

تحديد 

يضيف خيارات لإضافة أو إزالة الصيانة بالإضافة إلى مربع اختيار لكل صف.

عمليات الصيانة

يعرض عمليات الصيانة الحالية.

مصدر البيانات

يعرض قيمة عمود من جدول مصدر البيانات.

يمكن تعيين الدالة التجميعية لتجميع قيم العمود.

إذا كان العمود من النوع العائم، فمن الممكن تعيين دقة القيمة.

الإعداد

الوصف

العمود

حدد العمود المطلوب من مصدر البيانات.

وحدة المصدر

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

وحدة الهدف

الوحدة المستهدفة لتحويل القيم إليها.

إظهار الوحدة

عرض الوحدة في رأس الجدول.

دالة التجميع

حدد دالة تجميع لتطبيقها على قيمة العمود.

الدقة

تعيين دقة القيمة (للأرقام العائمة).

تنسيق الوقت

حدد تنسيق الوقت المفضل.

استعلام البيانات

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

التعبير

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

  • ${columns.<اسم العمود>}

  • ${columns[“<اسم العمود”]}

كـ <اسم العمود>، اضبط الاسم المكون في العمود المعني بالضبط (على سبيل المثال، حرف كبير في البداية)

يرجى زيارة صفحة العناصر النائبة للحصول على مزيد من التفاصيل.

التعليق

باستخدام هذا النوع من الأعمدة، يمكن للمستخدمين إثراء بيانات مصدر البيانات أو استعلام البيانات بالتعليقات التوضيحية. هناك خمسة أنواع من أعمدة التعليقات التوضيحية:

الإعداد

الوصف

نوع العرض

قائمة منسدلة تحتوي على نوع التعليق التوضيحي المطلوب:

  • زر

  • الحالة

  • الوصف

  • تم إنشاؤه

  • المستخدم

زر

يضيف زرًا إلى كل صف من الجدول لإضافة تعليقات توضيحية.

كما يمكن تكوين مجموعة ثابتة من الحالات هنا مع إمكانية الانتقال بينها. انقر فوق الزر "إضافة" لإضافة حالات:

يجب تكوين انتقال من الحالة غير المحددة. وإلا، فلن يمكن إضافة أي تعليقات توضيحية على الإطلاق

الحالة

عرض حالة التعليق التوضيحي الحالية لكل صف

الوصف

عرض وصف التعليق التوضيحي الحالي

تم

عرض تاريخ إنشاء التعليق التوضيحي

المستخدم

عرض المستخدم الذي أنشأ التعليق التوضيحي

يرجى زيارة صفحة التعليقات التوضيحية لمزيد من التفاصيل.

إعدادات الأعمدة المتقدمة

إجراءات النقر

اعتمادًا على نوع العمود، يمكن تعريف إجراءات النقر للتفصيل أو للتنقل إلى مكان ما عند النقر. انظر إجراءات النقر للحصول على مزيد من التفاصيل.

تصميم الخلايا

image-20240903-103023.png

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

الإعداد

الوصف

فئة خلية الرأس

توفير اسم فئة للرأس (يمكن استخدامه في نمط CSS)

نمط خلية الرأس

حدد نمطًا محددًا للرأس (في CSS)

فئة خلية الجدول

أدخل اسم فئة للجدول بأكمله (يمكن استخدامه في تنسيق CSS)

نمط خلية الجدول

تحديد نمط معين للجدول بأكمله (في CSS)

اتجاه العنوان

رأس أفقي أو عمودي. إذا اخترت عمودي، فيجب عليك تعيين ارتفاع الرأس إلى قيمة مناسبة (لأسباب فنية، لا يمكن تحديد حجم الرأس تلقائيًا)

تجاوز

حدد المعالجة الافتراضية للتجاوزات:

  • لف

  • علامة الحذف

تصميم الجداول

رمز يعتمد على المحتوى

منذ إصدار SKOOR Dashboard 7.1.2، أصبح من الممكن استخدام عمود "state" (تحديد حالة) في الجداول المستندة إلى مصدر البيانات واستعلام البيانات. يمكن تعيين القيم إلى الحالات وعرض المصابيح المقابلة. انظر https://skoorag.atlassian.net/wiki/spaces/DOC/pages/494473/Table#State لمزيد من التفاصيل.

باستخدام الميزة التي تم تقديمها مع SKOOR Dashboard 7.1.2، سيبدو المثال نفسه أدناه كما يلي:

image-20240809-111948.png

المشكلة

image-20240809-105332.png

يجب استبدال محتوى خلية الجدول (على سبيل المثال OK) برمز (على سبيل المثال مصباح).

الحل

  1. تعيين فئة خلية الجدول في إعدادات العمود

image-20240809-105709.png

image-20240809-105813.png

في المثال أعلاه، يتم أخذ قيمة الفئة من العمود الثالث في كل صف. في المثال، سيؤدي ذلك إلى تعيين فئة إلى status statusOK.

  1. أضف بعض CSS في مربع حوار إعدادات لوحة التحكم

image-20240809-110249.png
/* Set a lightbulb as default background image for tds with class status */
td.status {
  background-image: url('assets/images/lightbulb-grey.svg');
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center 6px;
}

/* 
 * Absolute positioned elements (the tooltip in this case) always take the 
 * next not static positioned element as the anchor point
 */
td.status > div {
  position: relative;
  overflow: visible; 
}

/* 
 * Makes the inner td absolute positioned and style the span that it looks like a tooltip.
 * Initially, the tooltip is hidden.
 */
td.status > div > span {    
    padding: 2px;
    display:none;
    position: absolute;
    top: -3px;
    left: 30px;    
    text-align: left;
    background-color: #eff0f1;
    border: 1px solid #c7cbce;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    white-space: nowrap;
}

/* Shows the tooltip on hover */
td.status:hover > div > span {
  display: block;
}

/* 
 * Defines the background image for the defined value. 
 * You need one of those for each possible content, undefined values
 * will display the default image.
 */
td.statusOK {
  background-image: url('assets/images/lightbulb-green.svg');
}

سيؤدي ذلك إلى ظهور رمز جميل يعرض النص الأصلي عند التمرير فوقه.

يرجى ملاحظة أنه نظرًا لأننا تعاملنا فقط مع فئة statusok، فإن باقي الفئات تحمل جميعها المصباح الرمادي القياسي

image-20240809-110459.png

بدلاً من استخدام عنوان URL للملف للصور، من الممكن أيضًا تضمين الصور مباشرة في CSS باستخدام عناوين URL للبيانات:

td.statusOK {
  background-image: url('data:image/png;base64,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');
}

ستكون النتيجة كما يلي:

image-20240809-111651.png