zmzimpl 发表于 2020-5-12 15:26:34

pivotGird 的列宽设置

如何将pivotGird的列宽设置为*以达到自动占满宽度的效果？

KevinChen 发表于 2020-5-12 17:01:12

你好，请参考这篇示例：

https://demo.grapecity.com.cn/wijmo/demos/Grid/Columns/ColumnWidth/purejs

KevinChen 发表于 2020-5-12 17:37:47

你好，由于pivotGrid的列比较灵活，理论上是不便于穷举的，所以无法在刚开始就固定设置列宽，您可以参考我的方案，在updatedView事件里加入判断，修改列宽，参考代码：

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjCore from '@grapecity/wijmo';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjOlap from '@grapecity/wijmo.olap';
import { getData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
    //
    // initialize pivot engine
    var ng = new wjOlap.PivotEngine({
      itemsSource: getData(1000),
      valueFields: ['Amount'],
      rowFields: ['Buyer', 'Type'],
      showRowTotals: 'Subtotals',
      showColumnTotals: 'Subtotals',
    });
    var amountField = ng.fields.getField('Amount');
    amountField.format = 'c0';
    var dateField = ng.fields.getField('Date');
    dateField.format = 'yyyy'; // show dates as years
    //
    // show pivot grid
    var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', {
      itemsSource: ng,
      updatedView: function(s){
            var cols = s.columns;
            if(cols && cols.length>0){
                cols.forEach(function(col){
                  if(col.binding.indexOf("Books")>-1){
                        col.width = 500;
                  }
                });
            }
      }
    });
    // show pivot panel
    var pivotPanel = new wjOlap.PivotPanel('#pivotPanel', {
      itemsSource: ng
    });
    //
}


这段代码完整拷贝后，完全替换例子中的app.js即可看到效果：

https://demo.grapecity.com.cn/wijmo/demos/OLAP/PivotGrid/Overview/purejs

zmzimpl 发表于 2020-5-12 20:43:59

KevinChen 发表于 2020-5-12 17:37
你好，由于pivotGrid的列比较灵活，理论上是不便于穷举的，所以无法在刚开始就固定设置列宽，您可以参考我 ...

多谢了~可以解决

KevinChen 发表于 2020-5-13 09:01:42

谢谢反馈，本帖结贴，有新的问题欢迎发新帖交流~
页: [1]
查看完整版本: pivotGird 的列宽设置