IBSheet8 Manual Sample

author(s): IBSheet

HTML

<!-- ibsheet css -->
<link rel="stylesheet" href="https://www.ibsheet.com/v8/assets/lib/ibsheet/css/default/main.css"/>
<!--  ibsheet 필수 js -->
<script src="https://www.ibsheet.com/v8/assets/lib/iblicense.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/ibsheet.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/locale/ko.js"></script>

<!--  ibsheet 선택/추가 js -->
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-excel.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/jszip.min.js"></script>

<div>
  1. 왼쪽 그리드내에서 행이동이 가능합니다.<br/>
  2. 왼쪽 그리드에서 오른쪽 그리드로 행 이동이 가능 합니다.<br/>
     - 왼쪽 시트의 김미경은 영업부로 이동할수 없습니다.<br/>
     - 여러행을 이동하고 싶으면 Shift/Ctrl + click 합니다.<br/>
  3. 오른쪽 그리드내에서 행 이동은 하지 않습니다.<br/>   
</div>
<div style='height:500px'>
    <div style='height:100%;'>
        <div id='LeftSheetDiv' style='float:left;width:49%;height:100%'></div>
        <div style='float:left;width:2%;height:100%'></div>
        <div id='RightSheetDiv' style='float:left;width:49%;height:100%'></div>
    </div>
</div>

CSS

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

JavaScript

var ib = ib||{};
ib = {
"LeftInit" : {
  //공통기능 설정 부분
  "Cfg": {
      CanDrag : 1,
      SelectingCells :0,
     
    },
    //중앙(메인) 컬럼 설정
  "Cols": [
      {"Header": " ","Type": "Bool","Name": "chk","MinWidth": 35,"Align": "Center","CanEdit": 1},
      {"Header": "직급","Type": "Text","Name": "sPos","MinWidth": 60,"Align": "Center","CanEdit": 0},
      {"Header": "성명","Type": "Text","Name": "sName","MinWidth": 50,"Align": "Center","CanEdit": 0,"RelWidth": 1},
      {"Header": "성별","Type": "Enum","Name": "sSex","MinWidth": 40,"Align": "Center","Enum": "|男|女","EnumKeys": "|남|여"},
      {"Header": "연령대","Type": "Text","Name": "sAge2","MinWidth": 50,"Align": "Center"},
      {"Header": "거주지1","Type": "Text","Name": "sAddr1","MinWidth": 50,"Align": "Center","CanEdit": 0,"RelWidth": 1},
      {"Header": "나이","Type": "Int","Name": "sAge","MinWidth": 50,"Align": "Right","CanEdit": 0}
    ],
  "Events": {
  	onRenderFirstFinish: function(evt) {
      evt.sheet.loadSearchData(ib.data.LeftSheetData)
    },
    onStartDrag:function (evtParam) {
    
      var sheet = evtParam.sheet;
      
      // 단일 행일 경우 rows 배열이 없으므로 row 객체 사용
      const rowsToCheck = evtParam.rows && evtParam.rows.length ? evtParam.rows : [evtParam.row];

      // 특정 행 조건에서 드래그 취소
      for (let i = 0; i < rowsToCheck.length; i++) {
          const rowData = rowsToCheck[i];
          if(sheet.id === 'LeftSheet' && rowData.sPos === '대표이사'){
              sheet.showMessageTime('대표이사는 이동할 수 없습니다.', 800);
              return true;  // 드래그 취소
          }
      }

    if (evtParam.more) {
      // 복수행일때만 드래그 표시용 HTML
      const firstRow = rowsToCheck[0];
      const count = rowsToCheck.length;

      return `
        <div style="
          padding:8px 12px;
          background:#1976d2;
          color:#fff;
          font-weight:bold;
          border-radius:8px;
          box-shadow:0 4px 10px rgba(0,0,0,0.3);
          white-space:nowrap;
        ">
          ${firstRow.sName} 외 ${count - 1}건 이동
     ...