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><button type='button' onclick='ib.sampleBtn()'>피벗기능 사용</button></div></div>


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

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  "Def": {
    "Col": {
      "Align": "Left",
      "RelWidth": "1"
    }
  },
  //공통기능 설정 부분
  "Cfg": {
    "CanSort": "0"
  },
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "부서명","Type": "Text","Name": "sDept"},
    {"Header": "팀명","Type": "Text","Name": "sTeam"},
    {"Header": "직급","Type": "Text","Name": "sPosition"},
    {"Header": "성명","Type": "Text","Name": "sName"},
    {"Header": "성별","Type": "Enum","Name": "sGender","Align": "Center","Enum": "|男|女|기타","EnumKeys": "|男|女|기타"},
    {"Header": "연령대","Type": "Enum","Name": "sAgeRange","Align": "Center","Enum": "|10대|20대|30대|40대|50대|60대","EnumKeys": "|10대|20대|30대|40대|50대|60대"},
    {"Header": "거주지","Type": "Text","Name": "sAddr","Align": "Center"},
    {"Header": "나이","Type": "Int","Name": "sAge","Width": "130","Align": "Right"},
    {"Header": "근속기간(년)","Type": "Int","Name": "sPeriod","Align": "Right"},
    {"Header": "급여","Type": "Int","Name": "sSalary","Align": "Right","Format": "#,###"},
    {"Header": "상여","Type": "Int","Name": "sBonus","Align": "Right","Format": "#,###"}
  ]
},
//시트 이벤트
'event':{

},
//시트객체 생성
'create':function () {
    var options = this.init;

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

		//피버팅 전에 CEO는 데이터에서 제외 시키자
    var ceoRow = sheet.findText("sDept","CEO");
    sheet.setAttribute(ceoRow, null , "Deleted", 1);



		//피벗 함수 호출
    var param = {
    	criterias:{
       	row: "sDept,sTeam", // 부서명,팀명
        col: "sPosition", // 직급
        data: "sSalary"   // 급여
      },
      init: {
       	row: "sDept,sTeam",
        col: "sPosition",
        data: "sSalary"
      }
    }
    sheet.makePivotTable(param);
  },
//조회...