티스토리 뷰
예전만큼 검색에 의존한 개발이 아닌 요즘은 챗GPT 질문이면, 바로 해결 되는 경우가 많지만,
IBSheet 는 아무래도 GPT만으로는 어려운 경우가 많습니다. ( 아직 학습이 덜 된 상태 )
IBSheet가 문서화도 조금 부족한 편이라서, 생각보다 사용 방법을 찾는데 시간도 많이 걸려서, 저도 초반에 애좀 먹었는데
조금이나마 검색에 도움이 되었으면 해서 남겨봅니다.
IBSheet8 버전 기준
아래와 같이 헤더 2줄 병합만들기
|
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
|
<script type="text/javascript" language="javascript">
$(function() {
mainGrid();
});
function mainGrid(){
const mainSheet = {
Cfg: {
HeaderMerge:3,
SearchMode:2,
UseFilterDialog:0,
},
Def: {},
Cols:[
{Header:["NO","NO"],Name:"NO1",Type:"Text",Align:"Center"},
{Header:["구분1","A1"],Name:"A1",Type:"Text",Align:"Center"},
{Header:["구분1","B1"],Name:"B1",Type:"Text",Align:"Center"},
{Header:["구분2","A2"],Name:"A2",Type:"Text",Align:"Center"},
{Header:["구분2","B2"],Name:"B2",Type:"Text",Align:"Center"},
{Header:["구분2","C2"],Name:"C2",Type:"Text",Align:"Center"},
],
}
IBSheet.create({
id:"mySheet",
el:"mainGridDiv",
options:mainSheet,
data:[],
});
}
</script>
<body>
<div id="mainGridDiv" style="width:100%;height:100%;"></div>
</body>
|
cs |
약간의 코드 설명을 하자면, Cfg 는 시트 전역의 공통 설정입니다.
IBSheet Document 를 참고하시면 사용할 수 있는 설정들이 나옵니다.
중요한 부분은 HeaderMerge : 3 부분이며 아래 옵션값을 통해 설정한 내용을 확인해 보세요.
Cols 부분에 헤더 설정은, 각각 행 병합, 열 병합을 어떤 방법으로 적용할 수 있는지 간단한 예시입니다.
사용 방법만 알면, 사용은 쉬운편입니다.
HeaderMerge 숫자에 대한 옵션은 아래와 같으며, 더 자세한 내용은 공식 문서에서 확인할 수 있습니다.
그럼 이걸 확장해서 3줄 헤더 다양한 예시
|
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
|
<script type="text/javascript" language="javascript">
$(function() {
mainGrid();
});
function mainGrid(){
const mainSheet = {
Cfg: {
HeaderMerge:3,
SearchMode:2,
UseFilterDialog:0,
},
Def: {},
Cols:[
//열병합 : 3개 병합
{Header:["NO","NO","NO"],Name:"NO1",Type:"Text",Align:"Center"},
//행 병합 : 상단 첫줄 행5개 병합, 2번째줄 2,3개 병합, A2 2칸 병합
{Header:["대구분1","구분1","A1"],Name:"A1",Type:"Text",Align:"Center"},
{Header:["대구분1","구분1","B1"],Name:"B1",Type:"Text",Align:"Center"},
{Header:["대구분1","구분2","A2"],Name:"A2",Type:"Text",Align:"Center",Merge:2},
{Header:["대구분1","구분2","A2"],Name:"B2",Type:"Text",Align:"Center"},
{Header:["대구분1","구분2","C2"],Name:"C2",Type:"Text",Align:"Center"},
//열 병합 2칸
{Header:["카테1","카테고리","카테고리"],Name:"Ct",Type:"Text",Align:"Center"},
//행 병합 첫줄 3칸 두번째줄 2칸
{Header:["대구분2","소구분1","A2"],Name:"A3",Type:"Text",Align:"Center"},
{Header:["대구분2","소구분1","B2"],Name:"B3",Type:"Text",Align:"Center"},
{Header:["대구분2","소구분2","C2"],Name:"C3",Type:"Text",Align:"Center"},
],
}
IBSheet.create({
id:"mySheet",
el:"mainGridDiv",
options:mainSheet,
data:[],
});
}
</script>
<body>
<div id="mainGridDiv" style="width:100%;height:100%;"></div>
</body>
|
cs |