IB Sheet 8 Examples

컬럼 별 타입

HTML

<!-- ibsheet css -->
<link rel="stylesheet" href="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/default/main.css"/>
<!--  ibsheet 필수 js -->
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibleaders.js"></script>
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibsheet.js"></script>
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/locale/ko.js"></script>

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



<button onclick="sheetToExcel()">exportData</button>
<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 securedBlob = null;
var ib = ib || {}
ib = {
  //시트 초기화 구문
  init: {
    //공통기능 설정 부분
    Cfg: {
      SearchMode: 2,
      Alternate: 2,
    },
    //틀고정 좌측 컬럼 설정
    LeftCols: [
      { Header: "No", Name: "SEQ", Width: "50", CanFocus: 0, CanMove: 0 },
    ],
    //중앙(메인) 컬럼 설정
    Cols: [
      { Header: "확인", Type: "Bool", Name: "sCheck", Width: "60" },
      {
        Header: "회사",
        Type: "Text",
        Name: "sCompany",
        Width: "150",
        CanEdit: 0,
      },
      {
        Header: "판매 국가",
        Type: "Text",
        Name: "sCountry",
        Width: "100",
        CanEdit: 0,
      },
      {
        Header: "판매 수량",
        Type: "Int",
        Name: "sSaleQuantity",
        Width: "100",
        CanEdit: 0,
      },
      {
        Header: "판매 증가량",
        Type: "Int",
        Name: "sSaleIncrease",
        Width: "100",
        CanEdit: 0,
      },
      {
        Header: "가격",
        Type: "Int",
        Name: "sPrice",
        Format: "#,### \\원",
        Width: "180",
      },
      {
        Header: "만족도",
        Type: "Int",
        Name: "sSatisfaction",
        Format: "# \\%",
        Width: "70",
        CanEdit: 0,
      },
      {
        Header: "Tag",
        Type: "Html",
        Name: "tag",
        Class: "TagHtml",
        Width: "200",
        CanEdit: 0,
      },
      {
        Header: "URLs",
        Type: "Text",
        Name: "urls",
        Width: "150",
        RelWidth: 1,
        CanEdit: 1,
      },
    ],
  },
  //시트 이벤트
  event: {
    onRenderFirstFinish: function (evtParam) {
      // 시트에 데이터를 넣습니다.
      evtParam.sheet.loadSearchData([{}, {}, {}, {}])
    },  

    onBeforeExport: function (evtParam) {
   
    (async () => {
          try {
            const workbook = await XlsxPopulate.fromDataAsync(
              evtParam.data.blob,  //다운로드 할  blob  데이터 
            )

            
           ...