시트객체의 높이를 설정하는 방법을 알아봅니다.
시트의 높이는 시트 생성시 el 객체에 부여한 높이를 따릅니다.
가령 el객체가 다음과 같이 500px로 설정되어 있다면 시트의 높이는 500px가 됩니다.
<div id="sheetDIV" style="width:100%;height:500px"></div>
<script>
//시트 객체 생성
IBSheet.create({
id:"sheet1",
el:"sheetDIV",
options:{...}
});
</script>
시트의 너비나 높이를 창에 크기에 따라서 늘어나거나 줄어들게 끔 하고자 하신다면 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";
조회된 데이터의 양에 따라 시트의 높이를 자동으로 조정하시려면 (Cfg)NoVScroll:1을 사용하시면 됩니다.
NoVScroll은 SearchMode:0에서는 동작하지 않습니다.
조회된 데이터가 적을때는 높이를 작게하여 보여주다가, 조회된 데이터가 일정 건수보다 많아졌을때 시트의 높이를 고정하고 세로스크롤이 보여지게 끔 하기 위해서는 다음과 같은 로직을 조회 종료 이벤트(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";
}
}
product | version | desc |
---|---|---|
core | 8.0.0.6 | 추가 |