الجدول
تتكون الجداول من أعمدة قابلة للتكوين ويمكن أن تسرد قيم كائنات 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 |
اسم الجهاز | إذا كان الصف يحتوي على كائن من نوع job، يتم عرض اسم الجهاز المرتبط به |
الوالد | يعرض الكائن الأصلي للكائن الحالي |
الأسباب | سبب الحالات التي لا تساوي "OK" |
الرسالة | الرسائل الناتجة عن المهام |
تحديد | يعرض علامة للاختيار |
أعمال الصيانة | يعرض عمليات الصيانة المخطط لها والجارية لكائن SKOOR |
مصدر البيانات | يعرض قيمة عمود في صف مصدر البيانات |
استعلام البيانات | يعرض قيمة عمود في استعلام البيانات |
التعبير | يعرض تعبيرًا محددًا في صف الجدول |
التعليق | يضيف تعليقات توضيحية إلى صف الجدول |
تحرير عنصر واجهة المستخدم "الجدول":
الأساسيات
ينقسم تكوين الجدول إلى جزأين.
في الجزء الأول، يتم تكوين الإعدادات العامة للجدول مثل رأس الجدول، وعدد الصفوف في كل صفحة، أو وظائف التجميع
أما الجزء الثاني، وهو قسم "مصدر البيانات"، فيتعلق بالبيانات الفعلية الموجودة في الجدول، والتي يتم إنشاؤها بشكل أساسي بواسطة كائنات SKOOR أو تخزينها في قاعدة بيانات. في هذا القسم، يمكن تحميل البيانات وتصفيتها وإثرائها بشكل جزئي باستخدام التراكبات، وما إلى ذلك
إعدادات الجدول
الإعداد | الوصف |
|---|---|
حجم الصفحة | عدد الصفوف المرئية في كل صفحة. إذا كان هناك المزيد من الصفوف، فسيظهر محدد الصفحات يتم تجاهل حجم الصفحة إذا تم تعيين وضع المحور لأي أعمدة. |
عرض جميع الصفحات في التقرير | إذا لم يتم تحديد هذا الخيار، فستظهر الصفحة الأولى فقط من الجدول المقسم إلى صفحات في التقارير |
إظهار الصفوف الفارغة | عرض الصفوف الفارغة إذا كان عدد الصفوف أقل من حجم الصفحة. |
إظهار الرأس | إظهار أو إخفاء رأس الجدول. يرجى ملاحظة أنه يتم دائمًا استخدام عوامل تصفية الأعمدة الافتراضية، حتى إذا تم إخفاء عمود أو رأس الجدول بالكامل |
رأس الجدول الثابت | يظل العنوان مرئيًا عند التمرير الرأسي للصفوف. يتطلب هذا عادةً تكوين ارتفاع عنصر واجهة المستخدم لتمكين التمرير داخله. |
لون خلفية الصفوف المتناوب | يتم عرض الصفوف المتجاورة بألوان مختلفة قليلاً لزيادة سهولة القراءة |
عدد الأعمدة الثابتة | عدد الأعمدة بدءًا من اليسار التي ستظل مرئية عند التمرير أفقيًا |
صف التجميع | يضيف صفًا يحتوي على القيم المجمعة إلى الجدول.
|
موضع صف التجميع | عرض القيم المجمعة في أعلى الجدول أو أسفله |
عدد أعمدة التجميع الفرعي | يضيف صف تجميع بناءً على عمود واحد أو أكثر
|
إظهار التجميعات الفرعية المتداخلة | يضيف مجموعًا فرعيًا لمجموعة القيم المجمعة. يوضح المثال التالي المجموع الكلي لجميع الفروع بالإضافة إلى المجموع الفرعي لكل فرع وقسم |
الاحتفاظ بالفلاتر | إذا كانت خيار «الاحتفاظ بالمرشحات» نشطًا، فلن يتم مسح مرشحات الأعمدة الديناميكية عند تغيير الصفحة |
السماح بالتصدير | يمكن تصدير البيانات بتنسيقات CSV أو XLSX |
إجراء النقر | حدد الإجراء المطلوب تنفيذه عند النقر فوق عنصر في الجدول. تتوفر العناصر النائبة التالية:
|
توفير معلمة تصفية الجدول | يوفر عامل التصفية المطبق حاليًا كمعلمة URL، بما في ذلك عوامل تصفية الرؤوس ومصفوفة التصفية واستعلام البحث. يمكن استخدام هذا لتمرير عامل التصفية هذا إلى عناصر واجهة المستخدم الأخرى التي تحتاج إلى عرض المعلومات بناءً على العناصر المعروضة حاليًا. |
اسم معلمة تصفية الجدول | اسم معلمة URL لتصفية الجدول. القيمة الافتراضية هي |
التحويل | يسمح بتوزيع الأعمدة عموديًا أو أفقيًا أو كليهما بناءً على القيم. |
مصدر البيانات
الإعداد | الوصف |
|---|---|
نوع البحث | حدد مصدر البيانات المطلوب. تتغير حقول جزء مصدر البيانات في التكوين وفقًا لنوع البحث |
كائن، الكائنات أدناه | حدد كائنًا واحدًا أو أكثر من كائنات SKOOR باستخدام عوامل تصفية الكائنات العامة |
مصدر البيانات | حدد قاعدة بيانات. يتم تكوين قواعد البيانات في قسم "البيانات والكائنات" |
الجدول | حدد أحد الجداول أو طرق العرض في قاعدة البيانات |
استعلام البيانات | حدد استعلام بيانات. يتم تكوين استعلامات البيانات في قسم "البيانات والكائنات" |
تطبيق استعلام مصفوفة التصفية | إذا تم تكوين عنصر واجهة مستخدم مصفوفة التصفية على لوحة المعلومات، فسيتم تطبيق عوامل التصفية الخاصة بهذا العنصر إذا تطابقت أعمدة كلا العنصرين |
استعلام البحث | حدد عوامل التصفية كما هو موضح في محرر استعلام مصدر البيانات |
التعليقات
حدد خيار "السماح بالتعليقات التوضيحية" لتمكين ميزة التعليقات التوضيحية. تأكد من تعريف عمود واحد أو أكثر كمفتاح هنا، حيث يُستخدم لتعيين كل تعليق توضيحي إلى صف بيانات:
الأعمدة
انقر فوق "مزامنة الأعمدة" لإضافة جميع الأعمدة المتاحة من الجدول أو استعلام البيانات الذي تم تكوينه. إذا تم استخدام مجموعة فرعية فقط من الأعمدة المتاحة، فانقر فوق "إضافة عمود" لإضافة أعمدة أو حذف الأعمدة غير المستخدمة بعد مزامنة جميع الأعمدة. لتغيير ترتيب الأعمدة، ما عليك سوى سحب عناصر الأعمدة وإفلاتها.
افتح الإعدادات بالنقر فوق عنصر عمود:
الإعداد | الوصف |
|---|---|
يعتمد نوع العمود على "نوع البحث" المحدد في قسم "مصدر البيانات" في الأداة | |
الاسم | اسم العمود. يتم عرض هذا الاسم في رأس الجدول |
العنوان | حقل التعبير لاستخدام العناصر النائبة كعنوان للعمود، وإذا كان فارغًا فسيتم استخدام القيمة الموجودة في "الاسم". |
التشغيل عند النقر المزدوج | لا يتم تشغيل الإجراء المحدد في قسم ClickAction إلا بالنقر المزدوج |
العرض | العرض الدقيق بالبكسل أو النسبة المئوية (اختياري) |
العرض الأدنى | العرض الأدنى للعمود بالبكسل أو النسبة المئوية (اختياري) |
المحاذاة | محاذاة النص إلى اليسار أو الوسط أو اليمين |
ارتفاع العنوان | ارتفاع العنوان بالبكسل |
نوع الفلتر | نوع المرشح الديناميكي
|
إظهار في العنوان | متاح فقط إذا تم تعيين نوع التصفية على " إذا تم تحديد الخيار، فسيتم عرض مطابقة النص القديمة والتصفية الافتراضية. إذا لم يتم تحديد الخيار، فسيظهر حقل مشترك يجمع بين عامل التشغيل والقيمة الافتراضية. |
مطابقة النص | متاح فقط إذا تم تعيين "نوع التصفية" على " يحدد سلوك مرشح الجدول.
يمكن استخدام حرف البدل |
التصفية الافتراضية | يمكن ضبط نص التصفية الديناميكي مسبقًا. يرجى ملاحظة أن التصفية تظل نشطة حتى إذا لم يتم عرض العمود |
أولوية الفرز | قم بتعيين أولوية الفرز لجعل العمود قابلاً للفرز. يتم فرز الصفوف وفقًا لأولوية الفرز. إذا كان لعمودين نفس أولوية الفرز، يتم تحديد الأولوية حسب أسبقية العمود |
اتجاه الفرز الافتراضي | الفرز تصاعديًا أو تنازليًا بشكل افتراضي |
إظهار | تحديد ما إذا كان سيتم عرض العمود (افتراضيًا) أم لا. يرجى ملاحظة أن عوامل التصفية الافتراضية تظل نشطة حتى بالنسبة للأعمدة المخفية |
إخفاء إذا كان فارغًا | إخفاء العمود إذا لم يحتوي أي صف في الجدول على قيمة لهذا العمود |
إخفاء على الشاشات الصغيرة | إخفاء العمود إذا لم يتسع له الشاشة |
إخفاء التكرارات | إخفاء القيم المتكررة. يمكن استخدام هذه الخيار لتحقيق نوع من التجميع: |
دمج الصفوف المكررة | إظهار صف واحد فقط من بين جميع الصفوف التي تحتوي على نفس القيمة في هذا العمود |
إظهار القيمة المجمعة | تشغيل أو إيقاف تشغيل هذه القيمة في صفوف التجميع أعلى أو أسفل الجدول |
اتجاه العنوان | رأس أفقي أو عمودي. إذا اخترت العمودي، فيجب عليك ضبط ارتفاع الرأس على قيمة مناسبة (لأسباب فنية، لا يمكن تحديد حجم الرأس تلقائيًا) |
العرض بتنسيق HTML | تفسير علامات HTML في هذا العمود |
فئة شرطية | خصيصًا لأعمدة «العدد». |
كائن مخصص | تعيين لاستخدام كائن SKOOR مخصص |
إعدادات أنواع الأعمدة
الاسم
يعرض اسم كائن الصف. لا توجد إعدادات متاحة.
النوع
يعرض نوع كائن الصف. لا توجد إعدادات متاحة.
النوع الفرعي
يعرض النوع الفرعي لكائن الصف. لا توجد إعدادات متاحة.
الحالة
يعرض حالة كائن الصف على شكل مصباح أو نص.
الإعداد | الوصف |
|---|---|
نوع العرض | حدد كيفية عرض حالة كائن SKOOR:
|
العمود | العمود الذي يمكن العثور فيه على الحالة. |
جميع الحالات في القائمة | عرض جميع الحالات في المرشح. |
عندما يعرض نوع البحث كائنات SKOOR، يمكن تعريف إجراء النقر للعمود. من خلال تنشيط "كائن مخصص"، يمكنك عرض حالة أي كائن SKOOR (تم تحديده بواسطة مرشح الكائنات).
عندما يكون نوع البحث هو "مصدر البيانات" أو "استعلام البيانات"، حدد العمود الذي يحتوي على الحالات المطلوبة من القائمة المنسدلة "العمود":
إذا تم استخدام عمود الحالة في جدول قائم على مصدر البيانات أو استعلام البيانات، فيمكن تعيين القيم إلى الحالات (لوحة معلومات SKOOR >= 7.1.2).
لتعيين قيم متعددة لحالة واحدة، يمكن تعريف القيم كقائمة مفصولة بفواصل.
إحصائيات الحالة
يحسب النسبة المئوية للكائن الموجود في الحالة المحددة. إذا تم تكوين كائن مخصص في العمود، فيمكن تحديد أكثر من كائن واحد بواسطة مرشح البحث. في هذه الحالة، يتم تجميع جميع الكائنات بواسطة دالة التجميع المحددة.
الإعداد | الوصف |
|---|---|
الحالة | حدد الحالة التي تريد الحصول على إحصائياتها |
الصيانة على أنها "مُرضية" | تحديد ما إذا كان يجب اعتبار الصيانة "جيد" أم لا |
دالة التجميع | حدد دالة التجميع التي سيتم استخدامها في حساب إحصائيات الولاية. |
الخاصية
يعرض خاصية كائن الصف.
العدد
يُحسب عدد الكائنات بناءً على مرشح الكائنات
يقبل حقل "الشروط" العناصر النائبة المعتادة.
للحصول على مرجع إلى كائن الصف، يمكن استخدام مقتطف الشرط التالي:
{
"item": "id",
"operator": "eq",
"expression": %id%
}
من الممكن أيضًا تعيين فئة مخصصة لعدد معين. وهذا مفيد بشكل خاص لتلوين الأعداد التي تزيد عن قيمة محددة:
الفئات المفيدة:
bold
رئيسي
ثانوي
تحذير
مقبول
القيمة
يعرض قيمة كائن الصف. من خلال تنشيط "كائن مخصص"، يمكنك عرض قيمة أي كائن SKOOR (يتم تحديده بواسطة مرشح الكائنات).
يمكن تعريف القيمة بواسطة مفتاح القيمة الخاص بها. تقبل قيم الإرجاع والقيم النصية الفهرس في صيغة المصفوفة (على سبيل المثال returnValue[0]) أو اسم الوحدة المحددة.
الإعداد | الوصف |
|---|---|
اسم القيمة | حدد اسم قيمة كائن SKOOR. |
إظهار الوحدة | تحديد ما إذا كان سيتم عرض وحدة القياس لتلك القيمة أم لا. |
دالة التجميع | حدد دالة التجميع التي سيتم تطبيقها على القيمة. |
اسم الجهاز
يعرض اسم الجهاز ذي الصلة إذا كان الكائن عبارة عن مهمة.
الأصل
يعرض الكائن الأصلي للكائن الحالي.
الأسباب
السبب وراء وجود الكائنات في حالة مثل "رئيسي" أو "ثانوي" أو "تحذير".
الرسالة
يعرض رسالة معلومات المهمة إن كانت متوفرة.
تحديد
يضيف خيارات لإضافة أو إزالة الصيانة بالإضافة إلى مربع اختيار لكل صف.
عمليات الصيانة
يعرض عمليات الصيانة الحالية.
مصدر البيانات
يعرض قيمة عمود من جدول مصدر البيانات.
يمكن ضبط دالة التجميع لتجميع قيم العمود.
إذا كان العمود من النوع العائم (float)، فيمكن ضبط دقة القيمة.
الإعداد | الوصف |
|---|---|
العمود | حدد العمود المطلوب من مصدر البيانات. |
وحدة المصدر | وحدة قياس البيانات في العمود. |
وحدة الهدف | الوحدة المستهدفة التي سيتم تحويل القيم إليها. |
إظهار الوحدة | عرض الوحدة في رأس الجدول. |
دالة التجميع | حدد دالة التجميع المراد تطبيقها على قيمة العمود. |
الدقة | اضبط دقة القيمة (للأرقام العائمة). |
تنسيق الوقت | حدد تنسيق الوقت المفضل. |
وضع المحور | يجب ضبط دالة التجميع على "تجميع" لإظهار هذا الإعداد. إنشاء أعمدة ديناميكيًا استنادًا إلى قيم هذا العمود. الخيارات:
|
استعلام البيانات
يعرض قيمة عمود من استعلام البيانات. تنطبق خيارات التكوين نفسها الخاصة بمصادر البيانات أيضًا على أعمدة استعلام البيانات.
التعبير
يمكن لأعمدة التعبير حساب القيم من الأعمدة الأخرى التي تم تكوينها في أداة الجدول هذه. يمكن الإشارة إلى الأعمدة الأخرى بطريقتين:
${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») برمز (مثل المصباح).
الحل
تعيين فئة خلية الجدول في إعدادات العمود
في المثال أعلاه، يتم أخذ قيمة الفئة من العمود الثالث في كل صف. وفي المثال، سيؤدي ذلك إلى تعيين فئة 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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');
}
وستبدو النتيجة كما يلي:







































