控制单元格颜色

1.改變控件背景顏色:
--------------------
m_List1.SetTextBkColor(RGB(165,254,236));
m_List1.SetBkColor(RGB(165,254,236));
-------------------------------------------------------------------------------

2.改變列表控件單元格顏色
-------------------------

1.添加OnNMCustomdraw函數

2.pNMCD->nmcd.dwItemSpec  是項索引

只有?CDRF_NOTIFYSUBITEMDRAW?pNMCD->iSubItem才是子項索引,否則為0.

3.*pResult = CDRF_DODEFAULT;表示可以開始繪製,不再做其他處理

4.*pResult = CDRF_NOTIFYITEMDRAW;通知繪製整行消息 ,讓nNMCustomdraw得到 CDDS_ITEMPREPAINT消息,此通知要在CDDS_PREPAINT中發出

5.*pResult = CDRF_NOTIFYSUBITEMDRAW;通知繪製每個表格項 ,讓nNMCustomdraw得到CDDS_SUBITEM  |CDDS_ITEMPREPAINT消息,此通知要在 CDDS_ITEMPREPAINT中發出

6.pLVCD->nmcd.dwItemSpec表示當前行的索引值
  pLVCD->iSubItem表示當前列的索引值
  pLVCD->clrText代表當前單元格字體的顏色
  pLVCD->clrTextBk代表當前單元格背景色
      
7.CDDS_PREPAINT是一個繪製前信息

//網上例子:1

//設置單元格顏色。

  

  m_MyListCtrl.SetItemColor(0,1,RGB(255,0,0),RGB(0,255,0));//沒有試過

//網上例子:2//可以調通    

if ( CDDS_PREPAINT ==pLVCD->nmcd.dwDrawStage )
    {
        *pResult = CDRF_NOTIFYITEMDRAW;
    }
    else if ( CDDS_ITEMPREPAINT == pLVCD->nmcd.dwDrawStage )
    {
        // This is the notification message for an item. We'll request
        // notifications before each subitem's prepaint stage.

        *pResult = CDRF_NOTIFYSUBITEMDRAW;
    }
    else if ( (CDDS_ITEMPREPAINT | CDDS_SUBITEM) == pLVCD->nmcd.dwDrawStage )
    {
        int nItem=static_cast<int>(pLVCD->nmcd.dwItemSpec );
        switch(pLVCD->iSubItem)
        {
        case 2:    
        case 4:    
            { 
                if (nItem % 2 == 0)
                {

                    COLORREF clrNewTextColor, clrNewBkColor;
                    clrNewTextColor = RGB(0,0,0);
                    clrNewBkColor = RGB(198,202,198);

                    pLVCD->clrText =clrNewTextColor;
                    pLVCD->clrTextBk =clrNewBkColor;
                    *pResult = CDRF_DODEFAULT;
                    break;
                }
            }    
        default:
            pLVCD->clrText = RGB(0,0,0);
            pLVCD->clrTextBk = RGB(255,255,255);
            *pResult = CDRF_DODEFAULT;
            break;
        } 
    }


//本人改進://pass 顯示綠色,fail 顯示紅色

NMLVCUSTOMDRAW* pLVCD = reinterpret_cast<NMLVCUSTOMDRAW*>(pNMHDR);

    if ( CDDS_PREPAINT ==pLVCD->nmcd.dwDrawStage )
    {
        *pResult = CDRF_NOTIFYITEMDRAW;
    }
    else if ( CDDS_ITEMPREPAINT == pLVCD->nmcd.dwDrawStage )
    {
        *pResult = CDRF_NOTIFYSUBITEMDRAW;
    }
    else if ( (CDDS_ITEMPREPAINT | CDDS_SUBITEM) == pLVCD->nmcd.dwDrawStage )
    {
        int nItem=static_cast<int>(pLVCD->nmcd.dwItemSpec );
        if((pLVCD->iSubItem==5)&&(m_List2.GetItemText(nItem,5)=="Pass"))
        {                 
                    COLORREF clrNewBkColor;                    
                    clrNewBkColor = RGB(0,255,0);
                    pLVCD->clrTextBk =clrNewBkColor;
                    *pResult = CDRF_DODEFAULT;                
        } 
        else if((pLVCD->iSubItem==5)&&(m_List2.GetItemText(nItem,5)=="Fail"))
        {
                COLORREF clrNewBkColor;                    
                clrNewBkColor = RGB(255,0,0);
                pLVCD->clrTextBk =clrNewBkColor;
                *pResult = CDRF_DODEFAULT;            
        }
    }

 

在不同的开发场景中,动态增加 class 来控制表单元颜色有不同的实现方法,以下以 Vue3 + ElementPlus 和普通 HTML + JavaScript 两种场景为例进行说明。 ### Vue3 + ElementPlus 场景 在 Vue3 Element plus 项目里,要实现 table 表列表根据单元的值动态设置背景色,可通过动态绑定 class 来达成。 ```vue <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="type" label="类型"></el-table-column> <el-table-column prop="value" label="值"> <template #default="scope"> <span :class="getCellStyle(scope.row)">{{ scope.row.value }}</span> </template> </el-table-column> </el-table> </template> <script setup> import { ref } from 'vue'; const tableData = ref([ { type: 'A', value: 10 }, { type: 'B', value: 20 }, { type: 'A', value: 30 } ]); const getCellStyle = (row) => { if (row.type === 'A') { return 'cell-color-a'; } else if (row.type === 'B') { return 'cell-color-b'; } return ''; }; </script> <style scoped> .cell-color-a { background-color: lightblue; } .cell-color-b { background-color: lightgreen; } </style> ``` 在上述代码中,借助 `:class` 指令动态绑定 class,依据单元的值返回不同的 class 名称,从而控制单元颜色 [^1]。 ### 普通 HTML + JavaScript 场景 在普通的 HTML + JavaScript 项目中,可通过操作 DOM 动态添加 class 来控制表单元颜色。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态添加 class 控制表单元颜色</title> <style> .cell-color-red { background-color: red; } .cell-color-green { background-color: green; } </style> </head> <body> <table id="myTable"> <tr> <td>10</td> <td>20</td> </tr> <tr> <td>30</td> <td>40</td> </tr> </table> <script> const table = document.getElementById('myTable'); const cells = table.getElementsByTagName('td'); for (let i = 0; i < cells.length; i++) { const cellValue = parseInt(cells[i].textContent); if (cellValue > 20) { cells[i].classList.add('cell-color-red'); } else { cells[i].classList.add('cell-color-green'); } } </script> </body> </html> ``` 在这段代码中,先获取表的所有单元,接着遍历每个单元,依据单元的值添加不同的 class,进而控制单元颜色
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值