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 class='ibsheet-wrap' id='descFunc'><div><label>행 index</label><input type='number' id='row' value='10' min='1' style='width:50px;text-align:right' class='mgr10'> <hr><label>행 id</label><input type='text' id='rowId' class='mgr10'><hr><label>열</label><select id='col' style='width:130px' class='mgr10'></select><hr><button class='btn mgr10' onclick='ib.sampleBtn(this)'>포커스 확인</button> <button class='btn mgr10' onclick='ib.sampleBtn(this)'>포커스 이동</button></div></div>


<div style='height:calc(100% - 128px)'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

CSS

.IBClassEdit{
  position:relative;
}
td.IBClassEdit.IBText::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border-right:1px solid #666;
  border-top:1px solid #666;
  border-bottom:1px solid #666;
  border-left:1px solid #666;
  border-radius: 2px;
}

td.IBClassEdit.IBLines::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}
td.IBClassEdit.IBLines::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}
td.IBClassEdit.IBEnum::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}
td.IBClassEdit.IBInt::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}
td.IBClassEdit.IBFloat::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}

td.IBClassEdit.IBNoRight:not(.IBTree)::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:0px;
  /* border:1px solid #666; */
  border-right:0px solid #666;
  border-top:1px solid #666;
  border-bottom:1px solid #666;
  border-left:1px solid #666;
  border-radius:2px 0 0 2px;
}
td.IBClassEdit+.IBNoLeft::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:0px;
  right:2px;
  /* border:1px solid #666; */
  border-right:1px solid #666;
  border-top:1px solid #666;
  border-bottom:1px solid #666;
  /* border-left:1px solid #666; */
  border-radius:0 2px 2px 0;
}


td.IBClassEdit.IBPass::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}

td.IBTree::after{
  border:0 solid #FFFFFF;
}

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0
  },
  "Def": {
    "Row": {
      "ShowHint": 0,
      "Tip": 0
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 80,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "선택","Type": "Bool","Name": "CHK","Width": "50","Align": "Center","CanEdit": 1},
    {"Header": "대차계약번호","Type": "Text","Name": "CONTRACTNO","Width": "120","Align": "Center","CanEdit": 0},
    {"Header": "대차지점","Type": "Text","Name": "DELIVERYDEPTNAME","Width": "120","Align": "Center","CanEdit": 0,"TextColor": "BLUE"},
    {"Header": "차량번호","Type": "Text","Name": "CARNO","Width": "120","Align": "Center","CanEdit": 1,"Tip": 1},
    {"Header": "차명(FULL차명)","Type": "Text","Name": "CARNAMEMSTNAME","Width": "200","Align": "Left","CanEdit": 1,"Suggest": "|싼타페 현대|포터2 현대|그랜저 현대|카니발 기아|더_뉴_아반떼 현대|쏘렌토 기아|봉고3_트럭_기아|모닝 기아|그랜드_스타렉스 현대|쏘나타_뉴_라이즈 현대|K5 기아|투싼 현대|티볼리 쌍용|렉스턴_스포츠 쌍용|스파크 GM|QM6 르노삼성|K7 기아|K3 기아|스포티지 기아|E-class BENZ|코나_electric 현대|G80 현대|코나 현대|그랜저_hybrid 현대|레이 기아|SM6 르노삼성|니로_(하이브리드) 기아|말리부 GM|G70 현대|CLS BENZ|ES 렉서스|G4_렉스턴 쌍용|스토닉 기아|트랙스 GM|GLC BENZ|K9 기아|Camry 토요타|K7_하이브리드 기아|Accord 혼다|EQ900 현대|Tiguan 폭스바겐|3-series BMW|Passat 폭스바겐|QM3 르노삼성|5-series BMW|모하비 기아|SM5 르노삼성|Explorer FORD|아이오닉_hybrid 현대|니로_EV_(전기차) 기아|엑센트 현대|A4 아우디|SM3 르노삼성|GLE BENZ|K5 하이브리드 기아|쏘나타_뉴_라이즈_hybrid 현대|라보 GM|스팅어 기아|Altima 닛산|SM7 르노삼성|GLA BENZ|Passat GT 폭스바겐|클리오 르노삼성|다마스 GM|코란도_C 싸용|XC60 볼보|i30 현대|Hatch MINI|All_New_Avalon 닛산|Panamera 포르쉐|Discovery_Sport 랜드로버|Prius 토요타|이쿼녹스 GM|K3_GT 기아|임팔라 GM|RX 렉서스|코란도_투리스모 쌍용|RAV4 토요타|벨로스터 현대|아이오닉_electric 현대|Clubman MINI|New_Cherokee 지프|NX 렉서스|All_New_Wrangler 지프|XC90 볼보|넥쏘 현대|A6 아우디|7-series BMW|X1 BMW|Renegade 지프|S-class BENZ|트위지 르노삼성|Discovery 랜드로버|Grand_Cherokee 지프|CT6 캐딜락|4-series BMW|GLS BENZ|Grand_C4_Picasso 씨트로앵|All_New_Compass 지프|X5 BMW|CLA BENZ|Prius_C 토요타|Countryman MINI|New_Range_Rover 랜드로버|MKX 링컨|X3 BMW|X6 BMW|Range_Rover_Velar 랜드로버|S90...