Migration

1. 제품 파일 변경

각 파일의 기능 비교

IBSheet7 파일 기능 IBSheet8 파일
ibsheet.js 제품core ibsheet.js
ibleaders.js 라이선스 ibleaders.js
ibsheetinfo.js 초기화 상수,함수 ibsheet-common.js
ibmsg 메세지 파일 ko.js, en.js
Main폴더 css파일 및 이미지 css/테마폴더
ibsheet.cfg 공통 기능 속성 ibsheet-common.js
없음 찾기,피봇등 공통 다이얼로그 ibsheet-dialog.js
없음 파일 export/import 관련 모듈 ibsheet-excel.js

ibsheet7을 통해 제품 개발시에는 실제 화면에 필수적으로 include 해야 하는 파일은 ibsheet.jsibsheetinfo.js 였습니다.
이 두 개 파일만 추가하면 나머지 파일들(ibmsg, ibsheet.cfg, ibsheet.css)은 ajax통신을 통해 자동으로 화면에 로딩 되었었습니다.

IBSheet8에서는 기존에 ibmsgibsheet.cfg와 같이 확장자가 없거나, cfg와 같이 개별적인 확장자를 갖는 파일은 모두 js형태로 변경되었고 각 파일은 직접 화면에 include하는 형태로 변경되었습니다.
따라서 IBSheet8로 마이그레이션 시에는 다음과 같은 파일들이 추가되어야 합니다.

IBSheet8 사용 파일

  1. ibsheet.js (IBSheet8 코어)
  2. /locale/ko.js (혹은 en.js) (다국어 메세지 파일)
  3. /css/default/main.css (기본디자인 css)
  1. ibsheet-common.js (공통기능 설정)
  2. ibsheet-dialog.js (각종 다이얼로그 사용)
  3. ibsheet-excel.js (엑셀,텍스트 다운로드/업로드)

example

// AS-IS
<script type="text/javascript" src="/common/sheet/js/ibsheet.js"></script>
<script type="text/javascript" src="/common/sheet/js/ibsheetinfo.js"></script>
// TO-BE
// - 필수 파일
<link rel="stylesheet" href="/common/ibsheet8/css/default/main.css">
<script type="text/javascript" src="/common/ibsheet8/ibsheet.js"></script>
<script type="text/javascript" src="/common/ibsheet8/locale/ko.js"></script>

// - 선택 추가 파일
<script type="text/javascript" src="/common/ibsheet8/ibsheet-common.js"></script>
<script type="text/javascript" src="/common/ibsheet8/ibsheet-dialog.js"></script>
<script type="text/javascript" src="/common/ibsheet8/ibsheet-excel.js"></script>

IBSheet8은 기본적으로 CSS3를 사용함으로 IE10 이상의 브라우저에서 정상적으로 보여집니다.

2. 객체 생성 및 초기화

객체 생성

IBSheet7의 객체 생성 단계는 다음과 같습니다.

  1. createIBSheet(혹은 createIBSheet2)함수를 이용하여 기본 시트 객체 생성
  2. 초기화 함수(IBS_InitSheet)를 통해 열의 개수,기능을 설정

IBSheet8은 위 두개 과정이 합쳐진 형태로 단일 함수내에서 객체에 대한 생성 및 초기화가 이루어지게 됩니다.

//AS-IS

// 1. 시트 객체를 #sheetDIV 객체에 지정한 크기로 생성(생성객체,id,너비,높이)
createIBSheet2( document.getElementById("sheetDIV"),"mySheet","100%","250px");
// 2. 시트 초기화
var initSheet = {
    Cfg:{SearchMode:2},
    Cols:[
        {Header:"No",Type:"Seq",SaveName:"SEQ",Width:60},
        {Header:"이름",Type:"Text",SaveName:"sName",Width:100,Align:"Center"},
        {Header:"부서",Type:"Combo",SaveName:"sDept",Width:80,ComboText:"인사|총무|개발|설계",ComboCode:"A01|A04|B01|B02"},
        ...
    ]
}
//초기화 함수 호출(시트객체,초기화 설정 구문)
IBS_InitSheet(mySheet,initSheet);
//TO-BE
var initSheet = {
    Cfg:{SearchMode:2},
    Cols:[
        {Header:"No",Type:"Int",Name:"SEQ",Width:60},
        {Header:"이름",Type:"Text",Name:"sName",Width:100,Align:"Center"},
        {Header:"부서",Type:"Enum",Name:"sDept",Width:80,Enum:"|인사|총무|개발|설계",EnumKeys:"|A01|A04|B01|B02"},
        ...
    ]
}
//시트 객체 생성 및 초기화(높이,너비는 sheetDIV객체의 크기를 따른다)
IBSheet.create({
    el:"sheetDIV" //생성객체
    id:"mySheet" //id
    options:initSheet //초기화 설정 구문

});

초기화 구문 변경 부분

기존 IBSheet7의 각 열 별 타입, 포맷, 기능에 대해서 IBSheet8에서 변경된 내용을 아래에서 확인해 보세요.

주요 초기화 기능 변경

Cfg(SetConfig)

ibsheet7 속성명 기능설명 변경 내용
AutoFitColWidth 지정한 시점마다 각 열의 너비를 가로 스크롤바가 생기지 않는 범위 내로 조정해 주는 기능 열 생성시 RelWidth (col) 속성을 통해 각 열의 너비를 비율로 조정하는 형태로 변경
CountFormat,CountPosition,PagingPosition 조회된 데이터 건수 표시 기능 InfoRowConfig (cfg) 속성을 통해 설정
DragMode 드래그 방식,가능 여부 설정 CanDrag (cfg) 속성을 통해 설정 가능
HeaderRowHeight,DataRowHeight 헤더,데이터 행의 높이를 설정 css 를 통해 설정하는 형태로 변경
Size (cfg)를 통해 시트의 행 높이, 아이콘 크기, 버튼 크기 등 전체적인 크기 조절이 가능
FrozenCol,FrozenColRight 좌우측 열고정 기능 LeftCols, RightCols 속성을 통해 시트 생성시 설정. 이후로는 setFixedCols (method) 함수로 변경가능
MergeSheet 헤더, 데이터행의 머지종류 설정 HeaderMerge (cfg),DataMerge (cfg), PrevColumnMerge (cfg) 속성으로 변경
Page 한번에 렌더링할 행의 개수 PageLength (cfg)로 명칭 변경
SearchMode 조회 렌더링 방식 설정 SearchMode (cfg)동일 하지만 Mode는 조금씩 다르며 일부 모드는 추가됨
SumPosition 합계 행에 대한 위치 setFormulaRowPosition (method) 함수를 통해 설정
ToolTip 풍선도움말 사용여부 row,col 속성 설정에서 Tip (row) (col) (cell)으로 변경
UseHeaderActionMenu 헤더행 컨텍스트 메뉴 기능 Def/Header에서 Menu 속성으로 설정




Cols(InitColumns)

Type 속성

