列头、行头合并的问题

登录

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

KevinChen · KevinChen

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

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.点击第二行表头排序，上面第一行也会跟着一起变，如何不让第一行跟着下面变化呢

KevinChen · KevinChen

本帖最后由 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、按示例的方式实现，下层列头排序时不会影响上层列头的样式，如图：

		自动登录	找回密码
密码			立即注册

[已处理] 列头、行头合并的问题

本帖子中包含更多资源

3 个回复

本帖子中包含更多资源

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章