위와 같이 DB를 받았을때 테이블 모양을 위 처럼 나오게 하고 싶었다.
우선 DB에서 Vo로 담아서 View단 까지 가져와 console.log에 찍어봤을때 아래와 같이 나옴
이제 OrderNo를 기준으로 같은 이름이 반복되면 ++ 시켜서 넣은 값을 기준으로 rowspan을 하겠다.
|
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
function drawOrderTable(data) {
$("#orderlist").empty();
if (data == "") {
return;
} else {
}
let oldOrderNo = 0;
let oldOrderNum = 0;
let SizeIndex = -1;
let OrderNoSize = [];
// 같은 번호를 묶는거 우선 실행
$.each(data.OrderManageViewVo, function(i, elt) {
if (oldOrderNo != elt.orderNo) {
oldOrderNo = elt.orderNo;
oldOrderNum = 1;
SizeIndex++;
OrderNoSize[SizeIndex] = oldOrderNum;
} else {
oldOrderNum++;
OrderNoSize[SizeIndex] = oldOrderNum;
}
});
console.log(OrderNoSize);
oldOrderNo=0;
SizeIndex = -1;
// 묶였으면 출력하자.
$
.each(
data.OrderManageViewVo,
function(i, elt) {
console.log(i + " : " + elt);
let output = '<tr>';
if (oldOrderNo != elt.orderNo) { // 처음 한줄은 rowspen을 입력
oldOrderNo = elt.orderNo;
SizeIndex++;
output += '<td class="boardRightGray" rowspan="'+OrderNoSize[SizeIndex]+'"><input type="checkbox" name="productCheck" /></td>';
output += '<td class="boardRightGray" rowspan="'+OrderNoSize[SizeIndex]+'">'
+ elt.orderTime + '</td>';
output += '<td class="boardRightGray" rowspan="'+OrderNoSize[SizeIndex]+'">'
+ elt.orderNo + '</td>';
output += '<td class="boardRightGray" rowspan="'+OrderNoSize[SizeIndex]+'">'
+ elt.name;
if (elt.sessionId != null) {
output += '<br/>[비회원]</td>';
} else {
output += '<br/>[회원]</td>';
}
output += '<td class="boardRightGray">'
+ elt.productName + '</td>';
output += '<td class="boardRightGray">'
+ elt.qty + '</td>';
output += '<td class="boardRightGray">'
+ elt.price + '</td>';
output += '<td class="boardRightGray">'
+ elt.transAddress + '<br/>'
+ elt.transHome + ' '
+ elt.transDetailedHome + '<br/>'
+ elt.userName + ' ' + elt.phoneNum
+ '</td>';
output += '<td class="boardRightGray">'
+ elt.state + '</td>';
output += '<td class="boardRightGray"><button type="button" class="saveBtn btn btn-block bg-gradient-secondary btn-sm" onclick="showSearchBox()">상세보기</button></td>';
} else { // 나머지는 그냥 입력
output += '<td class="boardRightGray">'
+ elt.productName + '</td>';
output += '<td class="boardRightGray">'
+ elt.qty + '</td>';
output += '<td class="boardRightGray">'
+ elt.price + '</td>';
output += '<td class="boardRightGray">'
+ elt.transAddress + '<br/>'
+ elt.transHome + ' '
+ elt.transDetailedHome + '<br/>'
+ elt.userName + ' ' + elt.phoneNum
+ '</td>';
output += '<td class="boardRightGray">'
+ elt.state + '</td>';
output += '<td class="boardRightGray"><button type="button" class="saveBtn btn btn-block bg-gradient-secondary btn-sm" onclick="showSearchBox()">상세보기</button></td>';
}
output += '</tr>';
$("#orderlist").append(output);
});
}
|
cs |
위와 같이 작성하여 테이블 위치에 출력함
콘솔로 출력해보면 위와 같이 연속된 숫자 횟수를 볼수 있다.
출력 결과
'업무관련 > 스프링' 카테고리의 다른 글
| websocket으로 채팅방 만들기 (0) | 2023.07.11 |
|---|---|
| 페이징 알고리즘 간단한 코드 paging code (0) | 2023.03.31 |
| gitignore 깃허브 Spring 공유하기 (0) | 2023.03.31 |
| 다양하게 사용할 수 있는 예/아니오 알림 모달창 만들기 (0) | 2023.03.31 |
| juso.go.kr 제공하는 도로명 주소 api를 사용하여 찾기 Spring (0) | 2023.03.31 |