Type명 변경내용
Text 일반 문자형 타입으로 동일. 단 MultiLineText(여러개행)속성 사용시에는 Lines타입이 별도 제공됩니다.
Status 지원안함
Status타입 열의 유무와 상관없이 시트 내에 변경사항에 대한 관리가 자동으로 이루집니다.
일반적으로 수정된 행은 노란색(.IBColorChanged),입력은 파란색(.IBColorAdded),삭제는 붉은색(.IBColorDeleted) 배경색으로 변경되어 표시 됩니다.
서버로 전송되는 행 상태에 대한 값은 기본적으로 'STATUS' 로 전송되며 이름을 변경하고 싶은 경우에는 Cfg에서 ReqStatusName 속성으로 변경할수 있습니다.
기존에 I, U, D로 서버로 전송되던 값은 Added, Changed, Deleted 로 전송됩니다.
이를 기존과 동일한 I, U, D로 변경하시려면 ko.js(메세지파일)에서 ReqStatusAdded, ReqStatusChanged, ReqStatusDeletedI, U, D로 수정해 주세요.
기존 IBSheet7과 마찬가지로 사용자에게 행의 입력/수정/삭제 여부를 별도 열을 통해 표시하고자 하는 경우에는 아래 Status 타입 마이그레이션 부분을 참고해 주세요.
DelCheck 지원안함
deleteRow()함수를 통해서 행의 상태를 삭제로 변경할 수 있습니다.
IBSheet7처럼 체크박스를 두고 상태를 삭제로 변경하고자 하신다면 열의 Type을 Bool로 설정하시고 OnChange (json event)를 통해 행의 상태를 바꾸게끔 설정하시면 됩니다.
자세한 코드는 아래 DelCheck 타입 마이그레이션 부분 참고해주세요.
CheckBox Bool타입으로 변경되었습니다.
DummyCheck 지원안함
Bool 타입으로 설정하고 NoChanged (col) 속성을 1로 설정하시면 됩니다.
Radio Radio로 동일합니다.
Combo Enum 타입으로 변경되었습니다.
콤보의 item을 설정하던 ComboText, ComboCode는 각각 Enum (col), EnumKeys (col)로 변경되었습니다.
특히 Enum, EnumKeys의 첫번째 글자를 구분자로 사용하는 것을 주의해 주세요.
보다 자세한 내용은 아래 Combo,ComboEdit 타입 마이그레이션을 참고해 주세요.
ComboEdit 지원안함.
Combo,ComboEdit 타입 마이그레이션을 참고해 주세요.
AutoSum 타입은 Int나 Float으로 설정하시고, FormulaRow (col) 속성을 사용하시면 합계나 평균을 표시할 수 있습니다.
Image Img타입으로 변경되었습니다.
특히 데이터 구조가 크게 변경되었으므로 Type부분의 내용을 참고해 주세요.
Int Int로 동일합니다.
Float Float로 동일합니다.
Date Date로 동일합니다.
Popup 지원안함.
열 우측에 버튼을 두고자 하시는 경우에는 Button속성을 통해 설정하실 수 있습니다.
ex) {Type:"Text",Name:"DEPTPOP",Button:"../assets/imgs/popup.png"}
버튼 클릭시 발생하는 이벤트는 onButtonClick (event)을 참고하세요.
Pass Pass로 동일합니다.
Seq 지원안함
열의 타입을 Int로 설정하시고, Name"SEQ"로 지정하시면 자동 순번열 형태로 동작합니다.
Html Html로 동일합니다.
Button Button으로 동일합니다.
onButtonClick (event)이벤트 대신 onClick (event)이벤트를 통해 클릭에 대한 로직을 구성하셔야 합니다.
Result 지원안함
Sparkline D3 라이브러리를 이용하여 구현 가능 (스파크차트 예제 참고)

Format 속성

IBSheet8에서는 타입별로 설정할 수 있는 포맷이 다양하고 기본적인 Format (col) 외에도 DataFormat (col), EditFormat (col), CustomFormat (col)를 통해 서버와 주고받을 데이터 유형이나 사용자 편집시 보여질 데이터 유형 등을 설정할 수 있습니다.
이로 인해 굉장히 유연하고 다양한 형태의 포맷을 지원할 수 있습니다.
또한 자주 사용되는 설정들을(Format,DataFormat,EditFormat…) IB_Preset 혹은 다른 변수에 담아두고, 해당 포맷이 필요한 경우 Extend (col) 속성을 통해 쉽게 사용하실 수 있습니다.

//AS-IS
var Cols = [
    {Type:"Date",SaveName:"eDate",Width:100,Format:"Ymd"},
];
//TO-BE
opt.Cols = [
    //YMD 안에 Type,Width,Format 등이 모두 설정되어 있음.
    {Name:"eDate",Extend:IB_Preset.YMD},
];

IB_Preset 변수는 ibsheet-common.js 파일 내에 있습니다.

그외에 속성

