首页 › 求助中心 › 列头、行头合并的问题

迷彩 发表于 2020-3-25 14:56:32

列头、行头合并的问题

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

KevinChen 发表于 2020-3-26 15:02:45

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

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

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

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

迷彩 发表于 2020-3-26 22:35:11

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

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

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

KevinChen 发表于 2020-3-27 11:22:49

本帖最后由 KevinChen 于 2020-3-27 11:25 编辑

1、把以下代码替换到示例中，可以看效果：
app.js:
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@grapecity/wijmo.grid';
import { getData } from './data';
import * as wjCore from '@grapecity/wijmo';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
    //
    // grid with merged headers
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
      allowMerging: 'ColumnHeaders',
      alternatingRowStep: 0,
      autoGenerateColumns: false,
      columns: [
            { binding: 'country', header: 'Country', allowMerging: true },
            { binding: 'sales', header: 'Sales', format: 'n2' },
            { binding: 'expenses', header: 'Expenses', format: 'n2' },
            { binding: 'active', header: 'Active', allowMerging: true },
      ],
      itemsSource: getData()
    });
    //
    // create extra header row
    var extraRow = new wjGrid.Row();
    extraRow.allowMerging = true;
    //
    // add extra header row to the grid
    var panel = theGrid.columnHeaders;
    panel.rows.splice(0, 0, extraRow);
    //
    // populate the extra header row
    for (let colIndex = 1; colIndex <= 2; colIndex++) {
      panel.setCellData(0, colIndex, 'Amounts');
    }
    //
    // merge "Country" and "Active" headers vertically
    ['country', 'active'].forEach(function (binding) {
      let col = theGrid.getColumn(binding);
      col.allowMerging = true;
      panel.setCellData(0, col.index, col.header);
    });
    //
    // center-align merged header cells
    theGrid.formatItem.addHandler(function (s, e) {
      // 在这里加样式，可以补充条件
      if(e.panel == s.columnHeaders){
            wjCore.toggleClass(e.cell, 'header-border', true);
      }
      if (e.panel == s.columnHeaders && e.range.rowSpan > 1) {
            var html = e.cell.innerHTML;
            e.cell.innerHTML = '<div class="v-center">' + html + '</div>';
      }
    });
}


style.css: 声明自己的border样式类
.wj-flexgrid {
max-height: 200px;
margin-bottom: 12px;
}
.wj-cell .v-center {
position: relative;
top: 50%;
      transform: translateY(-50%);
white-space: pre-wrap;
}

.header-border {
border-left: 1px solid red;
border-right: 1px solid blue;
}

body {
margin-bottom: 24px;
}


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

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

查看完整版本: 列头、行头合并的问题