IBSheet8 Manual Sample

author(s): IBSheet

HTML

<link rel="stylesheet" href="https://www.ibsheet.com/v8/assets/lib/ibsheet/css/default/main.css"/>
<!--  ibsheet 필수 js -->
<script src="https://www.ibsheet.com/v8/assets/lib/iblicense.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/ibsheet.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/locale/ko.js"></script>

<!--  ibsheet 선택/추가 js -->
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-excel.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/jszip.min.js"></script>

<div style='height:500px'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

CSS

.myBtn1{
  border:3px solid #999999;
  border-radius:5px;
  padding:4px;
  color:black;
}
.myBtn1:hover{
  border:3px solid #FFFF00;
  background-color:#666;
  color:#EEEEEE;
  font-weight:700;
}

.myBtn2{
  border:3px solid #FF3344;
  border-radius:5px;
  padding:4px;
  color:black;
}
.myBtn2:hover{
  border:3px solid #FF8899;
  background-color:#FFFFAA;
  color:#FF0000;
  font-weight:700;
}

.myBtn3 > u.IBSheetButton{
  display:inline;
  padding:3px 5px 3px 5px;
  background-color:#EDEDED;
  border:1px solid #BBB;
  color:black;
}

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 2,
   
  },
  "Def": {
    "Col": {
      "Width": 100
    }
    ,"Row":{
      /*
       버튼3 컬럼 디자인 변경으로 행 높이가 44px로 변경됨.
       IBSheet에서 스크롤 계산 및 렌더링을 정확하게 하려면
       Height 속성에 변경된 행 높이를 지정해야 함.
       기본 행 높이는 30px이며, 높이 변경 시 Cfg.Size 참고.
       */
      "Height":44
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Header":"No","Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "버튼1","Type": "Button","Name": "btn1","Width": 100, "DefaultValue": "확인"},
    {"Header": "버튼2","Type": "Button","Name": "btn2","Width": 100, "Align":"Center", "ButtonText":"진행중", "ButtonWidth": 60},
    {"Header": "버튼3","Type": "Button","Name": "btn3","Width": 100, "Button":"Html"},
   
  ]
},
//시트 이벤트
'event':{
	onRenderFirstFinish: function(evtParam) {
		evtParam.sheet.loadSearchData(loadData);
	},
	onClick:function(evtParam) {
    var sheet = evtParam.sheet;
    var msg = `
    ${evtParam.row.HasIndex}행 
    [${sheet.getString(sheet.getRowById("Header"), evtParam.col)}] 열 
    <span style="color:red">${sheet.getValue(evtParam.row, evtParam.col)}</span> 버튼이 클릭되었습니다.`; 
		evtParam.sheet.showMessageTime({
    	message:msg,
      time:1500, //1.5초
      buttons:["OK"]
    });
	}
},
//시트객체 생성
'create':function () {
    var options = this.init;

    options.Events = this.event;
    IBSheet.create({
      id: 'sheet', // 생성할 시트의 id
      el: 'sheetDiv', // 시트를 생성할 Dom 객체 및 id
      options: options // 생성될 시트의 속성
    });
  },
//화면 기능
'sampleBtn':function () {
  }
}
ib.create();

var loadData = [
	{"btn1":"보류", "btn2":"보류", "btn3":"<div class='myBtn1'>진행중</div>"},
	{"btn1":"완료", "btn1Disabled":1, "btn2":"완료", "btn2Disabled":1, "btn3":""},
	{"btn1":"", "btn2":"승인", "btn3":"<div class='myBtn2'>오류</div>"}, //btn1 컬럼의 데이터가 빈값
	{"btn1":"승인", "btn1Class":"myBtn3" ,"btn2":"대기", "btn3":""},
  {"btn1":null,"btn2":null,"btn3":null}, //조회 데이터가 null
 ...