속성명 IBSheet8 지원 방법
AcceptKeys,ExceptKeys 지원안함
ResultMask (col) 속성을 통해 정규식으로 로직을 구성하셔야 합니다.
기존 코드에 대해 IBSheet8에서 EditMask (col) 변환하는 코드는 아래 AcceptKeys,ExceptKeys 마이그레이션을 참고해 주세요.
Align 이전과 동일 (center,left,right)
ApproximateType 컬럼별 설정 불가.
(locale파일(ko.js)에서 Format.DecimalAdjust 값에 따라 결정(ceil,round,floor)
AutoSum FormulaRow (col) 속성으로 변경. 사용법은 유사하나 함수 연결도 가능해졌습니다.
BackColor Color (col)로 속성명 변경. 사용법은 동일합니다.
CalcLogic Formula (col)속성으로 변경되고 기능이 확장되었습니다. 자세한 내용은 Formula (appendix)를 참고해 주세요.
ColMerge ColMerge (col)속성으로 동일합니다.
ComboCode,ComboText 위에 Combo, ComboEdit 타입에 대한 마이그레이션에서 언급한 것과 같이 Enum (col), EnumKeys (col)로 변경되었습니다.
마이그레이션시 IBSheet8에서는 첫번째 글자를 구분자로 사용하는 것을 주의해 주세요.
Edit,EditLen EditCanEdit (col)EditLenSize (col)로 변경되었습니다.
EmptyToReplaceChar EmptyValue (col)로 변경되었습니다.
FontBold,FontUnderline TextStyle (col)로 속성명 변경. bold외 밑줄,스트라이크,기울임등을 설정할 수 있습니다.
FontColor TextColor (col)로 속성명 변경. 사용법은 동일합니다.
Hidden Visible (col)로 변경되었습니다. 따라서 값도 기존과 반대로 입력되어야 합니다.(Hidden (col)속성은 실제 행의 높이 혹은 열의 너비만 줄여서 표시합니다.)
KeyField Required (col)로 속성명 변경. 사용법은 동일합니다.
MaximumValue,MinimumValue onEndEdit 이벤트를 override 하여 구현하여야 합니다. (예제참고)
SaveName Name (col)으로 속성명 변경.
특히 Name은 필수요소로 모든 열에는 반드시 Name속성이 있어야 합니다. 또한 한 시트 내에 동일한 Name을 갖는 열이 2개 이상 있어도 안됩니다.
Sort CanSort (col)로 속성명 변경. 사용법은 동일합니다.
ToolTip Tip (col)으로 속성명 변경. 사용법은 동일합니다.
TreeCol 지원안함
트리기능 사용시 MainCol cfg속성을 통해 트리가 될 열을 지정하셔야 합니다.
InsertEdit AddEdit(col)으로 속성명 변경
UpdateEdit ChangeEdit(col)으로 속성명 변경
Width 기존과 동일합니다.
그리고 MinWidth (col), MaxWidth (col), RelWidth (col)를 통해 열 너비의 최소,최대 크기나 상대적 크기를 설정하실 수 있습니다.

3. 이벤트 대응

이벤트 사용 방법 변경

IBSheet7에서 이벤트는 global window객체 안에 시트id_이벤트명 형식의 함수를 만드는 형태였습니다.
IBSheet8에서는 다른 속성과 마찬가지로 Events라는 속성명안에서 필요한 이벤트를 정의하는 형태로 변경되었습니다.
또한 각 이벤트별로 달랐던 argument의 개수도 IBSheet8에서는 모든 이벤트가 동일하게 evtParam 객체 하나를 받고, evtParam 객체안에 각 이벤트에 따라 다른 인자를 갖는 형태로 바뀌었습니다.

//AS-IS
//change 이벤트
function mySheet_OnChange(row, col, value, oldValue) {
    if (col == 5 && value > 100) {
        alert("최대 100 까지 입력 가능합니다.");
    }
}
//click 이벤트
function mySheet_OnClick(row, col, value, cellx, celly, cellw, cellh, rowtype) {
    if (mySheet.ColSaveName(col) == "SA_NO") {
        showEmpPopup( value ,"simple" );
    }
}
//TO-BE
opt.Events = {
    //change 이벤트
    onAfterChange:function(evtParam) {
        if (evtParam.col == "AVGRST" && evtParam.val > 100 ) {
            alert("최대 100 까지 입력 가능합니다.");
        }
    },
    //click 이벤트
    onAfterClick:function(evtParam) {
        if (evtParam.col == "SA_NO") {
            showEmpPopup( evtParam.sheet.getValue(evtParam.row, evtParam.col) );
        }
    }
}

자주 사용되는 이벤트

IBSheet7에서 자주 사용되는 이벤트에 대해 IBSheet8에서 변경된 부분을 확인합니다.
이벤트의 발생 시점은 조금씩 차이가 있을 수 있습니다.
이벤트 명칭이 기존에 파스칼케이스(PascalCase)에서 카멜케이스(camelCase)로 변경된 점을 주의해 주세요.

이벤트명 IBSheet8 이벤트 설명
OnAfterEdit onAfterEdit (event)
OnBeforeCheck onBeforeChange (event) 별도에 CheckBox타입에서만 발생하는 이벤트는 없고,해당 이벤트는 모든 타입의 열에서 발생합니다.
OnBeforeDownload onBeforeDownload (event)
OnBeforePaste onBeforePaste (event)
OnButtonClick onClick (event) Button타입에서만 발생하는 이벤트는 없고,해당 이벤트는 모든 타입의 열에서 발생합니다.
JSON Evnet onClickSide (props event) 를 사용할 수도 있습니다.
OnChange onAfterChange (event) setValue (method)와 같이 외부 함수를 통한 변경에서는 발생하지 않습니다.
OnClick onAfterClick (event) IBSheet8의 onClick (event)는 IBSheet7의 동일 이벤트보다 발생 시점이 앞섭니다.
따라서 마이그레이션시 onAfterClick (event)를 사용해 주세요.
OnDblClick onDblClick (event)
OnDownFinish onExportFinish (event) 명칭변경
OnKeyUp, OnKeyDown onKeyUp (event), onKeyDown (event)
OnLoad onRenderFirstFinish (event) 이벤트의 발생시점은 IBSheet7의 OnLoad와 다르나, 최초 생성후 1회 발생하는 점에서 동일합니다.
OnLoadData onBeforeDataLoad (event) 명칭변경
OnLoadExcel, OnLoadText onImportFinish (event) 단일 이벤트에서 공통처리
OnMouseDown, OnMouseUp, OnMouseMove onMouseDown (event), onMouseUp (event), onMouseMove (event)
OnMovePage onBeforeGoToPage (event) 명칭변경
OnRowSearchEnd onRowLoad (event) 명칭변경
OnSaveEnd onAfterSave (event) IBSheet7의 OnSaveEnd는 저장 후 데이터 반영 및 렌더링 처리까지 끝난 상태에서 발생하나, onAfterSave (event)는 저장데이터를 서버에서 전송받은 직후 발생합니다.
OnSearchEnd onSearchFinish (event) 명칭변경
OnSelectMenu onSelectMenu (event)
OnSelectCell onFocus (event) 명칭변경
OnSort onAfterSort (event) 명칭변경
OnHScroll, OnVScroll onScroll (event) 단일 이벤트에서 공통처리

4. 자주 사용되는 함수 대응

IBSheet7에서 비교적 자주 사용되었다고 생각되는 함수에 대해 지원 여부와 변경된 내용입니다.

IBSheet7 함수명 기능 설명 IBSheet8 지원 여부
ActionMenu 데이터 영역에서 마우스 우측 버튼 클릭시 컨텍스 메뉴 생성 Menu속성으로 대체
CellAlign 셀의 좌우 정렬 값 설정 Align (cell)속성으로 대체.
ex) sheet.setAttribute(row,'colName','Align','Right');
CellBackColor 셀의 배경색 변경 Color (cell)속성으로 대체.
ex) var color = sheet.getAttribute(row, 'colName', 'Color');
CellComboItem 셀의 드롭리스트 아이템 변경 Enum (cell), EnumKeys (cell) 속성으로 대체.
ex) sheet.setAttribute(row, 'colName', 'Enum', '\|사장\|과장\|대리\|사원');
sheet.setAttribute(row, 'colName', 'EnumKeys', '\|A01\|B0\|B2\|C0');
CellEditable 셀의 편집가능 여부 CanEdit (cell)속성으로 대체.
ex) sheet.setAttribute(row, 'colName', 'CanEdit', 0);
CellFont 셀의 다양한 폰트 유형 설정 TextFont (cell), TextStyle (cell), TextSize (cell) 속성으로 대체
ex) sheet.setAttribute(row, 'colName', 'TextSize', '1.3em');
CellFontBold 셀의 font-weight 수정 TextStyle (cell)속성으로 대체
ex) sheet.setAttribute(row, 'colName', 'TextStyle', 1);
CellFontColor 셀의 폰트 색상 변경 TextColor (cell)속성으로 대체
ex) var color = sheet.getAttribute(row, 'colName', 'TextColor');
CellFontItalic 셀의 font-style를 italic으로 수정 TextStyle (cell)속성으로 대체
CellFontName 셀의 font-family 수정 TextFont (cell)속성으로 대체
CellFontSize 셀의 font-size 수정 TextSize (cell)속성으로 대체
CellFontStrike 셀 내용에 취소선(strike) 설정 TextStyle (cell)속성으로 대체
CellFontUnderline 셀 내용에 밑줄(Underline) 설정 TextStyle (cell)속성으로 대체
CellVAlign 셀 내용의 상하 정렬 설정 VAlign (cell)속성으로 대체
ex) sheet.setAttribute(row, 'colName', 'VAlign', 'top');
CellImage 이미지 셀의 이미지 변경 getValue (method), setValue (method)함수로 변경(Img타입에 대한 데이터 확인)
ex) sheet.setValue(row, 'colName', '\|./img/pic/sw97231.png\|200\|300');
CellSearchValue 셀의 최초 로딩된 데이터 확인 Orig (cell)속성으로 대체
ex) var orgValue = sheet.getAttribute( sheet.getRowById("AR99") , "CLS" , "Orig");
CellText 셀의 값을 포맷이 적용된 상태로 얻거나 설정 getString (method), setString (method)함수로 대체
ex) var v = sheet.getString(row, col);
CellValue 셀의 값을 포맷을 제거한 상태로 얻거나 설정 getValue (method), setValue (method)함수로 대체
ex) sheet.setValue(row, 'colName', 'A01');
CheckAll 열 전체에 값을 체크 setAllCheck (method)함수로 대체
ex) sheet.setAllCheck('colName', 1);
CheckedRows 체크된 전체 행의 개수를 얻음 getRowsByChecked (method)함수를 이용
ex) var cnt = sheet.getRowsByChecked( 'sCheck' ).length;
ColBackColor 열 전체의 배경색 설정 Color (col)속성으로 대체
ex) sheet.setAttribute(null, 'colName', 'Color', '#FF9AE0');
ColFontBold 열 전체의 font-weight를 설정
ColFontColor 열 전체의 글자색을 설정 TextColor (col)속성으로 대체
ex) sheet.setAttribute(null, 'colName', 'TextColor', '#FF0000');
ColFontUnderline 열 전체 내용에 밑줄(Underline)설정 TextStyle (col)속성으로 대체
ex) sheet.setAttribute(null, 'colName', 'TextStyle', 4);
ColWidth 열의 너비 설정 Width (col)속성으로 대체
ex) sheet.setAttribute(null, 'colName', 'Width', 250);
ColEditable 열의 편집 가능여부 설정 CanEdit (col)속성으로 대체
ex) sheet.setAttribute(null, 'colName', 'CanEdit', 0);
ColInsert 신규 열 추가 기능 addCol (method)함수로 변경
ColHidden 열 보임/감춤 설정 hideCol (method)함수로 변경

