关于透视表格折叠

https://demo.grapecity.com.cn/wi ... pseRowColumn/purejs

透视表格如何让所有分组默认折叠

pivotGrid.collapseRowsToLevel(1);

但是这句代码你得写到loadedRows事件中，也就是等grid加载完成后再设置

1.     var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', {
   
2.         itemsSource: ng,
   
3.         loadedRows:function(){
   
4.             pivotGrid.collapseRowsToLevel(1);
   
5.         }
   
6.     });

复制代码

Richard.Ma 发表于 2023-3-2 17:20
pivotGrid.collapseRowsToLevel(1);

但是这句代码你得写到loadedRows事件中，也就是等grid加载完成后 ...

放在vue里要怎么加呢

Richard.Ma 发表于 2023-3-2 17:20
pivotGrid.collapseRowsToLevel(1);

但是这句代码你得写到loadedRows事件中，也就是等grid加载完成后 ...

this.pivotGrid.loadedRows = (() => {this.pivotGrid.collapseRowsToLevel(1)})
我这样写报错了

1.             this.pivotGrid.loadedRows.addHandler((s,e) => {this.pivotGrid.collapseRowsToLevel(1)});

复制代码

Richard.Ma 发表于 2023-3-2 17:59

正常流程肯定是需要请求接口去获取数据的，我延迟加载一下就报错了
https://demo.grapecity.com.cn/wi ... llapseRowColumn/vue
文件是app.vue



<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-5">
                <wj-pivot-panel :items-source="ng"></wj-pivot-panel>
            </div>
            <div class="col-xs-7">
                <wj-pivot-grid :items-source="ng" :initialized="initializePivotGrid"></wj-pivot-grid>
            </div>
        </div>
        <p>
            You can configure the <b>PivotEngine</b> to show the subtotals
            before or after the data using the <b>totalsBeforeData</b>
            property:
        </p>
        <label>
            totalsBeforeData:
            <input id="totalsBeforeData" type="checkbox" v-on:click="onTotalsBeforeDataClick">
        </label>
        <p>
            You can configure the <b>PivotGrid</b> to make row and column
            groups collapsible using the <b>collapsibleSubtotals</b>
            property:
        </p>
        <label>
            collapsibleSubtotals:
            <input id="collapsibleSubtotals" type="checkbox" checked v-on:click="onCollapsibleSubtotalsClick">
        </label>
    </div>
</template>
<script>
import '@grapecity/wijmo.styles/wijmo.css';
import 'bootstrap.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.olap';
import * as wjcOlap from '@grapecity/wijmo.olap';
import { getData } from './data'

let App = Vue.extend({
    name: "app",
    data: function() {
        return {
            ng: null
        };
    },
    mounted: function() {
        this.a();
    },
    methods: {
        initializePivotGrid(pivotGrid) {
            this.pivotGrid = pivotGrid;
            this.pivotGrid.loadedRows.addHandler((s,e) => {
                 this.pivotGrid.collapseRowsToLevel(1)
            });
        },
        a(){
            setTimeout(()=>{
                this.ng=new wjcOlap.PivotEngine({
                    itemsSource: getData(1000), // raw data
                    valueFields: ['Amount'], // summarize amounts
                    rowFields: ['Buyer', 'Type'], // by buyer and Type
                    showRowTotals: 'Subtotals',
                    showColumnTotals: 'Subtotals',
                })
            },1000)
        },
        onTotalsBeforeDataClick(e) {
            this.pivotGrid.engine.totalsBeforeData = e.target.checked;
        },

        onCollapsibleSubtotalsClick(e) {
            this.pivotGrid.collapsibleSubtotals = e.target.checked;
        }
    }
});

new Vue({ render: h => h(App) }).$mount("#app");
</script>

<style>
.wj-pivotgrid {
    max-height: 400px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.container > label {
    margin: 0 0 2em 2em;
}
body {
  margin-bottom: 24pt;
}
</style>

报错是因为你在模板中给pivotgird设置的itemssource是空的。

你可以先随便初始化一个PivotEngine出来作为ng，然后延迟加载时再去更新这个pivotengine就能解决问题

Richard.Ma 发表于 2023-3-3 09:40
报错是因为你在模板中给pivotgird设置的itemssource是空的。

你可以先随便初始化一个PivotEngine出来作 ...

好的，谢谢

不客气