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>
<b>
[관계형 콤보 기본 예제 - onRenderFirstFinish]</b>
<br>
시트의 관계형 콤보는 직접 데이터를 넣지 않고 DB에서 데이터를 가져와 구현을 하는 경우에,데이터의 구조에 따라 코딩 방식이 달라지게 됩니다.<br>
아래 샘플은 공통코드 테이블의 구조가 자신의 id와 parent  id로 구성된 것을 가정하여, json으로 가져온 데이터로  대분류/중분류/소분류 item을 추가하는 예제입니다.
</div>
<div style='height:calc(100% - 20px)'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

CSS

.pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px;}.pagination>li { display: inline-block;}.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { z-index: 2; color: #23527c; background-color: #eee; border-color: #ddd;}.pagination-sm>li>a, .pagination-sm>li>span { padding: 5px 10px; font-size: 12px; line-height: 1.5;}.pagination>li>a, .pagination>li>span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none;background-color: #fff; border: 1px solid #ddd;} .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { z-index: 3; color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7;}

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 2,
    "MaxPages": 3,
    "SuppressMessage": 3
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "대분류","Type": "Enum","Name": "Category1","Width": "150","Align": "Center","CanEdit": 1,"RawSort": 1,"Clear": "Category2,Category3"},
    
    {"Header": "중분류","Type": "Enum","Name": "Category2","Width": "150","Align": "Center","CanEdit": 1,"RawSort": 1,"Related": "Category1","Clear": "Category3"},
       
    {"Header": "소분류","Type": "Enum","Name": "Category3","Width": "150","Align": "Center","CanEdit": 1,"Related": "Category2"},
      
    
    
    {"Header": "상품번호","Type": "Text","Name": "ItemNo","Width": "80","Align": "Center","CanEdit": 1,"RawSort": 1},
    {"Header": "도서명","Type": "Text","Name": "Title","MinWidth": "250","Align": "Left","CanEdit": 1,"RawSort": 1,"RelWidth": 1},
    {"Header": "가격","Type": "Int","Name": "Price","Width": "90","Align": "Right","CanEdit": 1,"RawSort": 1,"Format": "#,##0원"},
    {"Header": "저자","Type": "Text","Name": "Author","MinWidth": "220","Align": "Left","CanEdit": 1,"RawSort": 1,"RelWidth": 1},
    {"Header": "출판사","Type": "Text","Name": "Publisher","Width": "120","Align": "Left","CanEdit": 1,"RawSort": 1}
  ]
},
//시트 이벤트
'event':{
	onRenderFirstFinish:function(evt){
  
  	//조회전에 Enum,EnumKeys 내용을 추가합니다.
  	//대분류
    evt.sheet.setAttribute( null, "Category1", "Enum", enumData.filter((v)=>!v.pid).reduce((a,c)=>"|"+c.value+a , "" ) );
    evt.sheet.setAttribute( null, "Category1", "EnumKeys", enumData.filter((v)=>!v.pid).reduce((a,c)=>"|"+c.id+a , "" ) );
  	
    
    
    //중분류
    //대분류 EnumKeys을 기준으로 item을 추가합니다.
    const cat1EnumKeys = evt.sheet.getAttribute(null, "Category1","EnumKeys").split("|").splice(1);
    let cat2EnumKeys = [];
    for(let i=0;i<cat1EnumKeys.length;i++){
      let tempKeys =...