Visible (col)속성으로 대체 가능
ex) sheet.setAttribute(null, 'colName', 'Visible', 0);
ColSaveName 열 index를 기준으로 Name을 확인 getColByIndex (method)함수로 대체
ex) var c = sheet.getColByIndex(4);
ColumnSort 지정한 열 소팅 doSort (method)함수로 대체
ex) sheet.doSort('colName1|-colName2');
ColValueDup 열내 중복행 검사 getRowsByDup (method)함수로 대체
ex) var dupRows = sheet.getRowByDup({cols:'colName','firstOnly':1});
ColValueDupRows 열내 전체 중복행 추출 getRowsByDup (method)함수로 대체
ex) var dupRows = sheet.getRowByDup({cols:'colName'});
CountFormat 조회건수 표시 setInfoRow (method)함수로 대체
CountPosition 조회 건수 표시 위치 setInfoRow (method)함수로 대체
CurrentColInfo 현재 열 정보(순서,너비등) 추출 getCurrentColInfo (method), setCurrentColInfo (method)함수로 동일
DataCopy 행 복사 기능 copyRow (method)함수로 대체
ex) sheet.copyRow(sheet.getFocusedRow());
DataInsert 행 추가 기능 addRow (method)함수로 대체
ex) sheet.addRow();
DataMove 행 이동 기능 moveRow (method)함수로 대체
ex) sheet.moveRow(row, nextRow);
DirectDown2Excel
DirectLoadExcel
DoAllSave 전체 데이터 저장 doSave (method)함수에 saveMode인자로 대체
ex) sheet.doSave({url:'saveData.do',saveMode:0});
DoPrint 시트데이터 인쇄 doPrint (method)함수로 동일
DoSave 시트 데이터 저장 doSave (method)함수로 동일
DoSearch 시트 데이터 조회 doSearch (method)함수로 동일
DoSearchPaging SearchMode가 서버페이징 인 경우 조회 함수 doSearchPaging (method)함수로 동일
Down2Excel 시트를 excel파일로 export down2Excel (method)함수로 동일
Down2ExcelBuffer 여러개의 시트를 엑셀파일로 export 지원안함
Down2Pdf
Down2Text 시트의 내용을 text파일로 export down2Text (method)함수로 동일
Editable 시트 전체에 대한 편집가능 여부설정 CanEdit (cfg)속성으로 대체
ex) sheet.CanEdit = 0;<br/>sheet.renderBody();
EnterBehavior
Enable 시트 활성화 여부 enable (method),disable (method) 두개 함수로 변경
ExportData
ExtendLastCol 마지막 열의 자동 너비 조절 기능 RelWidth (col)속성을 통해 열간 너비 비율 조정 가능
FindCheckedRow 특정 열에 체크된 행 추출 기능 getRowsByChecked (method)함수로 변경
FindStatusRow 상태변화된 행 추출 기능 getRowsByStatus (method)함수로 변경
FindSubSumRow
FindText 특정 문자를 포함하는 행 추출 기능 findText (method)함수로 동일
FitColWidth 열의 너비 재조정 RelWidth (col)속성을 통해 자동 조정는 형태로 변경
FitSizeCol 열의 너비를 열내에 가장 긴글자를 갖는 셀에 맞게 조정 fitSize (method)함수로 변경
FocusAfterProcess 데이터 로딩 후 첫번째 행에 포커스를 둘지 여부 IgnoreFocused (cfg)속성으로 대체
0으로 설정하면 데이터 로딩 후 첫번째 행에 포커스를 이동 시킴 (default: 0)
FrozenCol 좌측 열 고정 기능 setFixedLeft (method)함수로 변경
FrozenRows 상단에 행 고정 기능 setFixedTop (method)함수로 변경
GetCellProperty 행또는 셀에 속성 확인 기능 getAttribute (method)함수 통해 확인 가능
ex) var colEdit = sheet.getAttribute({col:'colName',attr:'CanEdit'});
GetChildRows 트리사용시 특정행의 자식행 추출 getChildRows (method)함수로 동일
GetComboInfo 드랍리스트의 item 내용 확인 Enum (col), EnumKeys (col)속성을 통해 확인 가능
ex) var enum = sheet.getAttribute(null, 'colName', 'Enum');
GetCurrentPage 현재 페이지 index를 확인 getPageIndex (method)함수로 변경
GetDataFirstRow 첫번째 데이터행 index 확인 getFirstRow (method)함수로 변경
GetDataLastRow 마지막 데이터행 index 확인 getLastRow (method)함수로 변경
GetEditText 현재 편집중인 내용 확인
GetSaveData ajax 통신 전용 함수 지원 안함
GetSaveJson 시트 내 데이터를 json형식으로 추출 getSaveJson (method)함수로 동일
GetSaveString 시트 내 데이터를 querystring형식으로 추출 getSaveString (method)함수로 동일
GetSearchData ajax 통신 전용 함수 지원 안함
GetSelectionCols 현재 선택된 열 index 추출 getSelectedRanges (method)함수를 통해 선택 영역 전체를 얻는 형태로 변경
GetSelectionRows 현재 선택된 행 index 추출 getSelectedRanges (method)함수를 통해 선택 영역 전체를 얻는 형태로 변경
HeaderActionMenu 헤더행에서 마우스 우측버튼 클릭시 컨텍스트 메뉴 표시 기능 Menu (row)속성을 Def.Header에 설정하는 형태로 변경(ibsheet-common.js 참고)
HeaderBackColor 헤더행에 대한 배경색 가급적 css 파일에서 설정하는 것을 권장.
Def.HeaderColor (row)속성으로 통해 설정 가능
HeaderCheck 헤더 체크박스에 대한 체크/언체크 설정 Checked (cell)속성을 통해 설정
ex) sheet.getAttribute(sheet.Header,"CheckData","Checked");
HeaderFontBold 헤더 타이틀 font-weight 설정 가급적 css 파일에서 설정하는 것을 권장.Def.HeaderTextStyle (row)속성으로 통해 설정 가능
HeaderFontColor 헤더 타이틀 글자색 설정 가급적 css 파일에서 설정하는 것을 권장.Def.HeaderTextColor (row)속성으로 통해 설정 가능
HeaderRows 헤더 행의 개수 getHeaderRows (method)함수로 확인 가능
ex) var hcnt = sheet.getHeaderRows().length;
HideFilterRow 필터행 제거 기능 hideFilterRow (method)함수로 동일
HideProcessDlg 대기 이미지 제거 hideMessage (method)함수로 변경
HideSubSum 소계 행 제거 removeSubTotal (method)함수로 변경
IBCloseCalendar 달력 제거 IBSheet.showCalendar (static)함수로 생성된 객체의 다이얼로그객체.Close (appendix)함수로 변경
IBShowCalendar 시트 외부영역에서 달력 오픈 IBSheet.showCalendar (static)함수로 변경
ImageList 이미지 파일 index 설정 지원안함
InitCellProperty 셀단위 설정 변경 각 셀(cell)에서 사용가는한 속성 형태로 변경
InitColumns 열 초기화 IBSheet.create (static)함수에 통합
InitComboNoMatchText
InitHeaders 헤더 기본 기능 설정 Cfg 속성으로 통합.
ex) options.Cfg = {CanColResize:0,CanSort:1}; //전체 소팅,리사이징 금지
IsDataModified 데이터 수정 여부 확인 hasChangedData (method)함수로 변경
IsHaveChild 자식노드 유무확인 getChildRows (method)를 이용해서 반환되는 배열의 길이가 0이상이면 자식이 1개 이상 존재하는걸 알 수 있음
LastCol 마지막 열 index 얻기 getLastCol (method)함수로 변경(열의 Name이 리턴)
LastRow 마지막 행 index 얻기 getLastRow (method)함수로 변경(마지막 데이터 행 객체을 리턴)
LoadSaveData 저장 결과에 대한 반영 applySaveResult (method)함수로 변경
LoadSearchData 조회 데이터 로드 loadSearchData (method)함수로 동일(xml 지원 안함)
LoadExcel 엑셀파일 데이터 로드 loadExcel (method)함수로 동일
LoadExcelBuffer 여러개 워크시트 내용 로등 loadExcelBuffer (method)함수로 동일
LoadText 텍스트 파일 데이터 로드 loadText (method)함수로 동일
MergeSheet 데이터 자동 병합 기능 HeaderMerge (cfg), DataMerge (cfg)속성으로 변경
MouseCol 마우스 커서가 위치한 열 index getMouseCol (method)함수로 변경(열의 Name 리턴)
MouseHoverMode 데이터위에 마우스 Hover시 표현 설정 Hover (cfg)속성으로 변경
ex) sheet.Hover = 1; //셀단위
MouseRow 마우스 커서가 위치한 행 index getMouseRow (method)함수로 변경(행 객체 리턴)
MouseToolTipText 풍선도움말 표시 설정 showTip (method)함수로 변경
ex) sheet.showTip('<div class="warn">분기 마감 3일 전입니다.</div>');
MoveColumnPos 열 위치 변경 moveCol (method)함수로 변경
PagingPosition 페이지네이션 설정 InfoRowConfig (cfg)속성에 통합
RangeBackColor 특정 영역의 배경색 변경 렌더링 시점을 직접 컨트롤 할수 있으므로 setAttribute (method)함수를 통해 각 cell별로 Color (cell)속성을 설정(render인자를 0으로)하고, 설정이 끝났을때 rerender (method)함수를 호출
RangeFontBold 특정 영역의 font-weight변경 렌더링 시점을 직접 컨트롤 할수 있으므로 setAttribute (method)함수를 통해 각 cell별로 TextStyle (cell)속성을 설정(render인자를 0으로)하고, 설정이 끝났을때 rerender (method)함수를 호출
RangeFontColor 특정 영역의 글자색 변경 렌더링 시점을 직접 컨트롤 할수 있으므로 setAttribute (method)함수를 통해 각 cell별로 TextColor (cell)속성을 설정(render인자를 0으로)하고, 설정이 끝났을때 rerender (method)함수를 호출
RangeText 특정 영역의 내용 추출 렌더링 시점을 직접 컨트롤 할수 있으므로 setString (method)함수를 통해 각 cell별로 값을 설정(render인자를 0으로)하고, 설정이 끝났을때 rerender (method)함수를 호출
RangeValue 특정 영역의 내용 추출 렌더링 시점을 직접 컨트롤 할수 있으므로 setValue (method)함수를 통해 각 cell별로 값을 설정(render인자를 0으로)하고, 설정이 끝났을때 rerender (method)함수를 호출
RedrawSum 합계 재 계산 calculate (method)함수로 변경
RemoveAll 전체 데이터 삭제 removeAll (method)함수도 동일
RenderSheet 수정 내용 일시 반영 중지/실행 renderBody (method), rerender (method)함수로 변경
ReNumberSeq Seq열에 대한 다시 순번 매김 지원안함
매번 자동으로 순번을 계산함.
Reset 시트 객체 클리어 dispose (method)함수를 호출해서 시트를 완전히 제거하고 같은 id로 다시 생성(IBSheet.create (static))
ReturnCellData 셀 데이터를 최초 로딩된 데이터로 변경 revertCell (method)함수로 변경
ReturnColumnPos 열의 순서를 최초 생성상태로 되돌림 지원안함
ReturnData 행 전체 데이터를 최초 로딩된 데이터로 변경 revertRow (method)함수로 변경
RowBackColor 행 배경색 변경 Color (row)속성으로 대체
ex) sheet.setAttribute(row, null, 'Color', '#FFAA99');
RowBackColorD 삭제될 행의 배경색 css파일 .IBColorDeleted class에서 설정
RowBackColorI 추가행의 배경색 css파일 .IBColorAdded class에서 설정
RowBackColorU 수정된 행의 배경색 css파일 .IBColorChanged class에서 설정
RowCount 상태별 행 개수 확인 getRowsByStatus (method)getTotalRowCount (method)함수로 확인 가능
RowData 행의 값을 json형태로 얻거나 설정 getRowById (method), getFocusedRow (method)등 모든 행 객체를 통해 값 얻기 가능
RowDelete 행 즉시 삭제 removeRow (method)함수로 변경
RowEditable 행 전체 수정 가능 여부 설정 CanEdit (row)속성으로 대체
ex) sheet.setAttribute(row, null, 'CanEdit', 0);
RowExpanded 트리 사용시 자식행에 대한 펼침 여부 설정 setExpandRow (method)함수로 변경
RowFontColor 행의 글자색 변경 TextColor (row)속성으로 대체
ex) var fc = sheet.getAttribute(row, null, 'TextColor');
RowHeight 행의 높이 설정 getRowHeight (method)함수로 확인
Height (row)속성으로 높이 변경.
ex) sheet.setAttribute(sheet.getFocusedRow(), null, "Height", 200);
RowHeightMax 전체 데이터 행의 최대 높이 설정 Def.Row.MaxHeight속성으로 설정
ex) sheet.Def.Row.MaxHeight = 100; sheet.rerender();
RowHeightMin 전체 데이터 행의 최소 높이를 설정 Def.Row.MinHeight속성으로 설정
ex) sheet.Def.Row.MinHeight = 50; sheet.rerender();
RowHidden 행을 보임/감춤 설정 Visible (row)속성으로 대체
ex) sheet.setAttribute(row, null, 'Visible', 0);
hideRow (method)함수로 변경
ex) sheet.hideRow(row, null, 0);
RowLevel 트리 사용시 행의 Depth index 설정 Level속성으로 대체(확인만 가능)
ex) var lvl = sheet.getAttribute(row, null, 'Level');
moveRow (method)함수로 행을 이동시켜야함.
SaveNameCol 열 명에 대한 Index getColIndex (method)함수로 변경
SearchRows 로드된 데이터 행의 수 getDataRows (method)함수로 변경
하지만 상태가 변경된 데이터행을 제외하고 싶다면 다음과 같이 갯수를 구할 수 있습니다.
ex) var searchRow = sheet.getDataRows() - sheet.getRowsByStatus("Added,Deleted").length;
SelectCell 특정 위치로 포커스 이동 focus (method)함수로 변경
ex) sheet.focus(row, 'colName');
SelectCol 특정 열로 포커스 이동 focus (method)함수로 변경
ex) sheet.focus(null, 'colName');
var fc = sheet.getFocusedCol();
SelectionMode 행,셀단위 select 설정 SelectingCells (cfg)속성으로 대체
SelectRow 특정 행으로 포커스 이동 focus (method)함수로 변경
ex) sheet.focus(row, null);
var fr = sheet.getFocusedRow();
SetBlur 시트내 포커스 제거 blur (method)함수로 변경
ex) sheet.blur(2);
SetColProperty 열 속성 변경 setAttribute (method)를 통해 각종 속성 설정 가능
ex) sheet.setAttribute(null, 'colName', 'CanEdit', 0);
SetConfig 초기 기능 설정 IBSheet.create (static)함수에 Cfg속성으로 대체
SetEndEdit 편집 종료 기능 endEdit (method)함수로 변경
SetHeaderMode 헤더행에 대한 기능 설정 위에 InitHeaders함수에 대한 설명 참고.
ex) sheet.CanSort = 0;
SetMergeCell 특정 영역에 대한 span setMergeRange (method)함수로 변경
SetSelectRange 특정 영역 선택 selectRange (method)함수로 변경
SetSplitMergeCell 머지된 영역에 대해 머지취소 setMergeCancel (method)함수로 변경
SheetWidth 시트의 너비 변경 IBSheet.create (static)함수로 생성할때 지정된 el객체의 너비를 수정
SheetHeight 시트이 높이 변경 IBSheet.create (static)함수로 생성할때 지정된 el객체의 높이 수정
ShowCalendar 특정 셀위에 달력 팝업 open AutoCalendar (cfg)속성으로 대체
ShowColumnPopup 열에 설정한 컨텍스트 메뉴를 표시 showMenu (method)함수로 유사하게 기능 구현 가능
ex) var menu = sheet.getAttribute(sheet.getFocusedRow(),"sCompany","Menu");
sheet.showMenu(sheet.getFocusedRow(),"sCompany",menu);
ShowFilterRow 필터행 표시 showFilterRow (method)함수로 동일
ShowFindDialog 찾기 다이얼로그 창 open showFindDialog (method)함수로 동일(ibsheet-dialog.js 파일 필요)
ShowGroupRow 그룹행 생성 solid 행 사용으로 변경
ShowMsgMode 메세지 event 발생 여부 설정
ShowPivotDialog 피봇 다이얼로그 창 open showPivotDialog (method)함수로 변경(ibsheet-dialog.js 파일 필요)
ShowProcessDlg 대기 이미지 표시 showMessage (method)함수로 변경
ShowSubSum 소계행 생성 기능 makeSubTotal (method)함수로 변경
ShowToolTip 풍선도움말 표시 showTip (method)함수로 변경
ShowTreeLevel 트리 시트 사용시 지정한 Depth까지 펼침 showTreeLevel (method)함수로 동일
SumBackColor 합계 행에 대한 배경색 css파일의 .IBFormulaRow class에서 설정 혹은 합계행에 대해 직접 설정
ex) var frow = sheet.getRowById("FormulaRow");
sheet.setAttribute(frow, null, 'Color', "#FF0099");
SumFontBold 합계 행에 대한 font-weight css파일의 .IBFormulaRow class에서 설정
SumFontColor 합계 행에 대한 글자색 설정 css파일의 .IBFormulaRow class에서 설정
SumRowHidden 합계 행 보입/감춤 설정 showRow (method), hideRow (method)로 분리 및 변경
Visible (row)속성으로 대체
ex) sheet.setAttribute(sheet.FormulaRow, null, "Visible", true);
SumValue 합계 행의 값 설정 getValue (method), setValue (method)함수로 변경
ex) sheet.setValue(sheet.FormulaRow, "sAmt", 250000);
TabBehavior 포커스 상태에서 'Tab’키 클릭시 동작 설정
Theme 테마 설정 setTheme (method)만 동일
ToolTipText 특정 셀에 풍선도움말 설정 Tip (cell)속성으로 대체
ex) sheet.setAttribute(row, 'colName', 'Tip', '사원번호를 먼저 입력하세요');
TopRow 최상단의 행 index 확인 getShownRows (method)함수로 확인 가능
ex) var trow = sheet.getShownRows()[0];
TotalRows 전체 데이터 건수 설정 getTotalRowCount (method)함수로 변경
Visible 시트 전체 보임/감춤 설정 IBSheet.create (static)로 생성할때 지정된 el객체에 대해 display나 visibility 변경

