그룹화 관련해서 문의 드립니다.

VueJS 그룹화 관련해서 문의 드립니다.

추천0 비추천 0

페이지 정보

작성자 ty90do

작성일 2023-11-02 20:05 조회 234회 댓글 0건

검색

제품 버전 : 최신버전

컨트롤 이름 : 위즈모 그룹화

본문

관련링크

wijmo grid에서 그룹화를 했을때 item count에 따라 1개 일때는 그룹화를 하지 않고 보일수 있도록 하는 방법 및 셈플 소스좀 알려주시면 감사하겠습니다.

참고로 아래처럼 1개 일때는 group화를 한게 펼쳐 지지 않은상태로 보였으면 하는데 해당 부분도 같이 할수 있도록 부탁 드립니다.

특히 vue로 셈플 소스 부탁 드립니다.(해당 부분을 찾아봐도 없는것 같아서.. 어떻게 해야 하는지 잘 모르겠네요...)

Source

<template>
  <div class="container-fluid">
      <wj-flex-grid
          :itemsSource="wijmoView" :initialized="initializedGrid">
          <wj-flex-grid-column binding="id" header="ID" :width="60" :isReadOnly="true" />
          <wj-flex-grid-column binding="country" header="Country" />
          <wj-flex-grid-column binding="product" header="Product" />
          <wj-flex-grid-column binding="sales" header="Sales" aggregate="Sum" />
          <wj-flex-grid-column binding="expenses" header="Expenses" aggregate="Sum" />
          <wj-flex-grid-column binding="profit" header="Profit" :dataType="2" :isReadOnly="true" :allowSorting="false" />
      </wj-flex-grid>
      <button @click="search()">search</button>
  </div>
</template>

<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import "@grapecity/wijmo.vue2.grid";
import * as wjcGrid from '@grapecity/wijmo.grid';
import * as wjcCore from '@grapecity/wijmo';
import { getData } from "./data";

new Vue({
  el: "#app",
  data: function() {
    return {
        data: new wjcCore.CollectionView(getData(), {
            groupDescriptions: [
                new wjcCore.PropertyGroupDescription('Grand Total', 
                    () => {
                        return '';
                    }),
                'country'
            ]
        }),
        wijmoGrid: null,
        wijmoView: null,
    };
  },
  methods:{
    initializedGrid(flex){
        this.wijmoGrid = flex;
    },
    search() {
        this.wijmoView = new wjcCore.CollectionView(getData());
        const gd = new wjcCore.PropertyGroupDescription('Grand Total', () => {
                        return '';
                    });
        this.wijmoView.groupDescriptions.push(gd);
        const gd1 = new wjcCore.PropertyGroupDescription('country');
        this.wijmoView.groupDescriptions.push(gd1);
        this.wijmoGrid.formatItem.addHandler((s, e) => {
            // cells and column footer panels only
            if (e.panel == s.cells) {
                // get row, column, and data item (or group description)
                let r = s.rows[e.row],
                    c = s.columns[e.col],
                    item = s.rows[e.row].dataItem,
                    group = r instanceof wjcGrid.GroupRow ? item : null,
                    negative = false; // assume value is not negative
                // calculate profit
                if (c.binding == 'profit') {
                    let profit = group
                        ? group.getAggregate('Sum', 'sales') - group.getAggregate('Sum', 'expenses')
                        : item.sales - item.expenses;
                    e.cell.textContent = wjcCore.Globalize.format(profit, c.format);
                    negative = profit < 0;
                }
                // update 'negative' class on cell
                wjcCore.toggleClass(e.cell, 'negative', negative);
            }
        });
        this.wijmoView.refresh();
    },
  }
});
</script>

<style>
  .wj-flexgrid {
    max-height: 250px;
    margin: 10px 0;
  }
  .wj-cell.wj-frozen-row {
      border-bottom: none;
  }
  .negative {
    color: red;
  }
  body {
    margin-bottom: 20px;
  }
</style>