| 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.js와 ibsheetinfo.js 였습니다.
이 두 개 파일만 추가하면 나머지 파일들(ibmsg, ibsheet.cfg, ibsheet.css)은 ajax통신을 통해 자동으로 화면에 로딩 되었었습니다.
IBSheet8에서는 기존에 ibmsg나 ibsheet.cfg와 같이 확장자가 없거나, cfg와 같이 개별적인 확장자를 갖는 파일은 모두 js형태로 변경되었고 각 파일은 직접 화면에 include하는 형태로 변경되었습니다.
따라서 IBSheet8로 마이그레이션 시에는 다음과 같은 파일들이 추가되어야 합니다.
ibsheet.js (IBSheet8 코어)/locale/ko.js (혹은 en.js) (다국어 메세지 파일)/css/default/main.css (기본디자인 css)ibsheet-common.js (공통기능 설정)ibsheet-dialog.js (각종 다이얼로그 사용)ibsheet-excel.js (엑셀,텍스트 다운로드/업로드)// 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 이상의 브라우저에서 정상적으로 보여집니다.
IBSheet7의 객체 생성 단계는 다음과 같습니다.
createIBSheet(혹은 createIBSheet2)함수를 이용하여 기본 시트 객체 생성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명 | 변경내용 |
|---|---|
| Text | 일반 문자형 타입으로 동일. 단 MultiLineText(여러개행)속성 사용시에는 Lines타입이 별도 제공됩니다. |
| Status | 지원안함Status타입 열의 유무와 상관없이 시트 내에 변경사항에 대한 관리가 자동으로 이루집니다.일반적으로 수정된 행은 노란색( .IBColorChanged),입력은 파란색(.IBColorAdded),삭제는 붉은색(.IBColorDeleted) 배경색으로 변경되어 표시 됩니다.서버로 전송되는 행 상태에 대한 값은 기본적으로 'STATUS' 로 전송되며 이름을 변경하고 싶은 경우에는 Cfg에서 ReqStatusName 속성으로 변경할수 있습니다.기존에 I, U, D로 서버로 전송되던 값은 Added, Changed, Deleted 로 전송됩니다.이를 기존과 동일한 I, U, D로 변경하시려면 ko.js(메세지파일)에서 ReqStatusAdded,ReqStatusChanged,ReqStatusDeleted를 I, 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 | 지원안함 |
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) |
| BackColor | Color (col)로 속성명 변경. 사용법은 동일합니다. |
| CalcLogic | Formula (col)속성으로 변경되고 기능이 확장되었습니다. 자세한 내용은 Formula (appendix)를 참고해 주세요. |
| ComboCode,ComboText | 위에 Combo, ComboEdit 타입에 대한 마이그레이션에서 언급한 것과 같이 Enum (col), EnumKeys (col)로 변경되었습니다.마이그레이션시 IBSheet8에서는 첫번째 글자를 구분자로 사용하는 것을 주의해 주세요. |
| Edit,EditLen | Edit는 CanEdit (col)로 EditLen은 Size (col)로 변경되었습니다. |
| FontColor | TextColor (col)로 속성명 변경. 사용법은 동일합니다. |
| Hidden | Visible (col)로 변경되었습니다. 따라서 값도 기존과 반대로 입력되어야 합니다.(Hidden (col)속성은 실제 행의 높이 혹은 열의 너비만 줄여서 표시합니다.) |
| UpdateEdit | 지원안함 필요시 Attribute+Formula를 통해서 구현해야 합니다. ex) opt.Cols = [{Name:"열이름", CanEditFormula:"Row.Added==1?1:0"}]; Attribute+Formula를 사용시에는 반드시 CalcOrder (row):'열이름CanEdit' 도 설정해 주셔야 합니다. |
| KeyField | Required (col)로 속성명 변경. 사용법은 동일합니다. |
| SaveName | Name (col)으로 속성명 변경. 특히 Name은 필수요소로 모든 열에는 반드시 Name속성이 있어야 합니다. 또한 한 시트 내에 동일한 Name을 갖는 열이 2개 이상 있어도 안됩니다. |
| Sort | CanSort (col)로 속성명 변경. 사용법은 동일합니다. |
| ToolTip | Tip (col)으로 속성명 변경. 사용법은 동일합니다. |
| TreeCol | 지원안함 트리기능 사용시 MainCol cfg속성을 통해 트리가 될 열을 지정하셔야 합니다. |
| Width | 기존과 동일합니다. 그리고 MinWidth (col), MaxWidth (col), RelWidth (col)를 통해 열 너비의 최소,최대 크기나 상대적 크기를 설정하실 수 있습니다. |
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타입에서만 발생하는 이벤트는 없고,해당 이벤트는 모든 타입의 열에서 발생합니다. |
| 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) | 단일 이벤트에서 공통처리 |
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.Header에 Color (row)속성으로 통해 설정 가능 |
| HeaderCheck | 헤더 체크박스에 대한 체크/언체크 설정 | Checked (cell)속성을 통해 설정 ex) sheet.getAttribute(sheet.Header,"CheckData","Checked"); |
| HeaderFontBold | 헤더 타이틀 font-weight 설정 | 가급적 css 파일에서 설정하는 것을 권장.Def.Header에 TextStyle (row)속성으로 통해 설정 가능 |
| HeaderFontColor | 헤더 타이틀 글자색 설정 | 가급적 css 파일에서 설정하는 것을 권장.Def.Header에 TextColor (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 | createPivotDialog (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 변경 |
//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 (row["TOTAL"] > 100) {
row["TOTALColor"] = "#FF0000";
}
}
//전체 수정된 내용을 화면에 반영
sheet.renderBody();
IBSheet7의 경우 빈번한 렌더링 발생과 값에 대한 핸들링 방식의 차이로 인해 성능을 저해해 왔습니다.
IBSheet8에서는 객체에 대한 직접 접근 및 렌더링 시점 조절을 통해 이러한 작업에 있어서 강점이 있습니다.
실제로 위 예제는 IBSheet7과의 로직 차이를 설명하기 위해 작성된 것으로 IBSheet8에 Formula 기능을 이용하면 보다 간단하고 빠르게 해당 기능을 구현하실 수 있습니다.
Items 속성을 이용한 단계적인 구조 트리 데이터{Data:[
{ID:1,sName:"할아버지",Items:[
{ID:2,sName:"큰아버지"},
{ID:3,sName:"아버지",Items:[
{ID:5,sName:"형"},
{ID:6,sName:"나"}
]},
{ID:4,sName:"작은아버지"}
]}
]}
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) );
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
}
]
};
참고
STATUS 데이터 값이 변경되므로 local/언어.js 파일 안에 문자열("ReqStatusAdded": "Added"(I), "ReqStatusChanged": "Changed"(U), "ReqStatusDeleted": "Deleted"(D), "ReqStatusEmpty": ""®)을 수정해야 합니다.Cfg.ImageStatus 속성처럼 상태를 별도 이미지로 표시하고자 하는 경우에는 Format (col)에서 입력,수정,삭제 대신 해당 이미지를 넣어 주시면 됩니다.Format:{"I":"<img src='../images/added.gif'>","U":"< img src='../images/changed.gif'>","D":"..."}
열 생성시 OnChange (json event)를 통해 값에 따라 행의 상태를 변경하는 로직을 넣어 줍니다.
IBSheet-common.js 파일에 IB_Preset.DelCheck를 (Col)Extend하시면 됩니다.
var initSheet = {
Cols:[
//DelCheck 열 처럼 동작하는 열을 만든다.
{
Header:"삭제",
Name:"DEL",
Extend: IB_Preset.DelCheck
}
]
};
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"}
ComboEdit는 Defaults (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는 둘다 특정 문자에 대한 입력만 허용하거나 불허하는 기능입니다.
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) + "]*$";
}
}
}
appectExceptKeysMig(opt.options.Cols);
if(opt.options.LeftCols) appectExceptKeysMig(opt.options.LeftCols);
if(opt.options.RightCols) appectExceptKeysMig(opt.options.RightCols);
//반드시 수정된 opt를 리턴해야 시트가 만들어짐.
return opt;
}