首页 › 求助中心 › 关于透视表格折叠

xiaolong 发表于 2023-3-2 11:20:46

关于透视表格折叠

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

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

Richard.Ma 发表于 2023-3-2 11:20:47

pivotGrid.collapseRowsToLevel(1);

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

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

xiaolong 发表于 2023-3-2 17:34:49

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

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

放在vue里要怎么加呢

xiaolong 发表于 2023-3-2 17:41:27

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

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

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

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

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

xiaolong 发表于 2023-3-2 18:26:35

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


正常流程肯定是需要请求接口去获取数据的，我延迟加载一下就报错了
https://demo.grapecity.com.cn/wijmo/demos/OLAP/PivotGrid/ExpandCollapseRowColumn/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>

Richard.Ma 发表于 2023-3-3 09:40:18

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

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

xiaolong 发表于 2023-3-3 10:25:25

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

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

好的，谢谢

Richard.Ma 发表于 2023-3-3 11:54:22

不客气

查看完整版本: 关于透视表格折叠