- Grid > Cell 병합
http://cafe.naver.com/xplatform101/159아마도 셀 병합은 국내 기업 환경에서 많이 요구하는 사항일 겁니다.
요구사항은 엑셀이지만 아무래도 그정도까지 가져가기는 쉽지 않지만
엑스플랫폼에서 제공하는 그리드 옵션에서는 상당히 많은 부분까지 쉽게 구현할 수 있는 구조를 제공하고 있습니다.
일반적으로 많이 사용하는 동일한 데이터 병합을 살펴보겠습니다.
단순 셀 병합
1. 그리드를 만듭니다.
2. 데이터셋을 만들고 데이터를 집어넣습니다.
3. 그리드에 데이터셋을 바인딩합니다.
뭐 여기까지는 앞에서 많이 보았으니깐..ㅎㅎ
이제 그리드를 더블클릭하고 에디터로 들어가서
병합을 하고자 하는 셀의 suppress 속성을 사용합니다.
이 속성의 설명을 보면 '복수개의 Row에 같은 Column의 Cell의 값이 같을 때, 이를 하나로 합하는 레벨을 설정하는 Property 입니다.'라고 되어있습니다. Cell의 값이라는 것은 실제적인 텍스트를 이야기하는 거죠. 위의 예제에서 col1에서 라면류, 빙과류와 col2에서 심양, 농섬, 방그레, 로데...와 같은 것을 의미합니다.
설정은 각 컬럼 body 셀에 설정하게 되어 있습니다.
이렇게 설정을 해주면 동일한 그리드에 동일한 바인딩인데 결과가 달라집니다.
여기서 한가지 제약은 데이터셋의 순서가 정렬되어있어야 합니다.
그래서 필요하다면 ds_suppress.keystring = "S:col1"; 와 같이 정렬 처리를 할 수 있습니다.
이번에는 좀 더 복잡한 셀 병합을 시도해보겠습니다.
조금 복잡한 셀 병합
1. 그리드를 만듭니다.
2. 데이터셋을 만들고 데이터를 집어넣습니다.
3. 그리드에 데이터셋을 바인딩합니다.
- 이때 주의할점은 데이터셋을 그냥 드래그해서 가져가게 되면 자동으로 그리드 포맷까지 생성이 됩니다.
뭐 그렇게 만들어놓고 지우고 다시 만들어도 상관은 없지만 번거러운 작업이니 그냥 binddataset 속성에 값만 정의해줍니다.
4. 이제 그리드를 더블 클릭하고 에디터로 들어가서
먼저 헤드를 추가해주고
바디 영역을 추가해줍니다.
그리고 컬럼을 추가해주면 모양이 완성됩니다.
이제 모양을 만들 차례입니다.
앞에서 간단한 병합 처리는 suppress 속성을 사용했는데
이번에는 포맷에서 직접 병합을 지시할겁니다.
좀 의미가 다른게 포맷에서 병합을 하는 것은 데이터 자체를 병합하는 게 아니라 셀의 레이아웃을 병합하는 겁니다.
그냥 합치고자 하는 셀을 선택하고 Merge Cells 을 선택하기만 하면 됩니다.
그리고 나면 메시지가 나오는데
쉽게 말하면 subcell 구조를 유지할 것인지 말것인지에 대해 결정하라는 겁니다.
subcell 구조를 유지하면 보이기에는 병합된것처럼 보이지만 각 셀단위로 컨트롤이 가능하게 됩니다.
생성된 코드를 보면 이런 차이를 가지게 됩니다.
<Band id="body"><Cell rowspan="2"><Cell/><Cell row="1"/></Cell><Cell col="1" colspan="2"/><Cell row="1" col="1"/><Cell row="1" col="2"/></Band>
<Band id="body"><Cell rowspan="2"/><Cell col="1" colspan="2"/><Cell row="1" col="1"/><Cell row="1" col="2"/></Band>
겉으로 보기에는 동일하지만 코드에서 보는 것처럼 병합된 셀 안에 또 다시 셀 구조를 가지게 됩니다.
그리고 당연한 이야기겠지만 헤드와 바디는 병합이 되지 않습니다.
이렇게 만들고 각 셀에 해당하는 컬럼을 바인딩해주면 조금 복잡한 셀병합이 완료됩니다.
그냥 이렇게 만들고 완료 처리를 해주면
그리드 영역이 애매하게 남아버립니다.
이럴때에는 그리드에서 autofittype을 col로 설정해서 화면에 적절하게 배치되도록 조정해줍니다.
* 한가지 추가적으로 셀 병합시 서브셀을 남겨놓았을때 각 서브셀의 속성을 지정할 필요가 있는데
이럴 경우에는 에디터에서 Alt 키를 누른채로 해당 셀을 선택하면 됩니다.
아래 그림의 경우 첫번째 헤더는 병합된 상태인데 각각 텍스트 속성이 들어가있습니다.
화면에서 보면 아래와 같이 보이게 되죠.
그리고 소스코드를 보면 아래와 같이 표현됩니다.
<Band id="head"><Cell rowspan="2"><Cell text="col4"/><Cell row="1" text="col4"/></Cell><Cell col="1" colspan="2" text="col1"/><Cell row="1" col="1" text="col2"/><Cell row="1" col="2" text="col3"/></Band>