5. 마이그레이션시 차이점,유의사항

  1. 객체 접근,렌더링 시점 변화 IBSheet8에서는 기존 버전의 제품과 달리 시트 내부의 각 객체에 직접 접근하여 값을 확인하거나 수정하는 방식으로 변경되었습니다.
    또한 각 함수의 수행 후에 즉시 렌더링이 일어나던 IBSheet7과 달리 렌더링이 필요한 순간 렌더링 함수를 호출하여 실제 화면에 반영하는 방식으로 루프를 돌면서 하는 작업들에 있어서 성능이 개선되었습니다.
    아래 예제는 "TOTAL"라는 열에 대해 전체 데이터를 확인하여 열의 값이 100보다 큰 경우, 해당 셀의 배경색을 붉은색으로 표시하게 끔 로직을 구성하는 예제를 참고해 주세요.
//AS-IS
//첫번째 데이터 행부터 마지막 데이터 행까지 루프를 돈다.
for (var i = sheet.GetDataFirstRow(); i <= sheet.GetDataLastRow(); i++) {
    if (sheet.GetCellValue(i,"TOTAL") > 100){ //셀 내의 값을 clone해서 가져옴.
        sheet.SetCellBackColor(i,"TOTAL", "#FF0000"); //해당 셀에 배경색을 붉은색으로 변경한다. (함수 호출시마다 렌더링이 발생함.)
    }
}
//TO-BE
//전체 데이터행 객체를 배열로 얻음
var rows = sheet.getDataRows();
for (var i = 0; i < rows.length; i++) {
    //한 행 객체를 얻음
    var row = rows[i];
    //row 객체 내에서 값을 비교하고 설정한다.
    //이렇게 수정해도 실제 화면에 반영(렌더링)되지는 않는다.
    if (sheet.getValue(row, "TOTAL") > 100) {
        sheet.setAttribute(row, "TOTAL", "Color", "#FF0000", 0);//render 속성을 0
    }
}
//전체 수정된 내용을 화면에 반영
sheet.renderBody();

