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'>
<button onclick='ib.sampleBtn(this)' class='mgr10'>행추가</button>
데이터1 컬럼은 행추가된 컬럼만 편집이 가능합니다.
</div>


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

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  "Def": {
    "Row": {
      CanFormula: 1,
    	CalcOrder: "data1CanEdit" // 열이름 간에 띄어쓰지말고 전부 붙여쓰셔야 합니다.
       
    }
  },
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0
    
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [{
                Header: "NO",
                Type: "Int",
                Name: "SEQ"
            }  ],
  //중앙(메인) 컬럼 설정
  "Cols": [{
                Header: "체크",
                Name: "CheckData", 
                Type: "Bool",
                Align: "center"
            },  {
                Header: "데이터1",
                Name: "data1", 
                Type: "Text",
                Align: "center",
                Width: 100,
                CanEditFormula:"Row.Added==1?1:0"
            }, {
                Header: "데이터2",
                Name: "data2", 
                Type: "Text",
                Align: "center",
                Width: 100
            }, {
                Header: "데이터3",
                Name: "data3", 
                Type: "Text",
                Align: "center",
                Width: 100
            }, {
                Header: "데이터4",
                Name: "data4", 
                Type: "Text",
                Align: "center",
                Width: 100
            }, {
                Header: "데이터5",
                Name: "data5", 
                Type: "Text",
                Align: "center",
                Width: 100
            }, {
                Header: "데이터6",
                Name: "data6", 
                Type: "Text",
                Align: "center",
                Width: 100
            }
  ]
},
//시트 이벤트
'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 // 생성될 시트의 속성
    });
  },
//화면...