IBSheet8 Manual Sample

author(s): IBSheet

HTML

<!-- ibsheet css -->
<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>

<input type="button" value="클라이언트 페이징" onclick="ib.sampleBtn(this, 1)"> 
<input type="button" value="서버스크롤페이징" onclick="ib.sampleBtn(this, 3)"> 
<input type="button" value="서버페이징" onclick="ib.sampleBtn(this, 4)">
<br>

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

CSS

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

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 1,
    "MessageWidth": 300,
    "CanSort": 0,
    "PageLength": 50,
    InfoRowConfig: {
      Visible: 1,
      Layout: ["Paging", "SummaryLabel", "Count"]
    }
  },
  "Def": {
    "Row": {
      "CanFormula": true
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "확인","Type": "Bool","Name": "sCheck","Width": "60"},
    {"Header": "회사","Type": "Text","Name": "sCompany","Width": "150"},
    {"Header": "판매 국가","Type": "Text","Name": "sCountry"},
    {"Header": "판매 수량","Type": "Int","Name": "sSaleQuantity"},
    {"Header": "판매 증가량","Type": "Int","Name": "sSaleIncrease"},
    {"Header": "가격","Type": "Int","Name": "sPrice","Format": "#,### \\원","Width": "180"},
    {"Header": "만족도","Type": "Int","Name": "sSatisfaction","Format": "# \\%"},
    {"Header": "코멘트","Type": "Text","Name": "sComment","Width": "300","RelWidth": 1}
  ]
},
//시트 이벤트
'event':{
    onRenderFirstFinish: function(evt) {
      var URL = 'https://api.ibsheet.com/ibsheet/v8/samples/customer/paging.jsp';
      var param = {};

      // 시트 최초 생성시 발생 이벤트
      if (evt.sheet.SearchMode > 1) { // 서버모듈 조회
        param = {
          url: URL,
          param: 'total=15000&searchMode=' + evt.sheet.SearchMode,
          method: 'POST',
          pageLengthParam: 'data',
          callback: function (rtn) {
            var rtnData = JSON.parse(rtn.data);

            evt.sheet.showMessageTime('<span style=\'color:black\'>조회가 완료되었습니다.<br> 서버모듈 전체 데이터 건수 : ' + rtnData.Total + '</span>', 1000);
          }
        };

        evt.sheet.doSearchPaging(param);
      } else { // 클라이언트 조회
        param = {
          url: URL,
          method: 'POST',
          callback: function (rtn) {
            var rtnData = JSON.parse(rtn.data);

            evt.sheet.showMessageTime('<span style=\'color:black\'>조회가 완료되었습니다.<br> 클라이언트...