IT/Vue
DevExtreme) DxDataGrid Merge Function
2T1
2023. 3. 27. 18:47
Explain
mergeColums : 병합하고 싶은 colum의 index를 조건으로 줍니다.
1. 해당 예시에서는 “col1” 을 우선 병합하고,
2. col1 + col4가 동일한 "col4"를 병합,
3. col1 + col2 + col4 가 일치하는 "col2"가 있다면 병합합니다.
우선순위 : col1[0], col4[3], col2[1]
@cell-prepared="(...args) => onCellPrepared(...args, mergeColums)"
기본적인 함수 형태는 @cell-prepared="onCellPrepared"입니다. 파라미터로 해당 cell의 정보를 받아옵니다.
병합조건에 추가 하고 싶지만 병합을 원하지 않는 cell이 있을 경우, 병합을 원하는 column에 allowMerge="true" 를 추가합니다. 그리고 onCellPrepared 함수 내의 if 문에 조건을 allowMerge를 확인하는 조건을 추가합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<script setup>
import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';
import { ref } from 'vue';
const data = ref([
{ id: 0, col1: 'a', col2: 'A', col3: '1', col4: '' },
{ id: 1, col1: 'b', col2: 'A', col3: '2', col4: 'ex' },
{ id: 2, col1: 'b', col2: 'B', col3: '2', col4: '' },
{ id: 3, col1: 'b', col2: 'B', col3: '2', col4: 'ex' },
{ id: 4, col1: 'c', col2: 'C', col3: '', col4: '' },
{ id: 4, col1: 'c', col2: 'C', col3: '2', col4: '' },
{ id: 3, col1: 'c', col2: 'A', col3: '1', col4: '' },
]);
// const mergeColums = ref([[0], [1, 2], [3]]);
const mergeColums = ref([[0], [3], [1]]);
const onCellPrepared = (cell, options) => {
if (cell.rowType == 'data') {
const mergeByColumnIndex = (columns, option) => {
// if (cell.column.allowMerge && option.includes(cell.columnIndex)) {
if (option.includes(cell.columnIndex)) {
let r = cell.rowIndex;
const isSameCellDataRowUp = (c) => cell.component.cellValue(r - 1, c) == cell.component.cellValue(r, c);
const isSameCellDataRowDown = (c) => cell.component.cellValue(r + 1, c) == cell.component.cellValue(r, c);
if (columns.every(isSameCellDataRowUp)) {
cell.cellElement.style.display = 'none';
} else {
while (columns.every(isSameCellDataRowDown)) {
r++;
cell.cellElement.rowSpan += 1;
}
}
}
};
let columns = [];
for (let option of options) {
columns = [...columns, ...option];
mergeByColumnIndex(columns, option);
}
}
};
</script>
<template>
<div class="dataGrid">
<DxDataGrid
id="mainTable1"
key-expr="id"
:data-source="data"
:show-row-lines="true"
:show-borders="true"
@cell-prepared="(...args) => onCellPrepared(...args, mergeColums)"
>
<DxColumn
data-field="col1"
:width="120"
/>
<!-- allowMerge="true" />-->
<DxColumn
data-field="col2"
:width="150"
/>
<DxColumn
data-field="col3"
:width="350"
/>
<DxColumn
data-field="col4"
:width="100"
/>
</DxDataGrid>
</div>
</template>
|
cs |