VueJS input date, grid 그룹 등 몇가지 문의 사항
추천0 비추천 0
페이지 정보
작성자 ty90do
작성일 2023-10-21 15:20 조회 309회
댓글 0건
제품 버전 : 최신버전
컨트롤 이름 : input date, grid
본문
관련링크
1. input date 달력관련해서 format을 월로 하고 selection mode를 월로 해서 했는데 화면에서 변경할때는 format이 년월로 해서 나오는데, 값을 강제로 다른 값으로 변경하고 나니 년월일이 나오네요.. 실제 값은 년월일인데 selection mode/format이 년월이여서 화면에도 년월로 표시되는것 같습니다.
질문은 값을 강제로 변경했을때 년월일이 나오는데 이게 왜 그런지 모르겠네요.
date선택할때 년월일이 나와서 날짜(일)까지 선택하는것으로 화면이 나오고 있습니다.
해당 부분에 initgrid에서 처럼 강제로 년월이 나오도록 변경할 수 있는 방법좀 알려주시면 감사하겠습니다.
소스
<template>
<div class="container-fluid">
<div class="form-group">
<label for="theInputDate">InputDate</label>
<wj-input-date id="theInputDate" :initialized='initInputDate' :value="value" :format="'yyyyMM'">
</wj-input-date>
</div>
<button @click="changeValue()">change</button>
</div>
</template>
<script>
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.core';
import '@grapecity/wijmo.vue2.input';
let App = Vue.extend({
name: 'app',
data: function () {
let curr = new Date();
return {
firstDay: new Date('202209'),
lastDay: new Date('202311'),
inputDateGrid: null,
value: new Date(),
}
},
methods: {
onValueChanged: function(s){
this.value = s.value;
},
initInputDate: function(s) {
this.inputDateGrid = s;
this.inputDateGrid.selectionMode = 2;
},
changeValue: function(){
this.value = new Date('202209');
},
},
})
let vm = new Vue({ render: h => h(App) }).$mount('#app');
</script>
<style>
label {
width: 120px;
text-align: right;
margin-right: 3px;
}
body {
margin-bottom: 24px;
}
</style>
2. wijmo grid에서 그룹화를 했을때 보통 binding/header에 설정된 이름으로 나오도록 되어 있는데 혹시 binding은 변경안하더라도 header를 변경해서 group을 할수 있을까요(Grid에 나오는 컬럼 Header는 바꾸지 않고 밑에 group하는 부분에서만 Header를 변경하고 싶습니다.)? 아래 소스에서 변경할 수 있는지 확인 부탁 드립니다.( ex) Country:US(34items) -> TEST:US(34items) )
소스
<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>
댓글목록
등록된 댓글이 없습니다.
1 답변
