الجدول

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

image-20240730-110122.png

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

المرشحات

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

أحرف البدل

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

  • Dev*

  • Dev*ment

  • *ment

  • 100*

  • 2022*

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

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

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

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

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

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

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

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

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

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

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

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

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

إعادة تعيين المرشحات

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

image-20240730-083841.png

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

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

image-20240730-084047.png

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

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

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

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

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

الإعداد

الوصف

الاسم

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

النوع

يُظهر نوع كائن SKOOR.

النوع الفرعي

يُظهر النوع الفرعي لكائن SKOOR

الحالة

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

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

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

الخاصية

يُظهر خاصية محددة لكائن SKOOR

العد

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

القيمة

يُظهر قيمة كائن SKOOR

اسم الجهاز

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

الأصل

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

الأسباب

سبب الحالات التي لا تساوي موافق

الرسالة

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

تحديد

إظهار علامة للتحديد

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

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

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

يُظهر قيمة عمود لصف مصدر البيانات

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

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

تعبير

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

التعليق التوضيحي

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


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

الأساسيات

ينقسم تكوين الجدول إلى قسمين.

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

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

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

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

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

image-20240405-150409.png

الإعداد

الوصف

حجم الصفحة

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

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

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

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

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

إظهار الرأس

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

رأس ثابت

يظل الرأس مرئيًا عند تمرير الصفوف عموديًا

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

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

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

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

صف تجميعي

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

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

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

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

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

إضافة صف تجميع يستند إلى عمود واحد أو أكثر

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

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

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

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

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

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

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

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

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

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

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

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

الإعداد

الوصف

نوع البحث

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

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

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

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

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

الجدول

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

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

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

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

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

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

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

التعليقات التوضيحية

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

الأعمدة

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

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

image-20240830-125521.png

الإعداد

الوصف

النوع

نوع العمود الذي يعتمد على نوع البحث المحدد في قسم مصدر البيانات في الأداة

الاسم

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

العنوان

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

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

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

العرض

العرض الدقيق بالبكسل أو % (اختياري)

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

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

محاذاة

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

ارتفاع الرأس

ارتفاع الرأس بالبكسل

نوع المرشح

نوع المرشح الديناميكي

  • لا شيء

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

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

  • متعدد التحديد

مطابقة النص

متاح فقط إذا تم تعيين نوع عامل التصفية على 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 >= 7.1.2).

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

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

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

الإعداد

الوصف

الحالة

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

الصيانة على أنها موافق

تعيين ما إذا كان يجب اعتبار الصيانة على أنها موافق

الدالة الإجمالية

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

خاصية

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

العد

عد الكائنات بناءً على عامل تصفية الكائن

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

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

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

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

فئات مفيدة

  • جريئة

  • رئيسي

  • ثانوي

  • تحذير

  • موافق

القيمة

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

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

الإعداد

الوصف

اسم القيمة

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

إظهار الوحدة

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

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

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

اسم الجهاز

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

الأصل

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

الأسباب

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

الرسالة

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

تحديد

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

الصيانة

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

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

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

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

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

الإعداد

الوصف

العمود

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

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

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

الدقة

قم بتعيين دقة القيمة (للعوامات).

تنسيق الوقت

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

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

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

التعبير

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

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

  • ${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

يجب استبدال محتوى خلية الجدول (على سبيل المثال موافق) برمز (مثل المصباح الكهربائي).

الحل

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

image-20240809-105709.png

image-20240809-105813.png

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

  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