grid分组后自定义分组栏所在行的高度
问题: grid分组后自定义分组栏所在行的高度尝试过用groupHeaderFormat去定义,但是不起作用。涉及到公司安全信息,代码就不贴出来了
您好,您的帖子应该是发到了其它的板块,所以没能及时看到和回复,抱歉。
这个问题可以用事件来解决,参考代码:
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,
product: products,
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/wijmo/demos/Grid/Grouping/Groups/purejs
页:
[1]