الجدول
تتكون الجداول من أعمدة قابلة للتكوين ويمكنها سرد قيم كائنات SKOOR أو بيانات من مصدر بيانات خارجي
يتوافق كل صف في الجدول مع كائن SKOOR واحد أو صف في مصدر البيانات الخارجي ويمكنه سرد قيمه المختلفة.
المرشحات
يمكن تعيين عامل تصفية لكل عمود في مربع حوار التصفية أو في رأس العمود إذا تم تكوينه في عنصر واجهة المستخدم. يمكن استخدامه لتصفية صفوف الجدول إما لمطابقة سلسلة نصية معينة أو لعرض الصفوف التي تطابق قيمة أو نصًا مدرجًا حاليًا باستخدام قائمة منسدلة. يوفر مربع حوار الفلتر واجهة سهلة الاستخدام لإنشاء فلاتر معقدة بسهولة. في قسم "الفلاتر المضمنة" ، يمكنك تعلم كيفية تكوين الفلاتر المضمنة القديمة التي يتم عرضها في العنوان.
داخل مربع حوار التصفية: حدد بسهولة عوامل مثل "يحتوي على" و"يساوي" و"أكبر من" وما إلى ذلك، وأدخل القيم دون الحاجة إلى حفظ صيغة التعبير:
مرشحات النطاق: بالنسبة للأعمدة الرقمية والتاريخية على وجه التحديد، يمكنك بسهولة تحديد النطاقات (من..إلى)
أدوات اختيار التاريخ والوقت: أدوات اختيار مدمجة لأعمدة التاريخ والطابع الزمني تجعل اختيار نطاقات الوقت أمرًا سهلاً
التحديد المتعدد: حدد قيم متعددة من قائمة لاستعلامات "IN"
أحرف البدل
تدعم جميع فلاتر النص أحرف البدل *. وهذا يسمح بالبحث عن أجزاء من سلسلة.
Dev*Dev*ment*ment100*2022*
الأعمدة التي تحتوي على أرقام أو تواريخ
IN(x,y,z)
حدد قيمة واحدة أو عدة قيم. تتضمن النتائج فقط السجلات التي تتطابق فيها البيانات الموجودة في العمود مع القيمة الموجودة في المرشح.NOT(IN(x,y,z))
عكس inBETWEEN(x,y)
حدد قيمتين. تتضمن النتيجة فقط السجلات التي تكون فيها البيانات في العمود بين القيمتين المحددتين.>
حدد قيمة واحدة. تتضمن النتائج فقط السجلات التي تكون فيها البيانات في العمود أكبر من القيمة في الفلتر.<
حدد قيمة واحدة. تتضمن النتائج فقط السجلات التي تكون فيها البيانات الموجودة في العمود أقل من القيمة الموجودة في عامل التصفية.>=
حدد قيمة واحدة أو عدة قيم. تتضمن النتائج فقط السجلات التي تكون فيها البيانات في العمود أكبر من أو مساوية للقيمة الموجودة في عامل التصفية.<=
حدد قيمة واحدة أو عدة قيم. تتضمن النتائج فقط السجلات التي تكون فيها البيانات في العمود أقل من أو مساوية للقيمة الموجودة في عامل التصفية.
الأعمدة التي تحتوي على نص
AND(x,y,z)
حدد سلسلتين أو أكثر من السلاسل أو الأحرف. تتضمن النتائج فقط السجلات التي تحتوي على جميع السلاسل المحددة.OR(x,y,z)
حدد سلسلتين أو أكثر أو أحرفًا. تتضمن النتائج فقط السجلات التي تحتوي على سلسلة واحدة على الأقل من السلاسل المحددة.NOT(x)
حدد حرفًا أو سلسلة. تتضمن النتائج فقط السجلات التي لا تحتوي على السلسلة المحددة.
يمكن أيضًا تداخل عوامل تصفية النص.
إعادة تعيين الفلاتر
يمكن إعادة تعيين جميع الفلاتر (استعادة الإعدادات الافتراضية) أو مسحها باستخدام الرابط المقابل أعلى الجدول أو في مربع حوار الفلتر:
المرشحات المضمنة والقيم الافتراضية
يمكن عرض الفلاتر مضمنة في رأس العمود إذا تم تحديد "إظهار في الرأس" في تكوين العمود، والذي يعرض أيضًا حقول التكوين القديمة "مطابقة النص" و"الفلاتر الافتراضية".
بالنسبة للفلاتر المعروضة في مربع حوار الفلتر، يوجد حقل فلتر افتراضي أكثر سهولة في الاستخدام.
رؤوس وأعمدة ثابتة
يمكن تكوين عدد الرؤوس والأعمدة الثابتة في إعدادات الجدول:
التجميع والتجميع الفرعي
يمكن تجميع الصفوف التي تحتوي على قيم رقمية (المجموع، المتوسط، الحد الأدنى، الحد الأقصى). بالإضافة إلى ذلك، يمكن تجميع القيم حسب قيم الأعمدة وتجميعها مرة أخرى:
أنواع الأعمدة
لمزيد من التفاصيل حول تحرير الأعمدة، راجع القسم أدناه تفاصيل العمود
يمكن تكوين أنواع الأعمدة التالية:
الإعداد | الوصف |
|---|---|
الاسم | يعرض اسم كائن SKOOR |
النوع | يعرض نوع كائن SKOOR |
النوع الفرعي | يعرض النوع الفرعي لكائن SKOOR |
الحالة | يعرض حالة كائن SKOOR. يمكن عرض الحالة على شكل مصباح أو نص بسيط. يؤدي النقر على الحالة إلى فتح سجل حالة الكائن |
إحصائيات الحالة | يعرض النسبة المئوية لحالة معينة خلال نطاق زمني محدد لكائن SKOOR (يمكن تخصيص الحالة والنطاق الزمني) |
الخاصية | يعرض خاصية معينة لكائن SKOOR |
العد | يحسب عدد كائنات SKOOR بناءً على عامل تصفية أو عملية بحث |
القيمة | يعرض قيمة كائن SKOOR |
اسم الجهاز | إذا كان الصف يحتوي على كائن من نوع مهمة، يتم عرض اسم الجهاز ذي الصلة |
الأصل | يعرض الكائن الأصلي للكائن الحالي |
الأسباب | سبب الحالات غير المتساوية مع OK |
رسالة | الرسائل التي تم إنشاؤها من المهام |
اختر | يعرض علامة للاختيار |
الصيانة | يعرض عمليات الصيانة المخطط لها والجارية لكائن SKOOR |
مصدر البيانات | يعرض قيمة عمود لصف مصدر البيانات |
استعلام البيانات | يعرض قيمة عمود استعلام البيانات |
التعبير | يعرض تعبيرًا محددًا في صف الجدول |
تعليق | يضيف تعليقات توضيحية إلى صف الجدول |
تحرير أداة الجدول:
الأساسيات
تنقسم تهيئة الجدول إلى قسمين.
في الجزء الأول، يتم تكوين الإعدادات العامة للجدول مثل رأس الجدول وعدد الصفوف في كل صفحة أو وظائف التجميع
الجزء الثاني، قسم مصدر البيانات، يتعلق بالبيانات الفعلية في الجدول، والتي يتم إنشاؤها بشكل أساسي بواسطة كائنات SKOOR أو تخزينها في قاعدة بيانات. في هذا القسم، يمكن تحميل البيانات وتصفيتها وإثرائها بواسطة التراكبات وما إلى ذلك
إعدادات الجدول
الإعداد | الوصف |
|---|---|
حجم الصفحة | عدد الصفوف المرئية في كل صفحة. إذا كان هناك المزيد من الصفوف، يتم عرض محدد الصفحات |
إظهار جميع الصفحات في التقرير | إذا لم يتم تحديد هذا الخيار، فستظهر الصفحة الأولى فقط من الجدول المقسم إلى صفحات في التقارير |
إظهار الصفوف الفارغة | اعرض الصفوف الفارغة إذا كان عدد الصفوف أقل من حجم الصفحة. |
إظهار العنوان | إظهار أو إخفاء رأس الجدول. يرجى ملاحظة أنه يتم دائمًا استخدام عوامل تصفية الأعمدة الافتراضية، حتى إذا كان عمود أو رأس الجدول بأكمله مخفيًا |
رأس ثابت | يظل العنوان مرئيًا عند التمرير الرأسي للصفوف. يتطلب هذا عادةً تكوين ارتفاع عنصر واجهة المستخدم لتمكين التمرير داخله. |
لون خلفية الصفوف البديلة | يتم عرض الصفوف المتجاورة بألوان مختلفة قليلاً لزيادة سهولة القراءة |
عدد الأعمدة الثابتة | عدد الأعمدة بدءًا من اليسار التي ستظل مرئية عند التمرير أفقيًا |
صف مجمّع | يضيف صفًا بالقيم المجمعة إلى الجدول.
|
موضع الصف المجمع | عرض القيم المجمعة في أعلى الجدول أو أسفله |
عدد الأعمدة الفرعية المجمعة | يضيف صف تجميع بناءً على عمود واحد أو أكثر
|
إظهار التجميعات الفرعية المتداخلة | يضيف إجمالي فرعي فوق مجموعة قيم مجمعة. يوضح المثال التالي إجمالي جميع الفروع بالإضافة إلى الإجمالي الفرعي لكل فرع وقسم |
الاحتفاظ بالفلاتر | إذا كانت خيار "الاحتفاظ بالفلاتر" نشطًا، فلن يتم مسح فلاتر الأعمدة الديناميكية عند تغيير الصفحة |
السماح بالتصدير | يمكن تصدير البيانات إلى تنسيقات CSV أو XLSX |
انقر فوق الإجراء | حدد الإجراء المطلوب تنفيذه عند النقر فوق عنصر في الجدول. تتوفر العناصر النائبة التالية:
|
توفير معلمة تصفية الجدول | يوفر الفلتر المطبق حاليًا كمعلمة URL، بما في ذلك فلاتر الرأس ومصفوفة الفلتر واستعلام البحث. يمكن استخدام هذا لتمرير هذا الفلتر إلى عناصر واجهة مستخدم أخرى تحتاج إلى عرض معلومات بناءً على العناصر المعروضة حاليًا. |
اسم معلمة تصفية الجدول | اسم معلمة URL لفلتر الجدول. الافتراضي هو |
مصدر البيانات
الإعداد | الوصف |
|---|---|
نوع البحث | حدد مصدر البيانات المطلوب. تتغير حقول جزء مصدر البيانات من التكوين وفقًا لنوع البحث |
كائن، كائنات أدناه | حدد كائن SKOOR واحدًا أو أكثر باستخدام عوامل تصفية الكائنات الشائعة |
مصدر البيانات | حدد قاعدة بيانات. يتم تكوين قواعد البيانات في قسم البيانات والكائنات |
جدول | حدد أحد الجداول أو طرق العرض لقاعدة البيانات |
استعلام البيانات | حدد استعلام بيانات. يتم تكوين استعلامات البيانات في قسم البيانات والكائنات |
تطبيق استعلام مصفوفة التصفية | إذا تم تكوين أداة مصفوفة التصفية على لوحة المعلومات، يتم تطبيق عوامل التصفية الخاصة بتلك الأداة إذا كانت أعمدة كلتا الأداتين متطابقة |
استعلام البحث | حدد عوامل التصفية كما هو موضح في محرر استعلام مصدر البيانات |
التعليقات
حدد السماح بالتعليقات التوضيحية لتمكين ميزة التعليقات التوضيحية. تأكد من تعريف عمود واحد أو أكثر كمفتاح هنا، والذي يُستخدم لتعيين كل تعليق توضيحي إلى صف بيانات:
الأعمدة
انقر فوق "مزامنة الأعمدة" لإضافة جميع الأعمدة المتاحة من الجدول أو استعلام البيانات المكون. إذا تم استخدام مجموعة فرعية فقط من الأعمدة المتاحة، فانقر فوق "إضافة عمود" لإضافة أعمدة أو حذف الأعمدة غير المستخدمة بعد مزامنتها جميعًا. لتغيير ترتيب الأعمدة، ما عليك سوى سحب عناصر الأعمدة وإفلاتها.
افتح الإعدادات بالنقر فوق عنصر عمود:
الإعداد | الوصف |
|---|---|
يعتمد نوع العمود على نوع البحث المحدد في قسم مصدر البيانات في عنصر واجهة المستخدم | |
الاسم | اسم العمود. يتم عرضه في رأس الجدول |
العنوان | حقل تعبير لاستخدام العناصر النائبة كعنوان عمود، إذا كان فارغًا، فسيتم استخدام القيمة الموجودة في الاسم. |
تشغيل عند النقر المزدوج | لا يتم تشغيل الإجراء المحدد في قسم ClickAction إلا بالنقر المزدوج |
العرض | العرض الدقيق بالبكسل أو النسبة المئوية (اختياري) |
الحد الأدنى للعرض | الحد الأدنى لعرض العمود بالبكسل أو النسبة المئوية (اختياري) |
محاذاة | محاذاة النص إلى اليسار أو التوسيط أو اليمين |
ارتفاع الرأس | ارتفاع العنوان بالبكسل |
نوع الفلتر | نوع الفلتر الديناميكي
|
عرض في العنوان | متاح فقط إذا تم تعيين نوع التصفية على " إذا تم تحديده، يعرض مطابقة النص القديمة والمرشح الافتراضي. إذا لم يتم تحديده، يظهر حقل مشغل/قيمة افتراضية مدمج. |
مطابقة النص | متاح فقط إذا تم تعيين نوع التصفية على " يحدد سلوك مرشح الجدول.
يمكن استخدام حرف البدل |
التصفية الافتراضية | يمكن ضبط نص التصفية الديناميكي مسبقًا. يرجى ملاحظة أن التصفية تكون نشطة حتى إذا لم يتم عرض العمود |
أولوية الفرز | قم بتعيين أولوية الفرز لجعل العمود قابلاً للفرز. يتم فرز الصفوف وفقًا لأولوية الفرز. إذا كان لعمودين نفس أولوية الفرز، يتم تحديد الأولوية حسب أسبقية العمود |
اتجاه الفرز الافتراضي | فرز تصاعدي أو تنازلي بشكل افتراضي |
إظهار | إما إظهار العمود (الافتراضي) أو عدم إظهاره. يرجى ملاحظة أن المرشحات الافتراضية نشطة حتى بالنسبة للأعمدة المخفية |
إخفاء إذا كان فارغًا | إخفاء العمود إذا لم يكن هناك صف في الجدول يحتوي على قيمة لهذا العمود |
إخفاء على الشاشات الصغيرة | إخفاء العمود إذا كان لا يتناسب مع الشاشة |
إخفاء التكرارات | إخفاء القيم المتكررة. يمكن استخدام هذا لتحقيق نوع من التجميع: |
دمج الصفوف المكررة | إظهار صف واحد فقط من جميع الصفوف التي تحتوي على نفس القيمة في هذا العمود |
إظهار القيمة المجمعة | تشغيل أو إيقاف تشغيل هذه القيمة في صفوف التجميع أعلى أو أسفل الجدول |
اتجاه العنوان | رأس أفقي أو عمودي. إذا اخترت عموديًا، فيجب عليك تعيين ارتفاع الرأس إلى قيمة مناسبة (لأسباب فنية، لا يمكن تحديد حجم الرأس تلقائيًا) |
عرض كـ HTML | تفسير علامات HTML في هذا العمود |
فئة شرطية | خصوصًا لأعمدة العد. |
كائن مخصص | اضبطه لاستخدام كائن SKOOR مخصص |
إعدادات أنواع الأعمدة
الاسم
يعرض اسم كائن الصف. لا توجد إعدادات متاحة.
النوع
يعرض نوع كائن الصف. لا توجد إعدادات متاحة.
النوع الفرعي
يعرض النوع الفرعي لكائن الصف. لا توجد إعدادات متاحة.
الحالة
يعرض حالة كائن الصف على شكل مصباح أو نص.
الإعداد | الوصف |
|---|---|
نوع العرض | حدد كيفية عرض حالة كائن SKOOR:
|
عمود | العمود الذي يمكن العثور فيه على الحالة. |
جميع الحالات في التحديد | عرض جميع الحالات في الفلتر. |
عندما يعرض نوع البحث كائنات SKOOR، يمكن تعريف إجراء النقر للعمود. من خلال تنشيط كائن مخصص، يمكنك عرض حالة كائن SKOOR عشوائي (محدد بواسطة مرشح الكائن).
عندما يكون نوع البحث هو مصدر البيانات أو استعلام البيانات، حدد العمود الذي يحتوي على الحالات المطلوبة من القائمة المنسدلة "عمود":
إذا تم استخدام عمود الحالة في جدول قائم على مصدر البيانات أو استعلام البيانات، يمكن تعيين القيم إلى الحالات (SKOOR Dashboard >= 7.1.2).
لتعيين قيم متعددة لحالة واحدة، يمكن تعريف القيم كقائمة مفصولة بفواصل.
إحصائيات الحالة
يحسب النسبة المئوية للكائن الموجود في الحالة المحددة. إذا تم تكوين كائن مخصص في العمود، فيمكن تحديد أكثر من كائن واحد بواسطة عامل تصفية البحث. في هذه الحالة، يتم تجميع جميع الكائنات بواسطة دالة التجميع المحددة.
الإعداد | الوصف |
|---|---|
الحالة | حدد الحالة التي تريد الحصول على إحصائياتها |
الصيانة على ما يرام | حدد ما إذا كان يجب اعتبار الصيانة على ما يرام |
وظيفة التجميع | حدد وظيفة التجميع التي سيتم استخدامها في حساب إحصائيات الحالة. |
خاصية
يعرض خاصية كائن الصف.
عد
يحسب الكائنات استنادًا إلى مرشح الكائنات
يقبل حقل الشروط العناصر النائبة المعتادة.
للحصول على مرجع إلى كائن الصف، يمكن استخدام مقتطف الشرط التالي:
{
"item": "id",
"operator": "eq",
"expression": %id%
}
من الممكن أيضًا تعيين فئة مخصصة لعدد معين. وهذا مفيد بشكل خاص لتلوين الأعداد الأكبر من قيمة محددة:
فئات مفيدة:
غامق
رئيسي
ثانوي
تحذير
موافق
قيمة
يعرض قيمة كائن الصف. من خلال تنشيط كائن مخصص، يمكنك عرض قيمة كائن SKOOR عشوائي (يتم تحديده بواسطة مرشح الكائن).
يمكن تحديد القيمة من خلال مفتاح القيمة الخاص بها. تقبل قيم الإرجاع وقيم السلسلة المؤشر في صيغة المصفوفة (على سبيل المثال returnValue[0]) أو اسم الوحدة المحددة.
الإعداد | الوصف |
|---|---|
اسم القيمة | حدد اسم قيمة كائن SKOOR. |
إظهار الوحدة | حدد ما إذا كنت تريد عرض وحدة القياس لتلك القيمة أم لا. |
دالة التجميع | حدد دالة التجميع التي سيتم تطبيقها على القيمة. |
اسم الجهاز
يعرض اسم الجهاز ذي الصلة إذا كان الكائن مهمة.
الأصل
يعرض الكائن الأصلي للكائن الحالي.
الأسباب
سبب وجود الكائنات في حالة مثل رئيسية أو ثانوية أو تحذير.
رسالة
يعرض رسالة معلومات المهمة إن كانت متوفرة.
تحديد
يضيف خيارات لإضافة أو إزالة الصيانة بالإضافة إلى مربع اختيار لكل صف.
عمليات الصيانة
يعرض عمليات الصيانة الحالية.
مصدر البيانات
يعرض قيمة عمود من جدول مصدر البيانات.
يمكن تعيين الدالة التجميعية لتجميع قيم العمود.
إذا كان العمود من النوع العائم، فمن الممكن تعيين دقة القيمة.
الإعداد | الوصف |
|---|---|
العمود | حدد العمود المطلوب من مصدر البيانات. |
وحدة المصدر | وحدة البيانات في العمود. |
وحدة الهدف | الوحدة المستهدفة لتحويل القيم إليها. |
إظهار الوحدة | عرض الوحدة في رأس الجدول. |
دالة التجميع | حدد دالة تجميع لتطبيقها على قيمة العمود. |
الدقة | تعيين دقة القيمة (للأرقام العائمة). |
تنسيق الوقت | حدد تنسيق الوقت المفضل. |
استعلام البيانات
يعرض قيمة عمود من استعلام البيانات. تنطبق خيارات التكوين نفسها المستخدمة لمصادر البيانات أيضًا على أعمدة استعلام البيانات.
التعبير
يمكن لأعمدة التعبير حساب القيم من الأعمدة الأخرى المكونة في أداة الجدول هذه. يمكن الإشارة إلى الأعمدة الأخرى بطريقتين:
${columns.<اسم العمود>}
${columns[“<اسم العمود”]}
كـ <اسم العمود>، اضبط الاسم المكون في العمود المعني بالضبط (على سبيل المثال، حرف كبير في البداية)
يرجى زيارة صفحة العناصر النائبة للحصول على مزيد من التفاصيل.
التعليق
باستخدام هذا النوع من الأعمدة، يمكن للمستخدمين إثراء بيانات مصدر البيانات أو استعلام البيانات بالتعليقات التوضيحية. هناك خمسة أنواع من أعمدة التعليقات التوضيحية:
الإعداد | الوصف |
|---|---|
نوع العرض | قائمة منسدلة تحتوي على نوع التعليق التوضيحي المطلوب:
|
زر | يضيف زرًا إلى كل صف من الجدول لإضافة تعليقات توضيحية. كما يمكن تكوين مجموعة ثابتة من الحالات هنا مع إمكانية الانتقال بينها. انقر فوق الزر "إضافة" لإضافة حالات: يجب تكوين انتقال من الحالة غير المحددة. وإلا، فلن يمكن إضافة أي تعليقات توضيحية على الإطلاق |
الحالة | عرض حالة التعليق التوضيحي الحالية لكل صف |
الوصف | عرض وصف التعليق التوضيحي الحالي |
تم | عرض تاريخ إنشاء التعليق التوضيحي |
المستخدم | عرض المستخدم الذي أنشأ التعليق التوضيحي |
يرجى زيارة صفحة التعليقات التوضيحية لمزيد من التفاصيل.
إعدادات الأعمدة المتقدمة
إجراءات النقر
اعتمادًا على نوع العمود، يمكن تعريف إجراءات النقر للتفصيل أو للتنقل إلى مكان ما عند النقر. انظر إجراءات النقر للحصول على مزيد من التفاصيل.
تصميم الخلايا
من الممكن تخصيص نمط كل خلية في الجدول باستخدام 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، سيبدو المثال نفسه أدناه كما يلي:
المشكلة
يجب استبدال محتوى خلية الجدول (على سبيل المثال OK) برمز (على سبيل المثال مصباح).
الحل
تعيين فئة خلية الجدول في إعدادات العمود
في المثال أعلاه، يتم أخذ قيمة الفئة من العمود الثالث في كل صف. في المثال، سيؤدي ذلك إلى تعيين فئة إلى status statusOK.
أضف بعض CSS في مربع حوار إعدادات لوحة التحكم
/* 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، فإن باقي الفئات تحمل جميعها المصباح الرمادي القياسي
بدلاً من استخدام عنوان URL للملف للصور، من الممكن أيضًا تضمين الصور مباشرة في CSS باستخدام عناوين URL للبيانات:
td.statusOK {
background-image: url('data:image/png;base64,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');
}
ستكون النتيجة كما يلي:







































