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>

<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 ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 2,
    "MessageWidth": 300,
    "CanSort": 0,
    "FitWidth": 1,
    Group: "sIndutyCodeName,sName",
    GroupMain: "sName",
    GroupFormat: "<span style='color: black;display:inline'>{%s}</span> <span style='color: red'>({%c}건)</span>"
  },
  "Def": {
    "Row": {
      "CanFormula": true
    },
    Group: {
      "Expanded": 1,
      "sPrice": {
        "Formula": sPriceFormula
      }
    },
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "업소명","Name": "sName","Type": "Text","MinWidth": 140,"Align": "Left","GroupWidth": 300,"Width": 140},
    {"Header": "업소아이디","Name": "sShId","Type": "Text","MinWidth": 140,"Width": 140,"Align": "Left"},
    {"Header": "분류코드명","Name": "sIndutyCodeName","Type": "Text","MinWidth": 140,"Width": 140,"GroupDef": "myGroupRow"},
    {"Header": "분류코드","Name": "sIndutyCode","Type": "Text","MinWidth": 140,"Align": "Left","Width": 140},
    {"Header": "업소 주소","Name": "sAddr","Type": "Text","MinWidth": 220,"Align": "Left","Width": 220},
    {"Header": "업소 전화번호","Name": "sPhone","Type": "Text","MinWidth": 120,"Align": "Left","Width": 120},
    {"Header": "추천수","Name": "sRcmn","Type": "Int","Format": "#,###","MinWidth": 140,"Width": 140},
    {"Header": "상품명","Name": "sProdName","Type": "Text","MinWidth": 140,"Align": "Left","Width": 140},
    {"Header": "상품가격","Name": "sPrice","Type": "Int","Format": "#,###","MinWidth": 100,"Align": "Right","Width": 100}
  ],
  "Solid": [
    {
      "Kind": "Group",
      "Space": -1,
      "id": "Group",
      "Cells": "Custom,btnMinus,btnPlus",
      "btnMinus": {
        "Type": "Button",
        "Button": "Button",
        "AddClass": "targetBtn",
        "ButtonText": " - ",
        "OnClick": minusClick,
        "Width": 25
      },
      "btnPlus": {
        "Type": "Button",
        "Button": "Button",
     ...