高亮关键对象

在列表中突出显示关键对象。

本文档介绍如何在对象列表中高亮显示关键对象。更多详细内容请参考 iTop 官方文档

概述

本示例展示如何在列表中高亮显示某些关键对象实例,以便 iTop 用户快速识别它们。

前置条件:熟悉教程中使用的语法,并已创建扩展。

列表中的背景色

以下示例根据团队成员的角色为列表中的成员设置不同的颜色:

/**
 * 此函数返回一个 'hilight' CSS 类,用于高亮表格中的某一行
 * 当前 CSS 中定义了 4 种可能的值:
 * HILIGHT_CLASS_CRITICAL, HILIGHT_CLASS_WARNING, HILIGHT_CLASS_OK, HILIGHT_CLASS_NONE
 * 可以像这里一样被派生类覆盖
 */
public function GetHilightClass()
{
    // 可能的返回值:
    // HILIGHT_CLASS_CRITICAL, HILIGHT_CLASS_WARNING, HILIGHT_CLASS_OK, HILIGHT_CLASS_NONE
    $current = parent::GetHilightClass(); // 默认计算

    switch ($this->Get('role_id_friendlyname')) {
        case 'Manager': $new = HILIGHT_CLASS_CRITICAL; break;
        case 'Support Agent': $new = HILIGHT_CLASS_OK; break;
        case 'Team leader': $new = HILIGHT_CLASS_WARNING; break;
    }
    // 比较父类返回的和新的高亮类,保留优先级更高的
    @$current = self::$m_highlightComparison[$current][$new];

    return $current;
}

高亮颜色

表格高亮颜色由两个 SCSS 变量控制,可以在 Designer 或扩展中修改:

高亮类表格颜色
HILIGHT_CLASS_CRITICALred
HILIGHT_CLASS_WARNINGorange
HILIGHT_CLASS_OKgreen
$ibo-vendors-datatables--row-highlight--colors:(
    'red': ($ibo-color-red-100),
    'danger': ($ibo-color-danger-200),
    'alert': ($ibo-color-red-200),
    'orange': ($ibo-color-orange-100),
    'warning': ($ibo-color-warning-200),
    'blue': ($ibo-color-blue-200),
    'info': ($ibo-color-information-200),
    'green': ($ibo-color-green-100),
    'success': ($ibo-color-success-200),
) !default;

自定义颜色

<variable id="ibo-vendors-datatables--row-highlight--colors" _delta="define">
('red': ($ibo-color-red-200),'danger': ($ibo-color-danger-300),'alert': ($ibo-color-red-300),'orange': ($ibo-color-orange-100),'warning': ($ibo-color-warning-200),'blue': ($ibo-color-blue-200),'info': ($ibo-color-information-200),'green': ($ibo-color-green-100),'success': ($ibo-color-success-200),)
</variable>

单行单个值,无换行,空白不影响,语法应与示例一致。

首单元格颜色:

$ibo-vendors-datatables--row-highlight--first-cell--colors:(
    'red': ($ibo-color-red-300),
    'danger': ($ibo-color-danger-400),
    'alert': ($ibo-color-red-400),
    'orange': ($ibo-color-orange-300),
    'warning': ($ibo-color-warning-400),
    'blue': ($ibo-color-blue-400),
    'info': ($ibo-color-information-400),
    'green': ($ibo-color-green-300),
    'success': ($ibo-color-success-300),
) !default;

参考


原文:https://www.itophub.io/wiki/page?id=3_2_0:customization:highlight-critical-objects

Last modified: 2024/09/10 10:25 by127.0.0.1

版本:3_2_0/customization/highlight-critical-objects.txt · Last modified: 2024/09/10 10:25 by 127.0.0.1