IBSheet7의 경우 빈번한 렌더링 발생과 값에 대한 핸들링 방식의 차이로 인해 성능을 저해해 왔습니다.
IBSheet8에서는 객체에 대한 직접 접근 및 렌더링 시점 조절을 통해 이러한 작업에 있어서 강점이 있습니다.
실제로 위 예제는 IBSheet7과의 로직 차이를 설명하기 위해 작성된 것으로 IBSheet8에 Formula 기능을 이용하면 보다 간단하고 빠르게 해당 기능을 구현하실 수 있습니다.

  1. Tree(트리)데이터 파싱 IBSheet7에서는 트리를 사용하는 경우 두가지 데이터 구조를 지원하였습니다.
  1. Items 속성을 이용한 단계적인 구조 트리 데이터
{Data:[
    {ID:1,sName:"할아버지",Items:[
        {ID:2,sName:"큰아버지"},
        {ID:3,sName:"아버지",Items:[
            {ID:5,sName:"형"},
            {ID:6,sName:"나"}
        ]},
        {ID:4,sName:"작은아버지"}
    ]}
]}
  1. Level 속성을 이용한 Depth지정 트리 데이터
{Data:[
    {ID:1 ,Level:1,sName:"할아버지"},
    {ID:2 ,Level:2,sName:"큰아버지"},
    {ID:3 ,Level:2,sName:"아버지"},
    {ID:5 ,Level:3,sName:"형"},
    {ID:6 ,Level:3,sName:"나"},
    {ID:4 ,Level:2,sName:"작은 아버지"},
]}

