列头、行头合并的问题

两个问题：
1.如何修改表头第一行的样式呢？想把边也改成黑色的
2.点击第二行表头排序，上面第一行也会跟着一起变，如何不让第一行跟着下面变化呢

您好，排序的问题，可以参考这篇示例：

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

不清楚您具体怎么实现的排序和样式调整，

如果仍无法解决，请提供一个Demo，我排查一下看看怎么解决问题。

KevinChen 发表于 2020-3-26 15:02
您好，排序的问题，可以参考这篇示例：

https://demo.grapecity.com.cn/wijmo/demos/Grid/Merging/Heade ...

我就是按照这个例子做的，请大神仔细看一下我的问题和图片】两个问题：
1.如何修改表头第一行的样式呢？想把边也改成黑色的
2.点击第二行表头排序，上面第一行也会跟着一起变，如何不让第一行跟着下面变化呢

1、把以下代码替换到示例中，可以看效果：
app.js:

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import * as wjGrid from '@grapecity/wijmo.grid';
   
5. import { getData } from './data';
   
6. import * as wjCore from '@grapecity/wijmo';
   
7. //
   
8. document.readyState === 'complete' ? init() : window.onload = init;
   
9. //
   
10. function init() {
    
11.     //
    
12.     // grid with merged headers
    
13.     var theGrid = new wjGrid.FlexGrid('#theGrid', {
    
14.         allowMerging: 'ColumnHeaders',
    
15.         alternatingRowStep: 0,
    
16.         autoGenerateColumns: false,
    
17.         columns: [
    
18.             { binding: 'country', header: 'Country', allowMerging: true },
    
19.             { binding: 'sales', header: 'Sales', format: 'n2' },
    
20.             { binding: 'expenses', header: 'Expenses', format: 'n2' },
    
21.             { binding: 'active', header: 'Active', allowMerging: true },
    
22.         ],
    
23.         itemsSource: getData()
    
24.     });
    
25.     //
    
26.     // create extra header row
    
27.     var extraRow = new wjGrid.Row();
    
28.     extraRow.allowMerging = true;
    
29.     //
    
30.     // add extra header row to the grid
    
31.     var panel = theGrid.columnHeaders;
    
32.     panel.rows.splice(0, 0, extraRow);
    
33.     //
    
34.     // populate the extra header row
    
35.     for (let colIndex = 1; colIndex <= 2; colIndex++) {
    
36.         panel.setCellData(0, colIndex, 'Amounts');
    
37.     }
    
38.     //
    
39.     // merge "Country" and "Active" headers vertically
    
40.     ['country', 'active'].forEach(function (binding) {
    
41.         let col = theGrid.getColumn(binding);
    
42.         col.allowMerging = true;
    
43.         panel.setCellData(0, col.index, col.header);
    
44.     });
    
45.     //
    
46.     // center-align merged header cells
    
47.     theGrid.formatItem.addHandler(function (s, e) {
    
48.         // 在这里加样式，可以补充条件
    
49.         if(e.panel == s.columnHeaders){
    
50.             wjCore.toggleClass(e.cell, 'header-border', true);
    
51.         }
    
52.         if (e.panel == s.columnHeaders && e.range.rowSpan > 1) {
    
53.             var html = e.cell.innerHTML;
    
54.             e.cell.innerHTML = '<div class="v-center">' + html + '</div>';
    
55.         }
    
56.     });
    
57. }
    

复制代码

1. 
   

复制代码

style.css: 声明自己的border样式类

1. .wj-flexgrid {
   
2.   max-height: 200px;
   
3.   margin-bottom: 12px;
   
4. }
   
5. .wj-cell .v-center {
   
6.   position: relative;
   
7.   top: 50%;
   
8.         transform: translateY(-50%);
   
9.   white-space: pre-wrap;
   
10. }
    
11. 
    
12. .header-border {
    
13.   border-left: 1px solid red;
    
14.   border-right: 1px solid blue;
    
15. }
    
16. 
    
17. body {
    
18.   margin-bottom: 24px;
    
19. }
    

复制代码

示例地址：https://demo.grapecity.com.cn/wijmo/demos/Grid/Merging/HeaderMerging/purejs
参考地址：https://demo.grapecity.com.cn/wijmo/demos/Grid/Styling/Columns/purejs

2、按示例的方式实现，下层列头排序时不会影响上层列头的样式，如图：