VueJS 그리드 columnFooters 문의드립니다.
추천0 비추천 0
페이지 정보
작성자 헌집주인 작성일 2022-04-19 16:09 조회 1,552회 댓글 1건제품 버전 : 5.20213.834
컨트롤 이름 : 그리드
본문
관련링크
안녕하세요, 그리드 columnFooters 문의드립니다.
다음 데모페이지에서 본문첨부한 소스로 테스트를 했습니다.
문의드릴 것은 columnFooters 가 고정된 그리드 높이 하단에 고정되게 하는 옵션이 있는지 입니다
감사합니다.
https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/Aggregation/Belowthedata/vue
<template>
<div class="container-fluid">
<wj-flex-grid
:itemsSource="data" :initialized="initializedGrid" style="height:200px;border:solid 2px red;">
<wj-flex-grid-column binding="id" header="ID" :width=60 :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="country" header="Country"></wj-flex-grid-column>
<wj-flex-grid-column binding="product" header="Product"></wj-flex-grid-column>
<wj-flex-grid-column binding="sales" header="Sales" aggregate="Sum"></wj-flex-grid-column>
<wj-flex-grid-column binding="expenses" header="Expenses" aggregate="Sum"></wj-flex-grid-column>
</wj-flex-grid>
</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';
new Vue({
el: "#app",
data: function() {
return {
data: this.getData()
};
},
methods:{
initializedGrid(flex){
flex.columnFooters.rows.push(new wjcGrid.GroupRow());
flex.bottomLeftCells.setCellData(0, 0, 'Σ');
},
getData() {
let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
products = 'Phones,Computers,Cameras,Stereos'.split(','),
data = [];
for (let i = 0; i < 3; i++) {
data.push({
id: i,
country: countries[i % countries.length],
product: products[i % products.length],
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
}
},
});
</script>
<style>
.wj-flexgrid {
max-height: 250px;
margin: 10px 0;
}
body {
margin-bottom: 20px;
}
</style>