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 class='ibsheet-wrap' id='descFunc'></div>


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

CSS

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

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
	Def:{
  	Row: {
 //   	CanFocus:0,
 			FocusRow:"Class"
    }
  },
  Cfg : {
   MultiRecord: true,  // 멀티레코드 전용 시트로 설정
	},

// 멀티레코드 기능 사용시 열설정(1차원 배열 -> 2차원 배열)
	Cols : [
    //첫번째 단위데이터행(DataRow)
    [
        {Header: "이름", Name: "colA", Type: "Text", Align: "Center", Width: 100},
        {Header: "사진", Name: "colB", Type: "Img", Width: 120, RecordRowSpan: 3},
        {Header: "나이", Name: "colC", Type: "Int", Width: 120},
        {Header: "경력", Name: "colD", Type: "Float", Width: 120, Format:"0.# 년"}
    ],
    //두번째 단위데이터행(DataRow)
    [
        {Header: "사번", Name: "colE", Type: "Text", Align: "Center"},
        {Header: "사진"},
        {Header: "성별", Name: "colF", Type: "Enum", Enum:"|남|여", EnumKeys:"|M|F"},
        {Header: "입사일", Name: "colG", Extend:IB_Preset.YMD}
    ],
    //세번째 단위데이터행(DataRow)
    [
        {Header: "직급", Name: "colH", Type: "Text", Align: "Center"},
        {Header: "사진"},
        {Header: "주소", Name: "colJ", Type: "Text", RecordColSpan: 2},
        {Header: "주소"},
    ]
	]
},
//시트 이벤트
'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 () {

  }
}
ib.create();

var loadData = [{
	colA:"크리스",
  colB:"|https://picsum.photos/id/433/90/110.jpg?hmac=ErAfwUd01M2dubqt_v4eg2BQz8zsY5hkwIQczwNwZ8c|90|110",
  colC:25,
  colD:5.6,
	colE:"2008294",
  colF:"M",
  colG:"20080521",
  colH:"매니져",
  colJ:"서울시 영등포구 양산로 91",
  
}];