IB Sheet 8 Examples

컬럼 별 타입

HTML

<link rel="stylesheet" href="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/css/style.css">
<!-- 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>
<button onclick="showFixedRows()">
Foot행 2개 / Head행 1개 생성
</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

function showFixedRows() {
	sheet.showFixedRows([
    {
    	Kind:'Foot', 
      TextData: {
      	'Value' : '커스텀 Foot행1', 'TextColor': 'green', 'Span': 4
      }
    },
    {
    	Kind:'Head',
      TextData: {
      	'Value' : '커스텀 Head행', 'TextColor': 'red', 'Span': 3, 'Color': 'yellow'
      }
    },
    {
    	Kind:'Foot',
      Color: 'blue'
    }
  ]);
}

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 2,
    "HeaderMerge": 3,
    "MessageWidth": 300
  },
  "Def": {
    "Header": {}
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "문자열\n(Text)","Type": "Text","Name": "TextData","Width": 100,"Align": "Center","Required": 1},
    {"Header": "줄넘김문자열(Lines)","Type": "Lines","Name": "LinesData","MinWidth": 250,"Align": "Center","CanEdit": 1,"RelWidth": 1},
    {"Header": "콤보(Enum)","Type": "Enum","Name": "ComboData","DefaultEnumIndex": 1,"Width": 100,"Align": "Right","Enum": "|대기|진행중|완료","EnumKeys": "|01|02|03"},
    {"Header": "버튼(Button)","Type": "Button","Name": "ISO","Width": 80,"Align": "Left","CanEdit": 0,"Button": "Button"},
    {"Header": "정수(Int)","Type": "Int","Name": "IntData","Width": 80,"Align": "Right","CanEdit": 1},
    {"Header": "실수(Float)","Type": "Float","Name": "FloatData","Width": 80,"Align": "Right","CanEdit": 1},
    {"Header": "날짜(Date)","Type": "Date","Format": "yyyy/MM/dd HH:mm:ss","Name": "DateData","Width": 150,"Align": "Center","CanEdit": 1,"EmptyValue": "날짜를 입력해주세요"},
    {"Header": "앵커(Link)","Type": "Link","Name": "LinkData","Width": 60,"CanEdit": 0},
    {"Header": "이미지(Img)","Type": "Img","Name": "ImageData","Width": 70,"Align": "Center","CanEdit": 0},
    {"Header": "패스워드(Pass)","Type": "Pass","Name": "PassData","Width": 80,"Align": "Left","CanEdit": 1},
    {"Header": "라디오(Radio)","Type": "Radio","Name": "RadioData","Width": 140,"Align": "Center","CanEdit": 1,"Range": 1,"Enum":...