셀 템플릿 (Vue)
많이 사용되는 프레임워크를 위한 Wijmo interop을 통해 각 프레임워크의 자체 템플릿 마크업을 Wijmo의 FlexGridCellTemplate 클래스와 함께 사용해 FlexGrid 셀에 사용자 정의 콘텐츠를 선언적으로 정의할 수 있습니다.
이러한 템플릿에는 속성 및 이벤트 바인딩과 함께 임의의 컴포넌트 및 HTML 요소가 포함될 수 있습니다. 모든 유형의 그리드 셀을 템플릿을 사용해 정의할 수 있습니다(데이터 셀, 헤더 셀, 편집기 등).
이 샘플에서는 모든 셀 유형에 대한 템플릿이 포함된 그리드를 보여 줍니다. 템플릿은 체크박스를 선택/해제하여 동적으로 활성화 또는 비활성화할 수 있습니다.
FlexGrid 알아보기 | FlexGrid API 문서
이 데모는 Vue를 기반으로합니다.
app.vue
index.html
data.js
<template>
<div class="container-fluid">
<p>
Use a <b>wj-flex-grid-cell-template</b> element to define a cell template.
The content of the <b>wj-flex-grid-cell-template</b> element defines the cell content.
The <b>cellType</b> property specifies the type of the cells represented by the template.
Use a <b>v-slot</b> directive to define a variable that contains an object with cell
specific data, including the data item (<b>item</b>), row (<b>row</b>) and
column (<b>col</b>) that the cell represents.
</p>
<p>
Note that column-specific templates should be defined as children of
the corresponding <b>wj-flex-grid-column</b> component, while the others
are defined under the <b>wj-flex-grid</b> element.
</p>
<wj-flex-grid :itemsSource="itemsSource" :allowSorting="false" autoSizeMode="Both" allowResizing="Both"
:deferResizing="true" :initialized="initialized">
<wj-flex-grid-cell-template cellType="TopLeft" v-if="customTopLeft">
№
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cellType="BottomLeft" v-if="customBottomLeft">
Σ
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cellType="RowHeader" v-if="customRowHeader" v-slot="cell">
{{ cell.row.index + 1 }}
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cellType="RowHeaderEdit" v-if="customRowHeaderEdit">
...
</wj-flex-grid-cell-template>
<wj-flex-grid-column header="Country" binding="country" width="*">
<wj-flex-grid-cell-template cellType="Cell" v-if="customCell" v-slot="cell">
<img :src="'resources/' + cell.item.country + '.png'" />
{{ cell.item.country }}
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cellType="CellEdit" v-if="customCellEdit" v-slot="cell">
<wj-combo-box :itemsSource="countries" class="cell-editor" :selectedValue.sync="cell.value"
:isEditable="false">
</wj-combo-box>
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cellType="GroupHeader" v-if="customGroupHeader" v-slot="cell">
<input type="checkbox" v-model="cell.row.isCollapsed" />
{{ cell.item.name }} ({{ cell.item.items.length }} items)
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
<wj-flex-grid-column header="Downloads" binding="downloads" :width="170" aggregate="Sum">
<wj-flex-grid-cell-template cellType="ColumnHeader" v-if="customColumnHeader">
<input type="checkbox" v-model="highlightDownloads" />
Downloads
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cellType="Cell" v-if="customCell" v-slot="cell">
<span :style="{ color: highlightDownloads ? (cell.item.downloads > 10000 ? 'green' : 'red') : '' }"
style="font-weight:700">
{{ cell.item.downloads }}
</span>
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cellType="CellEdit" v-if="customCellEdit" v-slot="cell">
<wj-input-number class="cell-editor" v-model="cell.value" :step="1"></wj-input-number>
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cellType="Group" v-if="customGroup" v-slot="cell">
Sum = {{ formatNumber(cell.value, 'N0') }}
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cellType="ColumnFooter" v-if="customColumnFooter" v-slot="cell">
Sum = {{ formatNumber(cell.value, 'N0') }}
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
</wj-flex-grid>
<div class="checkbox-list">
<div class="checkbox-list-title">Column level templates:</div>
<div class="checkbox-cell">
<label class="checkbox">
<input type="checkbox" v-model="customCell" /> Cell
</label>
<label class="checkbox">
<input type="checkbox" v-model="customCellEdit" /> CellEdit
</label>
</div>
<div class="checkbox-cell">
<label class="checkbox">
<input type="checkbox" v-model="customColumnHeader" /> ColumnHeader
</label>
<label class="checkbox">
<input type="checkbox" v-model="customColumnFooter" /> ColumnFooter
</label>
</div>
<div class="checkbox-cell">
<label class="checkbox">
<input type="checkbox" v-model="customGroupHeader" /> GroupHeader
</label>
<label class="checkbox">
<input type="checkbox" v-model="customGroup" /> Group
</label>
</div>
<div class="checkbox-list-title">Grid level templates:</div>
<div class="checkbox-cell">
<label class="checkbox">
<input type="checkbox" v-model="customTopLeft" /> TopLeft
</label>
<label class="checkbox">
<input type="checkbox" v-model="customBottomLeft" /> BottomLeft
</label>
</div>
<div class="checkbox-cell">
<label class="checkbox">
<input type="checkbox" v-model="customRowHeader" /> RowHeader
</label>
<label class="checkbox">
<input type="checkbox" v-model="customRowHeaderEdit" /> RowHeaderEdit
</label>
</div>
</div>
</div>
</template>
<script setup>
import * as wjcCore from "@mescius/wijmo";
import * as wjcGrid from "@mescius/wijmo.grid";
import * as dataService from "./data";
import { ref } from "vue";
const itemsSource = ref(dataService.getCv(dataService.getData()));
const countries = ref(dataService.getCountries());
const customTopLeft = ref(true);
const customBottomLeft = ref(true);
const customRowHeader = ref(true);
const customRowHeaderEdit = ref(true);
const customCell = ref(true);
const customCellEdit = ref(true);
const customGroupHeader = ref(true);
const customColumnHeader = ref(true);
const customGroup = ref(true);
const customColumnFooter = ref(true);
const highlightDownloads = ref(true);
function initialized(grid, e) {
grid.columnFooters.rows.push(new wjcGrid.GroupRow());
}
function formatNumber(value, format) {
return wjcCore.Globalize.formatNumber(value, format);
}
</script>
<style>
body {
margin-bottom: 24px;
}
label {
margin-right: 3px;
}
.checkbox-list {
padding: 0 20px;
}
.checkbox-cell {
display: table-cell;
padding-right: 50px;
}
.checkbox-list .checkbox {
margin: 10px 0 0 0;
}
.checkbox-list-title {
font-size: 18px;
margin: 10px 0px 2px -20px;
}
.wj-flexgrid {
max-height: 350px;
max-width: 600px;
margin: 10px 0;
}
.wj-cell .cell-editor {
position: absolute;
left: 0px;
width: 100%;
border-radius: 0px;
margin: -4px 0 -3px 0;
}
</style>