IBSheet8에서는 기본적으로 위에 1) Items 속성을 이용한 트리데이터 구조를 지원합니다. 그리고 이전과 마찬가지로 Level 속성을 이용한 파싱을 사용하시려면 ibsheet-common.js 안에 v7.convertTreeData 함수를 이용하여야 합니다.

IBSheet.v7에 정의된 API는 시트 객체를 바인딩해줘야합니다.

// IBSheet7의 Level 데이터 구조를 변경해 줌.
sheet.loadSearchData( IBSheet.v7.convertTreeData(jsonData) );

6. 기타

Status 타입 마이그레이션

ibsheet7에서 행의 상태를 보여주는 "Status"타입이 ibsheet8에는 없고, 행에 대한 추가,삭제,수정시 자동으로 관리됩니다. (행 객체 안에 Added,Deleted,Changed 속성이 추가됨)
그리고 상태에 따라 기본적으로 행의 색상이 변경됩니다. (파랑:신규,분홍:삭재,노랑:수정)

만약 ibsheet7처럼 상태를 보여주는 컬럼을 만들고자 하시는 경우에는 IBSheet-common.js 파일에 IB_Preset.STATUS를 (Col)Extend하시면 됩니다.

var initSheet = {
    Cols:[
        //Status 열처럼 동작하는 열을 만든다.
        {
            Header: "상태",
            Name: "RStatus",
            Extend: IB_Preset.STATUS
        }
    ]
};

참고

Format:{"I":"<img src='../images/added.gif'>","U":"<img src='../images/changed.gif'>","D":"..."}

DelCheck 타입 마이그레이션

열 생성시 OnChange (json event)를 통해 값에 따라 행의 상태를 변경하는 로직을 넣어 줍니다.

IBSheet-common.js 파일에 IB_Preset.DelCheck를 (Col)Extend하시면 됩니다.

var initSheet = {
    Cols:[
        //DelCheck 열 처럼 동작하는 열을 만든다.
        {
            Header:"삭제",
            Name:"DEL",
            Extend: IB_Preset.DelCheck
        }
    ]
};

Combo,ComboEdit 타입 마이그레이션

Combo 타입은 Enum타입으로 변경되었고, ComboText, ComboCode는 각각 Enum (col), EnumKeys (col) 속성으로 변경되었습니다.

//AS-IS
{Header:"직급", Type:"Combo", SaveName:"Position", ComboText:"사원|대리|과장|차장|부장", ComboCode:"A0|A1|B0|B1|B3"}
//TO-BE (Enum,EnumKeys속성의 첫번째 글자가 구분자로 사용됨을 주의)
{Header:"직급", Type:"Enum", Name:"Position", Enum:"|사원|대리|과장|차장|부장", EnumKeys:"|A0|A1|B0|B1|B3"}

ComboEditDefaults (col), Format (col), EditFormat (col), Suggest (col) 속성을 사용하여 유사하게 동작하는 열을 만드실 수 있습니다.

//AS-IS
{Header:"직급", Type:"ComboEdit", SaveName:"Position", ComboText:"사원|대리|과장|차장|부장|이사|상무|사장", ComboCode:"A0|A1|B0|B1|B3|C0|C1|C2"}
//TO-BE
var comboText = "사원|대리|과장|차장|부장|이사|상무|사장";
var comboCode = "A0|A1|B0|B1|B3|C0|C1|C2";

{
    Header:"직급", Type:"Text", Name:"Position",
    Button: "Defaults",
    // 화면에 표시될 셀 값의 Format 형태를 설정. 값이 A0면 "사원"이 화면에 표시
    Format: {
        "A0": "사원",
        "A1": "대리",
        "B0": "과장",
        "B1": "차장",
        "B3": "부장",
        "C0": "이사",
        "C1": "상무",
        "C2": "사장"
    },
    // 셀 편집시 화면에 표시될 Format 형태를 설정
    EditFormat: {
        "A0": "사원",
        "A1": "대리",
        "B0": "과장",
        "B1": "차장",
        "B3": "부장",
        "C0": "이사",
        "C1": "상무",
        "C2": "사장"
    },
    Suggest:"|"+comboText,  // 입력시 아이템 필터링
    Defaults: "|"+comboCode // 셀 선택시 기본값
}

위와 같이 설정하면 사용가능합니다. ComboEdit 사용은 onBeforeCreate (static)이벤트에서 공통으로 설정하여 사용하시기 바랍니다.

AcceptKeys,ExceptKeys 마이그레이션

