IB Sheet 8 Examples

attribute 포뮬러

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>

CSS

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

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  "Def": {
    "Row": {
      "CanFormula": 1,
      "CalcOrder": "itemCanEdit,preWeek1TextColor,preYear1Color,preWeek2Color,preYear2Icon,preWeek3HtmlPrefix,preYear3Class"
    },
    "Col": {
      "Width": "130",
      "CanEdit": 1,
      "Format": "##0.00 \\%"
    }
  },
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0,
    "HeaderMerge": 4,
    "DataMerge": 1,
    "PrevColumnMerge": 1
  },
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": ["구분","구분"],"Type": "Text","Name": "cmpny","Width": "100","Format": "","Align": "Center","CanEdit": 0},
    {"Header": ["품목별","품목별"],"Type": "Text","Name": "item","Width": "150","Format": "","CanEditFormula": itemFormula},
    {"Header": ["2018.11","전월대비 \n매출증감률(%)"],"Type": "Float","Name": "preWeek1","TextColorFormula": preWeek1Formula},
    {"Header": ["2018.11","전년동월대비 \n매출증감률(%)"],"Type": "Float","Name": "preYear1","ColorFormula": preYear1Formula},
    {"Header": ["2018.10","전월대비 \n매출증감률(%)"],"Type": "Float","Name": "preWeek2","ColorFormula": preWeek2Formula},
    {"Header": ["2018.10","전년동월대비 \n매출증감률(%)"],"Type": "Float","Name": "preYear2","IconFormula": "Value<-3||Value===''?'https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/Red.svg':(Value>0?'https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/Green.svg':'https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/Yellow.svg')"},
    {"Header": ["2018.09","전월대비 \n매출증감률(%)"],"Type": "Float","Name": "preWeek3","RelWidth": 1,"MinWidth": "180","Format": "##0.0","HtmlPrefixFormula": "'<div style=width:'+Math.abs(Value>10||Value<-10?80:Value*8)+'%;overflow:hidden;float:left;background:'+(Value>0?'#44CCFF':Value<0?'#ff8888':'white')+';> </div>'"},
    {"Header": ["2018.09","전년동월대비 \n매출증감률(%)"],"Type": "Float","Name": "preYear3","ClassFormula": "Value < -10 ? 'Red Fontsize20' : 'Blue Italic'"}
  ]
},
//시트 이벤트
'event':{
	onRenderFirstFinish: function(evtParam) {
 ...