시트객체 높이 설정 (appendix)

시트객체의 높이를 설정하는 방법을 알아봅니다.

1. 시트의 높이

시트의 높이는 시트 생성시 el 객체에 부여한 높이를 따릅니다.

가령 el객체가 다음과 같이 500px로 설정되어 있다면 시트의 높이는 500px가 됩니다.

<div id="sheetDIV" style="width:100%;height:500px"></div>

<script>
//시트 객체 생성
IBSheet.create({
    id:"sheet1",
    el:"sheetDIV",
    options:{...}
});
</script>

여기서 만약 el 객체에 높이가 없다면 자동으로 800px 높이를 갖게 됩니다.
시트객체의 높이가 정적인 행(헤더,합계 행)조차 표현하지 못할 정도로 작은 경우에는 시트가 정상적으로 표시되지 않을 수 있습니다.
el 크기는 인라인 style로 지정해야 시트에 반영됩니다. CSS 클래스나 선택자(예: #id{})로 준 크기는 기본적으로 무시됩니다.
CSS class로 지정한 크기를 쓰려면 UseClassStyle를 1로 설정합니다.

2. 시트의 높이 수정

시트의 너비나 높이를 창에 크기에 따라서 늘어나거나 줄어들게 끔 하고자 하신다면 el객체의 너비/높이는 100%로 설정하시고, 시트의 부모 DIV객체에 너비/높이를 부여하여 조정하시는 것이 좋습니다.

<!-- 시트 부모 DIV -->
<div class="sheet_wrapper" style="width:100%;min-height:200px;height:calc(100% - 130px)">
    <!-- 시트 객체 -->
    <div id="sheetDIV" style="width:100%;height:100%"></div>
</div>

el의 너비나 높이를 percent로 부여할 때는 상위(부모) 객체의 너비나 높이가 명확해야 합니다.

가령 el객체의 높이가 100%인데, 부모 DIV의 높이가 정의되지 않았을 시에는 시트가 정상적으로 표시되지 않을 수 있습니다.

고정된 사이즈로 시트의 높이를 변경하고자 하실때도, 시트 객체보다는 부모객체를 조정해 주세요.

//.sheet_wrapper 객체의 높이를 680px로 변경
sheet.MainTag.parentNode.style.height = "680px";

화면 전체를 시트로 채우기 (반응형)

화면 전체를 시트로 채우고 브라우저 크기에 따라 자동으로 늘이고 줄이려면, 높이를 최상위(html / body)부터 시트까지 100%로 끊김 없이 연결합니다. (페이지 일부 영역에만 둘 때는 위 2번처럼 부모 DIV에 크기를 지정하세요.)

<style>
  html, body { height:100%; margin:0; }
  .page { display:flex; flex-direction:column; height:100%; }  /* 세로 flex */
  .sheet-area { flex:1; }            /* 남는 높이를 모두 차지 */
</style>

<div class="page">
  <div class="toolbar">버튼 등 (고정 높이)</div>
  <div class="sheet-area">
    <div id="sheetDiv" style="width:100%;height:100%"></div>
  </div>
</div>

컬럼 너비도 영역을 채우려면 (Col)RelWidth(또는 Def.Col.RelWidth:1)을 사용합니다.
높이 사슬이 한 곳이라도 끊기면(0이면) 시트가 보이지 않습니다. 너무 작아질 때를 대비해 html, body나 .page에 min-width / min-height로 최소 크기를 둘 수 있습니다.

3. 조회된 데이터에 따른 높이 자동 수정

조회된 데이터의 양에 따라 시트의 높이를 자동으로 조정하시려면 (Cfg)NoVScroll:1을 사용하시면 됩니다.

NoVScroll은 SearchMode:0에서는 동작하지 않습니다.

4. 시트에 최대 높이 설정

조회된 데이터가 적을 때는 높이를 작게 보여주다가, 데이터가 많아지면 특정 높이까지만 커지고 그 이상은 세로 스크롤로 보여주고 싶은 경우입니다.

픽셀(px) 기준 — `NoVScroll` + `MaxVScroll` (권장)

NoVScroll은 세로 스크롤을 두지 않고 조회된 데이터 개수만큼 높이를 늘려 전체를 보여줍니다. 여기에 (Cfg)MaxVScroll로 최대 높이(px) 를 지정하면, 그 높이까지만 커지고 넘으면 세로 스크롤이 생깁니다.

options = {
    Cfg: {
        NoVScroll: 1,     //세로 스크롤 없이 데이터 전체 표시 (높이가 데이터에 따라 늘어남)
        MaxVScroll: 500   //단, 500px를 넘으면 세로 스크롤 생성
    }
};

NoVScroll(및 MaxVScroll)은 SearchMode:0에서는 동작하지 않습니다.

행 수 기준 — 조회 종료 이벤트에서 직접 계산

px가 아니라 행 수를 기준으로 제어하고 싶다면, 조회 종료 이벤트(onSearchFinish)에서 다음과 같은 로직을 호출합니다.

var options = {
    Cols:[],
    Events:{
        onSearchFinish:function(evtParam){
            //조회된 데이터가 10개 행 이상일때는 세로 스크롤을 사용해 보여준다.
            resizeSheet( evtParam.sheet, evtParam.getDataRows().length, 10);
        }
    }

};

/*
공통함수
특정 건수 이상 조회시 스크롤을 생성 (시트객체 , 조회된 데이터 행수, 보여질 기준행 수 )
*/
function resizeSheet(sheet,dataRowCnt, baseRowCnt){
    var p = sheet.MainTag.parentNode;  //시트 부모 객체
    var h = sheet.MainTag.clientHeight; //시트객체 높치

    //시트에서 데이터 영역을 제외한 나머지 영역에 대한 높이
    var hOtherRows = h - sheet.MainTable.tBodies[0].querySelector('.IBBodyMid').clientHeight - sheet.MainTable.tBodies[0].querySelector(".HeightSpace").parentNode.offsetHeight;

    //기준행과 조회된 데이터행 수에 따라 부모의 크기를 바꾼다.
    if(dataRowCnt < baseRowCnt){
        p.style.height = ((dataRowCnt * sheet.RowHeight) + hOtherRows)+"px";
    }else{
        p.style.height = ((baseRowCnt * sheet.RowHeight) + hOtherRows)+"px";
    }
}

Since

product	version	desc
core	8.0.0.6	추가