AcceptKeysExceptKeys는 둘다 특정 문자에 대한 입력만 허용하거나 불허하는 기능입니다. IBSheet7에서는 E(영문), N(숫자), K(한글) 와 같은 예약어와 함께 특정 원하는 문자를 다음과 같이 설정하였습니다.

//AS-IS
var Cols = [
    //AcceptKeys 예          영문자,숫자,-(기호)만 허용
    {Type:"Text", Name:"SA_NO", AcceptKeys:"E|N|[-]" },

    //ExceptKeys 예          영문자와 !,@,# 는 입력 불가
    {Type:"Text", Name:"SA_PRT", ExceptKeys:"E|[!@#]" }
];
///TO-BE
opt.Cols = [
    //AcceptKeys 대신 EditMask를 이용하여 영문자,숫자,-(기호)만 허용
    {Type:"Text", Name:"SA_NO", EditMask:"^[a-zA-Z|\\d|\\-]*$" },

    //ExceptKeys 대신 EditMask를 이용하여 영문자와 !,@,# 는 입력 불가
    {Type:"Text", Name:"SA_PRT", EditMask:"^[^a-zA-Z|^!|^@|^#]*$" }
];

정규식에 익숙하지 않다면 onBeforeCreate (static)에서 공통로직을 통해 기존에 설정한 AcceptKeys, ExceptKeys를 자동으로 EditMask (col)로 변환하게 할 수도 있습니다.

아래 로직을 참고해 주세요.

//시트 생성 직전에 발생하는 이벤트(IBSheet.create함수에 넣은 인자가 opt안에 모두 들어있음.)
IBSheet.onBeforeCreate = function(opt){
    var acceptExceptKeysMig = function(Cols){

        for(var i = 0; i < Cols.length; i++) {
            var c = Cols[i];

            //EditMask를 통해 AcceptKeys를 유사하게 구현한다.
            if (c["AcceptKeys"]) {

                var setV = c["AcceptKeys"];
                var acceptKeyArr = setV.split("|");
                var mask = "";

                for (var i = 0; i < acceptKeyArr.length; i++) {
                    switch (acceptKeyArr[i]) {
                    case "E":
                        mask += "|a-zA-Z";
                        break;
                    case "N":
                        mask += "|\\d";
                        break;
                    case "K":
                        mask += "|\\u3131-\\u314e\\u314f-\\u3163\\uac00-\\ud7a3";
                        break;
                    default:
                        if (acceptKeyArr[i].substring(0, 1) == "[" && acceptKeyArr[i].substring(acceptKeyArr[i].length-1) == "]") {
                            var otherKeys = acceptKeyArr[i].substring(1, acceptKeyArr[i].length-1);
                            for (var x = 0; x < otherKeys.length; x++) {
                                if ([".","-","$","^","*","+","|","(",")"].indexOf(otherKeys[x]) > -1) {
                                    mask += "|\\" + otherKeys[x];
                                } else {
                                    mask += "|" + otherKeys[x];
                                }
                            }
                        }
                        break;
                    }
                }
                c.EditMask = "^[" + mask.substring(1) + "]*$";

            //EditMask를 통해 ExceptKeys를 유사하게 구현한다.
            } else if(c["ExceptKeys"]) {

                var setV = c["ExceptKeys"];
                var acceptKeyArr = setV.split("|");
                var mask = "";

                for (var i = 0; i < acceptKeyArr.length; i++) {
                    switch (acceptKeyArr[i]) {
                    case "E":
                        mask += "|^a-zA-Z";
                        break;
                    case "N":
                        mask += "|^\\d";
                        break;
                    case "K":
                        mask += "|^\\u3131-\\u314e\\u314f-\\u3163\\uac00-\\ud7a3";
                        break;
                    default:
                        if (acceptKeyArr[i].substring(0, 1) == "[" && acceptKeyArr[i].substring(acceptKeyArr[i].length-1) == "]") {
                            var otherKeys = acceptKeyArr[i].substring(1, acceptKeyArr[i].length-1);
                            for (var x = 0; x<otherKeys.length; x++) {
                                if ([".","-","$","^","*","+","|","(",")"].indexOf(otherKeys[x]) > -1) {
                                    mask += "|^\\" + otherKeys[x];
                                } else {
                                    mask += "|^" + otherKeys[x];
                                }
                            }
                        }
                        break;
                    }
                }
                c.EditMask = "^[" + mask.substring(1) + "]*$";
            }
        }
    }

    acceptExceptKeysMig(opt.options.Cols);
    if(opt.options.LeftCols) acceptExceptKeysMig(opt.options.LeftCols);
    if(opt.options.RightCols) acceptExceptKeysMig(opt.options.RightCols);

    //반드시 수정된 opt를 리턴해야 시트가 만들어짐.
    return opt;
}

MaximumValue,MinimumValue 마이그레이션

IBSheet.onBeforeCreate 이벤트에서 onEndEdit 이벤트를 공통 정의 함으로써 구현 가능합니다.

아래 내용을 참고해 주세요.

  1. ibsheet-common.js 에 onBeforeCreate 이벤트를 다음과 같이 정의 합니다.
_IBSheet.onBeforeCreate = function(init) {
    //event 공통 정의
    init.options.Events = init.options.Events || {};
    
    // 개별 화면에서 선언한 onEndEdit가 있는 경우, orgEndEdit에 저장
    if(typeof init.options.Events.onEndEdit != "undefined") {
      init.options.Events.orgEndEdit = init.options.Events.onEndEdit;
    }

    // onEndEdit 이벤트 공통 정의
    init.options.Events.onEndEdit = function(evt) {
      // 컬럼에 MinimumValue 가 정의 돈 경우
      if (typeof evt.sheet.Cols[evt.col].MinimumValue != "undefined") {
        if (evt.sheet.Cols[evt.col].MinimumValue > Number(evt.raw)) {
          alert(
            "입력 가능한 최소값은" +
              evt.sheet.Cols[evt.col].MinimumValue +
              "입니다."
          );
          // 편집창을 빠져나가지 못하게 함
          return true;
        }
      }

      // 컬럼에 MaximumValue가  정의 된 경우
      if (typeof evt.sheet.Cols[evt.col].MaximumValue != "undefined") {
        if (evt.sheet.Cols[evt.col].MaximumValue < Number(evt.raw)) {
          alert(
            "입력 가능한 최대값은" +
              evt.sheet.Cols[evt.col].MaximumValue +
              "입니다."
          );
          return true;
        }
      }

      // 개별화면에서 정의한 onEndEidt가 있는 경우
      if(typeof init.options.Events.orgEndEdit != "undefined") {
        return init.options.Events.orgEndEdit(evt)
      }
    }
    return init;
  }
  1. 시트 생성시 IBSheet7 제품과 동일하게 MaximumValue, MinimumValue를 정의하여 사용합니다.
const initSheet = {
    Cols:[
        {Header:"이익", Type: "Int", Name:"income", MinimumValue:1000 }, // 값은 1000 이상 입력 가능
        {Header:"손해", Type: "Int", Name:"loss", MaximumValue:0 }  // 값은 0 이하 입력 가능
        ...
    ]
}
IBSheet.create({
    id: "mySheet",
    el: "sheetDIV",
    options: initSheet
})