且随疾风前行 发表于 2020-6-1 17:39:33

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

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

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


KevinChen 发表于 2020-6-1 17:39:34

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

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

    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]
查看完整版本: grid分组后自定义分组栏所在行的高度