IB Sheet 8 Examples

컬럼 별 타입

HTML

<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/css/style.css">
<!-- ibsheet css -->
<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/default/main.css"/>
<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/compatible/light/main.css"/>

<!--  ibsheet 필수 js -->
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibleaders.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibsheet.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/locale/ko.js"></script>

<!--  ibsheet 선택/추가 js -->
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-excel.js"></script>

<div style='height:calc(100% - 20px)'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

CSS

a{text-decoration:none;color:#4444FF;}

JavaScript

var menuInit = {
  Color: "#DDFFDD",
  MenuMaxHeight: 50, //드랍리스트의 높이를 줄임
	Enum: "|안산1|안산2|화성1|화성2|화성3|일산1|일산2",
	EnumKeys: "|01|02|03|04|05|06|07",
  EnumMenu : {
    Items: [
    			{Text: "공사현장 리스트",Caption: 1},
          {Text: "[안산1] 경기도 안산시 단원구 광덕3로 201",Value: "안산1"},
          {Text: "[안산2] 경기도 안산시 단원구 신길동 1509",Value: "안산2"},
          {Text: "[화성1] 경기도 화성시 반송동", Value: "화성1"},
          {Text: "[화성2] 경기도 화성시 동탄대로22길 30", Value: "화성2"},
          {Text: "[화성3] 경기도 화성시 산척동 283", Value: "화성3"},     
          {Text: "[일산1] 경기도 고양시 일산동구 정발산로82번길 10", Value: "일산1"},
          {Text: "[일산2] 경기도 고양시 일산동구 장항동 1761", Value: "일산2"},
    ],
    "Buttons":["item 추가"],
    OnButton:function(selectitem){
  		if(selectitem == "item 추가"){
      	alert("아이템 추가 버튼을 클릭하셨습니다.")
      }
  	}
  },
  
}
var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 2,
    MenuMaxHeight:250  //드랍 리스트의 최대 높이!!!!!!!!!!!
  },
  "Def": {
    "Row": {
      "CanFormula": true
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": {"Value": "체크박스(Bool)","HeaderCheck": 1},"Type": "Bool","Name": "CheckData","Width": 80,"Align": "Center","CanEdit": 1},
    {"Header": "문자열(Text)","Type": "Text","Name": "TextData","Width": 100,"Align": "Center","CanEdit": 1},
    {"Header": "콤보(Enum)","Type": "Enum","Name": "ComboData","Width": 100,"Align": "Right",Extend:menuInit},
    {"Header": "실수(Float)","Type": "Float","Name": "FloatData","Width": 80,"Align": "Right","CanEdit": 1},
  ]
},
//시트 이벤트
'event':{
	onRenderFirstFinish: function(evtParam) {
  	evtParam.sheet.loadSearchData(loadData);
  }
},
//시트객체 생성
'create':function () {
    var options = this.init;

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