表头修改字体颜色

有需要必填子段的表头，字体颜色变成红色，并且在前面有个红色 * 号提示出来
表头颜色修改，不是列的颜色不变

您好，请参考这段代码：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import { Globalize } from '@grapecity/wijmo';
   
5. import { FlexGrid, Row, AllowMerging } from '@grapecity/wijmo.grid';
   
6. document.readyState === 'complete' ? init() : window.onload = init;
   
7. function init() {
   
8.     // generate some random data
   
9.     var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];
   
10.     for (var i = 0; i < 200; i++) {
    
11.         data.push({
    
12.             id: i,
    
13.             country: countries[i % countries.length],
    
14.             sales: Math.random() * 10000,
    
15.             expenses: Math.random() * 5000,
    
16.         });
    
17.     }
    
18.     // show data in a grid
    
19.     var theGrid = new FlexGrid('#theGrid', {
    
20.         isReadOnly: true,
    
21.         allowResizing: 'None',
    
22.         allowDragging: 'None',
    
23.         allowSorting: false,
    
24.         selectionMode: 'RowRange',
    
25.         alternatingRowStep: 0,
    
26.         autoGenerateColumns: false,
    
27.         columns: [
    
28.             { binding: 'id', header: 'ID', width: 50 },
    
29.             { binding: 'country', header: 'Country' },
    
30.             { binding: 'sales', header: 'Sales', width: 80, format: 'n0' },
    
31.             { binding: 'salesDiff', header: 'Diff', dataType: 'Number', width: 80, format: 'p0' },
    
32.             { binding: 'expenses', header: 'Expenses', width: 80, format: 'n0' },
    
33.             { binding: 'expensesDiff', header: 'Diff', dataType: 'Number', width: 80, format: 'p0' }
    
34.         ],
    
35.         itemsSource: data,
    
36.     });
    
37.     // insert extra column header row
    
38.     var ch = theGrid.columnHeaders, hr = new Row();
    
39.     ch.rows.insert(0, hr);
    
40.     // fill out headings in extra header row
    
41.     for (var i = 0; i < theGrid.columns.length; i++) {
    
42.         var hdr = ch.getCellData(1, i, false);
    
43.         if (hdr == 'Diff')
    
44.             hdr = ch.getCellData(1, i - 1, false);
    
45.         ch.setCellData(0, i, hdr);
    
46.     }
    
47.     // allow merging across and down extra header row
    
48.     theGrid.allowMerging = AllowMerging.ColumnHeaders;
    
49.     hr.allowMerging = true;
    
50.     theGrid.columns[0].allowMerging = true;
    
51.     theGrid.columns[1].allowMerging = true;
    
52.     // custom rendering for headers and "Diff" columns
    
53.     theGrid.formatItem.addHandler(function (s, e) {
    
54.         // center-align column headers
    
55.         var col = s.columns[e.col];
    
56.         if (e.panel == s.columnHeaders) {
    
57.             var htmlHeader = '<div class="v-center" ';
    
58.             if(col.binding === "country"){
    
59.                 htmlHeader += 'style="color:red;">*'
    
60.             }else{
    
61.                 htmlHeader += '>'
    
62.             }
    
63.             htmlHeader += e.cell.innerHTML + '</div>'
    
64.             e.cell.innerHTML = htmlHeader;
    
65.         }
    
66.         // custom rendering for "Diff" columns
    
67.         if (e.panel == s.cells) {
    
68.             if (e.row > 0 && (col.binding == 'salesDiff' || col.binding == 'expensesDiff')) {
    
69.                 var vnow = s.getCellData(e.row, e.col - 1), vprev = s.getCellData(e.row - 1, e.col - 1), diff = (vnow / vprev) - 1;
    
70.                 // format the cell
    
71.                 var html = '<div class="diff-{cls}">' +
    
72.                     '<span style="font-size:75%">{val}</span> ' +
    
73.                     '<span style="font-size:120%" class="wj-glyph-{glyph}"></span>';
    
74.                 html = html.replace('{val}', Globalize.format(diff, col.format));
    
75.                 if (diff < 0.01) {
    
76.                     html = html.replace('{cls}', 'down').replace('{glyph}', 'down');
    
77.                 }
    
78.                 else if (diff > 0.01) {
    
79.                     html = html.replace('{cls}', 'up').replace('{glyph}', 'up');
    
80.                 }
    
81.                 else {
    
82.                     html = html.replace('{cls}', 'none').replace('{glyph}', 'circle');
    
83.                 }
    
84.                 e.cell.innerHTML = html;
    
85.             }
    
86.         }
    
87.     });
    
88. }
    

复制代码

将代码替换到以下示例中可以预览效果：

https://demo.grapecity.com.cn/wi ... ionalStyling/purejs

可以是用 formatItem 事件，请参考示例
https://demo.grapecity.com.cn/wi ... ling/Columns/purejs

AlexZ 发表于 2020-1-14 09:51
可以是用 formatItem 事件，请参考示例
https://demo.grapecity.com.cn/wijmo/demos/Grid/Styling/Columns ...

可以给个示例吗，你这个示例是把列的颜色改变了，我需要的是把个别的表头的颜色改变掉

KevinChen 发表于 2020-1-20 16:46
您好，请参考这段代码：

谢谢

不客气，本帖结贴，有新的问题欢迎发新帖交流~