열 (Column)의 너비 : IBSHEET8

열(Column)의 너비는 다음 속성들을 통해 제어할 수 있습니다.

1. (Col) Width : 열(Column)의 기본 너비 정의

2. (Col) RelWidth : 상대적 너비 (각 열의 너비 설정 후 남는 너비를 비율에 따라 늘리거나 줄일 수 있습니다.)

3. (Col) MinWidth : 최소 너비 (줄일 수 있는 최소 너비를 정의합니다.)

4. (Col) MaxWidth : 최대 너비 (늘릴 수 있는 최대 너비를 정의합니다.)

5. (Col) CanResize : 사용자 너비 조절 가능 여부

6. (Cfg) FitWidth : 우측에 더미 열(Column)을 추가 여부

다음 예제를 참고 하세요.

<script>
var OPT = {
  Cols:[
    {Header: "No", Name: "SEQ", Type: "Int", "Width": 60},
    {Header: "제목", Name: "subject", Type: "Text", "Width": 150},
    {Header: "작성자", Name: "userId", Type: "Text", "Width": 100, "Align": "center"},
    {Header: "작성일", Name: "rdate", Type: "Date", "Width": 90, "Align": "center" },
    {Header: "추천수", Name: "rcmnd", Type: "Int", "Width": 60, "Align": "center"},
  ],
  Events: {
    onRenderFirstFinish: function(evtParam) {
      evtParam.sheet.loadSearchData(DATA);
    }
  }
};

var DATA = [
  {subject:"금일 코스피,코스닥 현황 분석", userId:"렘브란트", rdate:"20220302", rcmnd:48},
  {subject:"하락장 강세 종목 정리", userId:"세잔", rdate:"20220228", rcmnd:110},
];

// IBSheet8 생성 함수
IBSheet.create({
  id: "sheet",        // 객체 ID
  el: "sheetDIV",     // 생성할 DIV객체 ID
  options: OPT       // 초기화 구문 변수
});
</script>

<div 
     id="sheetDIV" 
     style="width:800px;height:300px;background-color:#DDD;border:3px solid #888;">
</div>

1. (Col) RelWidth 속성

위와 같은 IBSheet8 객체에서 "제목" 열(Column) 생성 부에 "RelWidth" 속성을 1로 추가 설정하면 다음과 같이 생성됩니다.

{Header: "제목", Name: "subject", Type: "Text", "Width": 150, "RelWidth":1}

RelWidth 속성 값 1은 남는 너비에 대한 비율을 의미합니다.

만약 "제목"열(Column) 생성 부에 "RelWidth" 속성을 2로 설정하고, "작성자" 열(Column) 생성 부에 "RelWidth" 속성을 1로 설정하면 남는 너비를 두 개 열(Column)에서 2:1 로 나누어 가지게 됩니다.

{Header: "제목", Name: "subject", Type: "Text", "Width": 150, "RelWidth":2},
{Header: "작성자", Name: "userId", Type: "Text", "Width": 100, "RelWidth":1}

위와 같이 RelWidth 속성을 사용하는 열(Column)의 너비는 IBSheet8 객체의 너비 변화에 따라 동적으로 늘어나거나 줄어들게 됩니다.

2. (Col) MinWidth 속성

IBSheet8 객체의 너비가 충분히 넓은 경우에는 RelWidth 속성이 유용하지만 열(Column)이 많거나 IBSheet8 객체의 너비가 부족한 경우에는 RelWidth를 사용하는 열(Column)의 너비가 줄어들어 사용하기 어려움이 있습니다.

위 IBSheet8 객체의 너비를 300px로 줄이는 경우 다음과 같이 보여지게 됩니다.

<div 
      id="sheetDIV" 
      style="width:300px;height:300px;background-color:#DDD;border:3px solid #888;">
</div>

"제목","작성자" 열은 RelWidth에 따라 너비가 가변적으로 늘어나거나 줄어들기 때문에 IBSheet8 객체의 너비가 충분하지 못한 경우에는 지나치게 줄어들어 보기에 어려움이 있을 수 있습니다.

이러한 경우, MinWidth 속성을 통해 최소 너비를 설정하면 열(Column)이 지나치게 줄어드는 것을 방지할 수 있습니다.

{Header: "제목", Name: "subject", Type: "Text", "MinWidth": 150, "RelWidth":2},
{Header: "작성자", Name: "userId", Type: "Text", "MinWidth": 100, "RelWidth":1},

[Width 대신 MinWidth를 설정]

위와 같이 RelWidth 속성이 설정되더라도, MinWidth보다 줄어들지 않게 되어 가로 스크롤을 통해 사용자가 각 열(Column)의 내용을 확인 할 수 있습니다.

3. (Cfg) FitWidth 속성

1번,2번 처럼 각 열(Column)의 너비를 늘리거나,줄이지 않고, 우측의 남는 영역을 채우기 위해 더미 열(Column)을 추가할 수 있습니다.

<script>
var OPT = {
  Cfg: {
    FitWidth: 1
  },
  Cols:[
    {Header: "No", Name: "SEQ", Type: "Int", "Width": 60},
    {Header: "제목", Name: "subject", Type: "Text", "Width": 150},
    {Header: "작성자", Name: "userId", Type: "Text", "Width": 100, "Align": "center"},
    {Header: "작성일", Name: "rdate", Type: "Date", "Width": 90, "Align": "center" },
    {Header: "추천수", Name: "rcmnd", Type: "Int", "Width": 60, "Align": "center"},
  ]
};

열 (Column)의 너비 인쇄

관련 아티클