關(guān)于如何在Grid中配置行列顯示背景色的問(wèn)題的說(shuō)明

1 背景

在實(shí)施過(guò)程中經(jīng)常會(huì)遇到客戶提這樣的要求：要求顯示業(yè)務(wù)數(shù)據(jù)時(shí)能根據(jù)不同的狀態(tài)顯示不同顏色，有的要求一行全部用紅色顯示，也有要求某些列的數(shù)據(jù)顯示紅色，當(dāng)然什么時(shí)候顯示紅色是有一定要求的。

如下圖：

例1

上面這個(gè)例子中要求對(duì)捷途產(chǎn)品線的小計(jì)數(shù)據(jù)行背景高亮顯示

例2：

上面這個(gè)例子要求月計(jì)劃已完成的用綠色背景，只顯示狀態(tài)這個(gè)列的背景，進(jìn)行中的灰色，延期的紅色背景
如上圖中的 執(zhí)行人，監(jiān)督人用腰子型按鈕顯示 ，任務(wù)標(biāo)識(shí)這里本來(lái)是一個(gè)GUID碼，如果有GUID就顯示一個(gè) + 這樣的圖標(biāo)（用什么樣的圖標(biāo)是實(shí)施人員自己定）這些都可以根據(jù)客戶的需求來(lái)定義。

2 如何實(shí)現(xiàn)

2.1 限制

首先目前mobox、gungho支持Grid顯示樣式自定義的功能點(diǎn)是有下面這些

3000

3019

3025

2.2 配置顯示前事件

Grid行背景色配置是在 3000 功能點(diǎn)顯示前事件里完成的。系統(tǒng)發(fā)現(xiàn)我們?cè)?000功能點(diǎn)配置了 顯示前事件，如下圖

在這里要配置 顯示前執(zhí)行什么腳本。

2.3 顯示前事件腳本的處理

腳本的處理分下面3個(gè)步驟

2.3.1 獲取當(dāng)前顯示頁(yè)中的數(shù)據(jù)

其中獲取的 strRetInfo 就是前端給腳本的數(shù)據(jù)，格式j(luò)son，如下：

[

{“id”:”XXX”,”attrs”:[{“attr”:””,”value”:””},….]},

..

]

其中id 是這一行顯示的數(shù)據(jù)對(duì)象標(biāo)識(shí)

Attrs是Grid中沒(méi)列的數(shù)據(jù)和值

2.3.2 輪詢獲取行數(shù)據(jù)

根據(jù)獲取的屬性值來(lái)判斷是否要改變行列的顯示樣式

2.3.3 返回給前端用重新組織后的數(shù)據(jù)刷新頁(yè)面

注意：

Action = reset_data_attr

2.3.4 行列控制

在我們返回的Json格式中每行，列的屬性可以改變前端Grid的顯示樣式

前面我們介紹了，前端過(guò)來(lái)的Grid Row的數(shù)據(jù)是這樣的

{“id”:”xxxx”,”attrs”:[ {“attr”:”S_CMN”,”value”:”M”},..]}

如果需要S_CMN列顯示背不同的景色，那么就要把數(shù)據(jù)設(shè)置為：

{“id”:”xxxx”,”attrs”:[ {“attr”:”S_CMN”,”value”:”M”,”bk_color”:”#28FF28″,”text_color”:”#000000″},..]}

注意紅色文字部分就是控制這一行，這一列的背景、前景色

如果是要整行都變顏色：

{“id”:”xxxx”,”row_bk_color”:”#F9F900″, “row_text_color”:”#272727″, “attrs”:[ {“attr”:”S_CMN”,”value”:”M”},..]}

3 備注

常用十六進(jìn)制顏色對(duì)照表代碼查詢

https://www.cnblogs.com/summary-2017/p/7504126.html