VueJS 그리드 그룹 질문드립니다.
추천0 비추천 0
페이지 정보
작성자 헌집주인
작성일 2022-04-11 19:57 조회 1,215회
댓글 0건
제품 버전 : 5.20213.834
컨트롤 이름 : 그리드 그룹
본문
관련링크
안녕하세요, 그리드 그룹 질문드립니다.
https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/Grouping/GroupPanelContextMenu/vue
위 주소에서 다음의 소스로 테스트를 했습니다.
그리드 로딩 시 그룹이 닫혀있게 하려면 어떻게 하면 되는지요?
<template>
<div class="container-fluid">
<wj-flex-grid
:itemsSource="data"
:initialized="initializedGrid">
</wj-flex-grid>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import '@grapecity/wijmo.touch'; // support drag/drop on touch devices
import "@grapecity/wijmo.vue2.grid";
import "@grapecity/wijmo.vue2.grid.filter";
import { CollectionView, PropertyGroupDescription, SortDescription } from "@grapecity/wijmo";
import "@grapecity/wijmo.vue2.grid.grouppanel";
import "@grapecity/wijmo.vue2.input"; // for the menu
let App = Vue.extend({
name: "app",
data: function() {
return {
data: new CollectionView(this.getData(), {
groupDescriptions: ['country']
}),
grid: null,
groupIndex: -1,
};
},
methods: {
// save references to the controls
initializedGrid: function(grid) {
this.grid = grid;
},
// create some random data
getData: function() {
let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
products = "Phones,Computers,Cameras,Stereos".split(","),
data = [];
for (let i = 0; i < 200; i++) {
data.push({
id: i,
country: countries[i % countries.length],
product: products[i % products.length],
downloads: Math.round(100 + Math.random() * 10000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
}
}
});
new Vue({ render: h => h(App) }).$mount("#app");
</script>
<style>
.wj-flexgrid {
max-height: 250px;
margin: 10px 0;
}
.wj-dropdown-panel.ctx-menu {
background: rgb(221, 250, 255);
padding: 1em;
}
.wj-dropdown-panel.ctx-menu span {
margin-right: 0.5em;
opacity: 0.5;
}
body {
margin-bottom: 20px;
}
</style>
댓글목록
등록된 댓글이 없습니다.
1 답변
