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 style='height:calc(100% - 20px)'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0,
    "GroupMain": "sName",
    "Group": "sIndutyCodeName",
    "CanSort": 0,
    "GroupFormat": "<span style='color: black;display:inline'>{%s}</span> <span style='color: red'>({%c}건)</span>",
    "SuppressMessage": 3,
    "FitWidth": 1
  },
  "Def": {
    "Row": {
      "CanFormula": 1
    },
    "Col": {
      "Align": "Center"
    },
    "Group": {
      Expanded: 1,
      "sPrice": {
        "Formula": sPriceFormula
      }
    },
    "myGroupRow": {
      "Def": "Group",
      "Color": "#FFDDAA"
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Header": "No","Name": "SEQ","MinWidth": 50}
  ],
  //중앙(메인) 컬럼 설정
  "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,
      ...