ALVGRID学习笔记----红绿灯显示

昨天讲述了如何实现ALVGRID中的Dobule Click事件。今天主要讲述一下在ALVGRID中如何实现红绿灯效果。用红绿灯来显示数据在BI中比较常用，主要用来考核KPI指标等，与仪表盘等类似。这一功能能够让人一目了然的看到数据的情况，比如绩效考核达标是用绿灯，优异时用黄灯，未达标是用红灯。好了，言归正传，接下来讲述如何在ALVGTID中实现以红绿灯显示数据。

　　ALVGRID中实现红绿灯比较容易。在SAP中已经预先定义了一个LVC_CIFNM这样的data element,该element表示的涵义是"ALV control: Field name with simple row color coding".因此，实现原理为：首先定义一个类型为LVC_CIFNM的变量并赋值为'LIGHT'；然后在显示ALVGRID的时候指定Layout的

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}

excp_fname为前面定义的变量名称；再在包含需要显示的数据的内表前面加上一个类型为C,长度为1的字段（2表示绿灯，1表示红灯，3表示黄等），将该字段的值取值于需要用来用进行红绿灯显示的指标；最后将数据显示出来。大概代码如下：

　　一，定义一个类型为LVC_CIFNM的变量并赋值。

　　　　

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L1S33 {
color: #4DA619;
}
.L1S52 {
color: #0000FF;
}

DATA: g_lights_name type lvc_cifnm value 'LIGHT'.

　　二，指定ALVGRID的LAYOUT属性

　　　　DATA:

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L0S55 {
color: #8B0000;
}

gs_layout type lvc_s_layo.

gs_layout-grid_title = 'Flight'(100).

　　 gs_layout-excp_fname = g_lights_name.

gs_layout-sel_mode = 'A'.

三，定义包含红绿灯显示列的内表，并获取数据。

　　　　

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L1S32 {
color: #3399FF;
}
.L1S52 {
color: #0000FF;
}

DATA: BEGIN OF GT_OUTPUT OCCURS 0.

　　　　　　　　INCLUDE STRUCTURE sflight.

　　　　 DATA: light type c.

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L0S31 {
font-style: italic;
color: #C0C0C0;
}

"The column in order to show the light

　　　　 DATA: end of GT_OUTPUT.

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L1S31 {
font-style: italic;
color: #808080;
}

****在我们这个例子中没有根据实际的业务来进行红绿灯显示，而只是简单的根据序号来判断

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L1S31 {
font-style: italic;
color: #808080;
}
.L1S32 {
color: #3399FF;
}
.L1S33 {
color: #4DA619;
}
.L1S52 {
color: #0000FF;
}

　　　　 FORM Get_DATA TABLES P_GT_OUTPUT STRUCTURE GT_OUTPUT.

DATA i TYPE p.

Select * from sflight INTO TABLE gt_sflight UP TO 100 ROWS.

LOOP at gt_sflight.

MOVE-CORRESPONDING gt_sflight to P_GT_OUTPUT.

i = SY-TABIX mod 3 .

if i = 0 .

P_GT_OUTPUT-light = '3'.

ELSEIF i = 1.

P_GT_OUTPUT-light ='2'.

ELSE.

P_GT_OUTPUT-light ='1'.

endif.

APPEND P_GT_OUTPUT.

ENDLOOP.

ENDFORM.

　　 四，调用

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}

SET_TABLE_FOR_FIRST_DISPLAY 方法显示数据。

　　　　

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L0S31 {
font-style: italic;
color: #C0C0C0;
}
.L0S33 {
color: #009300;
}
.L0S54 {
color: #0000FF;
}
.L0S55 {
color: #8B0000;
}

CALL METHOD grid1->SET_TABLE_FOR_FIRST_DISPLAY "Call the method to show data

EXPORTING

I_STRUCTURE_NAME = 'SFLIGHT'

IS_LAYOUT = gs_layout

CHANGING

IT_OUTTAB = GT_OUTPUT[].

OK,大功告成，F8运行，红绿灯已经显示在你的眼前了！你会发现，在每一行数据的第一列会有三个一排的灯，其中一个灯的颜色会显示，另外两个灯颜色是灰的。可能你会问，又没有办法能够只显示亮的灯而其他灰色的灯不显示呢？当然没问题。很简单，设置一下

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L0S33 {
color: #009300;
}

layout的excp_led属性就可以了。例如

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L0S33 {
color: #009300;
}

gs_layout-excp_led = 'X'. 或者

SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L0S33 {
color: #009300;
}

gs_layout-excp_led = ''. 只有哪个表示一盏灯哪个表示3盏灯，实验一下就可以了！

　　 关于红绿灯显示的问题就到这里了，明天或许会讲述一下如何在ALVGRID上的加上自定义按钮。