grid分组后自定义分组栏所在行的高度

登录

问题: grid分组后自定义分组栏所在行的高度

尝试过用groupHeaderFormat去定义，但是不起作用。涉及到公司安全信息，代码就不贴出来了

KevinChen · KevinChen

您好，您的帖子应该是发到了其它的板块，所以没能及时看到和回复，抱歉。

这个问题可以用事件来解决，参考代码：

theGrid.updatedView.addHandler(function(s,e){
var rows = s.rows;
rows.forEach(function(row){
if(row && (row instanceof wjGrid.GroupRow)){
row.height = 50;
}
});
});

复制代码

在 FlexGrid的updatedView事件中，判断当前的行是否GroupRow类型，如果是，更改它的高度即可。

完整代码请参考：

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjCore from '@grapecity/wijmo';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Phones,Computers,Cameras,Stereos'.split(','), data = [];
for (var i = 0; i < 200; i++) {
data.push({
id: i,
country: countries[i % countries.length],
product: products[i % products.length],
downloads: Math.round(100 + Math.random() * 10000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
});
}
//
// basic grouping
var theGrid = new wjGrid.FlexGrid('#theGrid', {
itemsSource: new wjCore.CollectionView(data, {
sortDescriptions: ['country', 'product'],
groupDescriptions: ['country', 'product']
})
});
//
// select first item (after sorting/grouping)
theGrid.select(new wjGrid.CellRange(0, 0), true);
theGrid.updatedView.addHandler(function(s,e){
var rows = s.rows;
rows.forEach(function(row){
if(row && (row instanceof wjGrid.GroupRow)){
row.height = 50;
}
});
});
//
// hide columns being grouped on
var theGridHideCols = new wjGrid.FlexGrid('#theGridHideCols', {
autoGenerateColumns: false,
columns: [
{ binding: 'country', header: 'Country', visible: false },
{ binding: 'product', header: 'Product', visible: false },
{ binding: 'downloads', header: 'Downloads', width: '*' },
{ binding: 'sales', header: 'Sales', width: '*' },
{ binding: 'expenses', header: 'Expenses', width: '*' },
],
itemsSource: new wjCore.CollectionView(data, {
sortDescriptions: ['country', 'product'],
groupDescriptions: ['country', 'product']
})
});
//
// select first item (after sorting/grouping)
theGridHideCols.select(new wjGrid.CellRange(0, 2), true);
}

复制代码

将以上代码完整复制，替换掉示例的App.js即可看到效果：
https://demo.grapecity.com.cn/wi ... uping/Groups/purejs

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

[已处理] grid分组后自定义分组栏所在行的高度

最佳答案

1 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章