기초 개발자 교육 (appendix)

목차

1. 제품 파일 구성
2. 기본 시트 생성 방법
3. Formula 기능
4. 공통 기능 정의 (Def 와 ibsheet-common.js)
5. 시트 구조 이해
6. 함수와 이벤트
7. 데이터 조회
8. 데이터 추출과 저장
9. 렌더링
10. 파일 export/import 기능 사용
11. 컨텍스트 메뉴 기능
12. 커스텀 다이얼로그 기능 사용
13. FAQ

1. 제품 파일 구성

IBSheet8 기본 파일 구성에 대해 설명하고(참고), plugins 파일 3개의 역할을 설명합니다.

2. 기본 시트 생성 방법

간단하게 javascript를 이용하여 시트 객체를 생성하는 방법을 설명합니다.(참고)

대소문자 주의: IBSheet의 모든 설정은 대소문자를 구분합니다.
Cfg, Cols, Cell의 속성명과 함수명, 이벤트명, Type이나 Enum 같은 값 모두 문서에 적힌 대소문자를 그대로 사용해야 합니다.
예를 들어 Name을 name으로, SearchMode를 searchmode로, Type: "Date"를 "date"로 쓰면 동작하지 않습니다.

var OPT = {
	Cfg:{
		SearchMode:0,
		Alternate:2, 
		HeaderMerge:3,

	},
	LeftCols:[
		{ Header: "No", Name: "SEQ", Type: "Text", Width:40, Align:"Center"},
	],
	Cols:[
		{ Header: "이름", Name: "sa_nm", Type: "Text", Width:80},
		{ Header: "성별", Name: "sa_gender", Type: "Enum", Enum:"|남|여",EnumKeys:"|M|F", MinWidth:50},
		{ Header: "사원번호", Name: "sa_id", Type: "Text", Align: "center", Width:70,Size:6,EditMask:"^\\d*$"},
		{ Header: "부서", Name: "sa_dept", Type: "Enum", Enum: "|경영지원|총무|인사|설계|시공1|시공2", EnumKeys: "|01|02|03|04|05|06",Width:80 },
		{ Header: "직급", Name: "sa_position", MinWidth:60, MaxWidth:60, Type: "Enum", Enum: "|대표|상무|이사|부장|차장|과장|대리|사원", EnumKeys: "|A1|A2|A3|B0|B1|C4|C5|C6"},
		{ Header: "입사일",	Name: "sa_enterdate", Type: "Date", Width:100, Format: "yyyy/MM/dd", DataFormat:"yyyyMMdd", EditFormat:"yyyy-MM-dd"},
		{ Header: "급여", Name: "sa_salary", Type: "Int", Width:80},
		{ Header: "퇴직여부", Name: "sa_retire", Type: "Radio", Enum:"|퇴직|재직", EnumKeys:"|Y|N",Align:"center",MinWidth:125},
		{ Header: "비고", Name: "sa_desc", Type: "Lines", RelWidth:1 }
	],
	Events:{
		//시트가 최초 생성되어 렌더링이 끝나면 1회 발생 (이 시점부터 시트 사용 가능)
		onRenderFirstFinish:function(evtParam){
			var sheet = evtParam.sheet;
			//예: 생성 직후 데이터 조회 등 후처리
			//sheet.doSearch("/search.do");
		}
	}
};

IBSheet.create({
	id:"sheet",     //생성하는 시트 이름
	el:"sheetDiv",  //시트가 생성될 div 객체 id
	options:OPT     //ibsheet 기본 설정
});

onRenderFirstFinish는 create()로 만든 시트가 화면에 처음 그려진 직후 한 번 발생하는 이벤트입니다.
create()는 비동기로 동작해서 호출한 직후에는 시트가 아직 준비되지 않았을 수 있으므로, 데이터 조회나 값 변경 같은 시트 조작은 이 이벤트 안에서 처리하면 안전합니다.

알아두면 좋은 Cfg 속성

알아두면 좋은 Cols 속성

컬럼 Type에 따라 함께 지정하는 속성이 있습니다.
(예: Enum은 Enum, EnumKeys / Date는 DataFormat, Format, EditFormat / Bool은 TrueValue, FalseValue)
종류별 상세는 Type (appendix)를 참고하세요.
이런 속성 묶음을 여러 컬럼에 반복한다면 Extend로 묶어 재사용할 수 있으며,
프로젝트 공통 프리셋(IB_Preset)은 ibsheet-common.js에 정의합니다.

3. Formula 기능

Formula는 다른 셀이나 컬럼의 값을 이용해 셀의 값이나 속성을 자동으로 계산하는 기능입니다.
이름은 모두 'Formula' 계열이지만 용도에 따라 설정하는 속성이 다릅니다.
합계 행은 FormulaRow, 컬럼 간 연산은 Formula, 셀 속성(글자색, 편집 가능 여부 등) 변경은 속성명Formula(예: TextColorFormula)를 사용합니다.

1) 합계 행 생성

컬럼 생성시 FormulaRow를 통해 하단에 합계행을 생성할 수 있습니다.
합계행에는 일반적인 컬럼의 합계 값 외에 평균이나 건수 등의 계산값도 표시할 수 있습니다.

options.Cols = [
    { Name: "qt",  Type: "Int", FormulaRow: "Sum" },           //합계
    { Name: "amt", Type: "Int", FormulaRow: "합계 {Sum} 원" }  // {Sum} 자리에 합계값이 채워져 "합계 12,345 원"처럼 표시
];

2) 컬럼 간의 연산

컬럼과 컬럼 간의 계산 결과를 표시하기 위한 Formula기능을 제공합니다.
Formula속성이 설정된 컬럼은 사용자의 편집이 불가하고 자동 계산된 값을 표시합니다.
자세한 내용은 Formula를 참고해 주세요.

options.Def = { Row: { CanFormula: 1, CalcOrder: "amt" } };   //CanFormula 필수, CalcOrder에 계산 순서(컬럼명) 지정
options.Cols = [
    { Name: "qt",    Type: "Int" },
    { Name: "price", Type: "Int" },
    { Name: "amt",   Type: "Int", Formula: "qt * price" }   //자동 계산 (편집 불가)
];

3) 속성에 대한 변경

컬럼이나 행의 속성을 계산식으로 변경하는 Attribute+Formula 기능을 제공합니다.

//amt 값이 1000 초과면 글자색을 빨강으로
options.Def = { Row: { CanFormula: 1, CalcOrder: "amtTextColor" } };
options.Cols = [
    { Name: "amt", Type: "Int", TextColorFormula: "Value > 1000 ? '#FF0000' : '#000000'" }
];

Formula나 Attribute+Formula 기능을 사용하는 경우에는 반드시 CanFormula, CalcOrder 속성이 Def.Row에 설정되어야 합니다.

Formula 계열(합계 행, 컬럼 간 연산, 속성 변경)의 자세한 규칙과 col, row, cell 예제는 Formula (appendix)를 참고하세요.

4. 공통 기능 정의 (Def 와 ibsheet-common.js)

1) Def 의 역할

시트 내에 모든 행이나 열에 공통 기능을 설정할 수 있습니다.
options.Def.Col을 통해 특정 속성을 모든 열에 설정해도, options.Cols를 통해 개별 열에 동일한 속성이 설정된 경우 개별 열에 설정된 값이 우선됩니다.

2) CommonOptions 속성과 onBeforeCreate 함수 사용

시스템 내에 모든 시트에 공통 기능을 설정할 수 있습니다.
CommonOptions를 통해 설정된 값보다 개별 시트에서 설정한 값이 우선되고, 이보다 onBeforeCreate 함수를 통해 설정된 값이 가장 우선됩니다.
IBSheet.CommonOptions 는 ibsheet-common.js 에 정의되어 있습니다.

3) IB_Preset 과 Extend

열에 설정되는 여러 가지 속성을 변수에 담아두었다가, Extend 속성으로 동일한 기능을 하는 열을 손쉽게 생성할 수 있습니다.
IB_Preset 변수는 ibsheet-common.js 파일에 정의되어 있습니다.

5. 시트 구조 이해

IBSheet 각 구조 (헤더, 헤드, 바디, 풋)에 대해 이해하고, 행/열 객체에 대해 설명합니다.

시트는 아래 영역으로 구성됩니다.

1) 헤더행

가. 여러 개 헤더행 만들기, 배경색, 글자색, 내용 변경하기

시트에 여러 개의 헤더행을 생성할 수 있습니다.
헤더행은 생성 후에도 타이틀을 변경하거나, 속성(글자색, 배경색 등)을 변경할 수 있습니다.

┌────────┬──────┬──────┬──────┬─────────────────┬─────────────┐
│        │      │ 신청  │ 신청 │     근태기간      │   시간      │ 
│ 신청인  │ 선택  │ 사유 │ 금액  ├────────┬────────┼──────┬──────┤
│        │      │      │      │ 시작일  │ 종료일  │ 시작  │ 종료 │
└────────┴──────┴──────┴──────┴────────┴────────┴──────┴──────┘

위와 같은 구조의 두 줄 헤더행을 생성 시 로직

//시트 생성부
options.Cols = [
	{ Header : ["신청인", "신청인"], Type : "Text", Name : "userName"},  
	{ Header : ["선택", "선택"], Type : "Bool", Name: "CHK"}, 
	{ Header : ["신청\n사유", "신청\n사유"], Type : "Text", Name : "reason"},  
	{ Header : ["신청\n금액", "신청\n금액"], Type : "Int", Name : "amtReq"},  
	{ Header : ["근태기간", "시작일"], Type : "Date", Name : "startWD"},  
	{ Header : ["근태기간", "종료일"], Type : "Date", Name : "endWD"},  
	{ Header : ["시간", "시작"], Type : "Date", Name : "startHm", Format: "HH:mm"},  
	{ Header : ["시간", "종료"], Type : "Date", Name : "endHm", Format: "HH:mm"}  
];

나. 헤더행에 디자인 속성(배경색, 글자색 등) 적용하기

Header를 object 형태({Value, ...})로 지정하면 헤더 셀에 글자색(TextColor), 배경색(Color), 굵게(TextStyle), 아이콘(HtmlPrefix) 등 Cell 속성을 적용할 수 있습니다. 자세한 예시와 규칙(컬럼별 배열 길이 동일 등)은 (col)Header를 참고하세요.

다. 생성된 헤더행 수정하기

생성된 헤더행에 접근하여 값이나 속성을 변경할 때는 id를 통해 헤더행에 접근해야 합니다.
첫번째 헤더행의 id는 Header이고, 2번째 헤더행부터는 HR1, HR2, HR3 … 식으로 id를 갖습니다.

	const firstHeaderRow = sheet.getRowById("Header"); //첫번째 헤더행을 얻는다.

	//생성 후 헤더 내용/속성 변경하기
	sheet.setValue(firstHeaderRow, "userName", "신청자", 1); //첫번째 헤더행 내용 변경
	sheet.setAttribute({row:sheet.getRowById("HR1"), attr:"Color", val:"#FFED37"}); //두번째 헤더행 배경색 변경

---

2) 헤드,풋 추가해 보기

헤더와 데이터 영역 사이나 데이터행 하단에 고정된 행을 설정할 수 있습니다. 자세한 내용은 Head/Foot을 참고하세요.

var OPT = {
	//상단 고정행
	Head : [
		{
			id:"HEAD1",Kind:"Head",CanEdit:0,
			sa_salary:"",sa_salaryType:"Text",sa_retire:"퇴직자만 보기",sa_retireType:"Text",sa_descType:"Bool",sa_descAlign:"left",sa_descCanEdit:1,
			sa_descOnChange:function(evt){
				if(evt.row[evt.col]){
					evt.sheet.setFilter({name:"myFilter",filter:"sa_retire=='Y'?1:0",render:1});
				}else{
					evt.sheet.clearFilter();
				}
			}
		}
	],
	//하단 고정행
	Foot : [
		{id:"FOOT1",Kind:"Foot",sa_desc:"2019년 자료",CanEdit:0,Color:"#FFDDEE"}
	]
}

3) solid 행

행객체의 한 종류로, 시트의 위치와 무관하게 독립적으로 동작하는 행입니다.
설정 방법과 예약된 기능은 solid를 참고해 주세요.

4) 행 객체에 대한 접근 및 값 확인(참고)

시트 내에 모든 행은 id를 갖고 있고, 이 id를 통해 접근할 수 있습니다.
첫번째 헤더행의 id는 Header이고 두번째 이후부터는 HR1, HR2… 식으로 자동 부여됩니다.
데이터 행의 id는 생성 순서대로 AR1, AR2, AR3… 식으로 자동 부여됩니다.
이외에 필터행은 Filter, 합계행은 FormulaRow 등의 이름을 갖고 있습니다.
Head, Foot, Solid 등의 행을 만들 때는 직접 id를 지정하실 수 있습니다.

행 객체는 아래처럼 여러 방법으로 얻을 수 있고, 얻은 행으로 값이나 속성을 확인하거나 수정합니다.

/* 행 객체 얻기 (여러 방법) */
var firstRow  = sheet.getFirstRow();            // 첫번째 데이터 행
var focusRow  = sheet.getFocusedRow();          // 포커스 행
var nextRow   = sheet.getNextRow(focusRow);     // 포커스 행의 아래 행
var prevRow   = sheet.getPrevRow(focusRow);     // 포커스 행의 위 행
var row10     = sheet.getRowByIndex(10);        // 10번째 데이터 행
var sumRow    = sheet.getRowById("FormulaRow"); // 합계행
var filterRow = sheet.getRowById("Filter");     // 필터행 (필터행이 있을 때)
var dataRows  = sheet.getDataRows();            // 전체 데이터 행
var shownRows = sheet.getShownRows();           // 현재 보여지는 행

/* 얻은 행의 값과 속성 확인 및 수정 */
var canEdit = sheet.getRowById("AR2").CanEdit;              // 행 객체 속성 직접 접근
sheet.setAttribute(focusRow, null, "Color", "#FF0000", 0); // 행 배경색 변경 (render:0)

5) 열 속성 변경(참고)

시트 생성 시 Cols 속성을 통해 설정되는 컬럼에는 반드시 Name과 Type을 지정해 주셔야 합니다.
시트가 생성된 이후에는 각 컬럼에 부여한 Name을 기준으로 컬럼의 속성을 확인하거나 변경할 수 있습니다.

다음과 같은 Name은 예약어로 사용에 주의가 필요합니다. (대/소문자 유의)

//모든 컬럼명 얻기
var cols = sheet.getCols();

//컬럼 속성 확인
var color = sheet.getAttribute(null, "saID", "Color");

//컬럼 속성 변경
sheet.setAttribute({col:"AMT_12",attr:"CanEdit",val:0});

6. 함수와 이벤트

IBSheet 함수와 이벤트에 대한 기본적인 사용법을 설명합니다.

1) 기본적인 함수 사용 방법

• 자주 사용되는 함수

2) 이벤트 사용 방법

• 자주 사용되는 이벤트

3) JSON 이벤트 (Properties/Event)

• 특정 행이나 열 혹은 셀에 이벤트 정의(참고)

7. 데이터 조회

1) 조회 / 데이터 로드 함수 이용

시트 내에 데이터 로딩은 SearchMode< /a> 설정에 따라 달라집니다.

유형	함수명	기능설명
기본 조회	doSearch	지정한 URL을 호출하여 리턴된 json을 시트에 로딩합니다. (SearchMode 0, 1, 2)
페이징 조회	doSearchPaging	페이징 조회(cfg:{SearchMode:3, 4, 5}) 사용시 지속적으로 호출할 서버 URL을 설정합니다.
데이터 로드	loadSearchData	json 데이터(string혹은 object)를 시트에 로딩합니다. (SearchMode 0, 1, 2)

위 함수는 모두 비동기 형식입니다.

2) 관련 이벤트

조회/데이터 로딩 과정에서 다음과 같은 이벤트가 발생합니다. (중간에 렌더링 이벤트는 제외)

순서	이벤트명	기능설명
1	onSearchStart	조회 함수로 데이터 조회가 시작되기 전에 발생합니다. 1(true)을 리턴하면 조회가 취소됩니다.
2	onReceiveData	데이터 파싱 직전에 발생합니다. 로드 될 데이터를 조작할 수 있습니다.
3	onBeforeDataLoad	json 데이터 파싱 후 발생합니다. 파싱된 json 데이터를 조작할 수 있습니다.
4	onDataLoad	화면에 렌더링 전에 발생합니다.
5	onSearchFinish	데이터에 대한 렌더링이 끝나고, 모든 조회 절차가 끝난 후에 발생합니다.

3) 데이터 구조

조회 데이터 구조 참고

//일반적인 조회 데이터 구조
{"data":[
	{"colName1":"1234", "colName2":"abcd","colName3":"가나다라"},
	{"colName1":"1234", "colName2":"abcd","colName3":"가나다라"},
	....
]}

8. 데이터 추출과 저장

시트에서 값을 수정하거나 행을 추가하거나 삭제하면 각 행에 상태(Status) 가 부여됩니다.
저장 함수(doSave/getSaveJson/getSaveString)는 이 상태를 데이터와 함께 서버로 전송해, 서버가 입력/수정/삭제를 구분할 수 있게 합니다.

저장 함수를 호출하면 각 행에 이 상태가 기본 키 STATUS로 함께 전송됩니다(예: {"STATUS":"Added", "컬럼명":"값", ...}).

시트는 이 상태에 따라 행에 배경색을 자동으로 표시합니다. 표시 여부/범위는 ColorState 설정으로 제어하며, 기본값(63)에서 켜져 있습니다.

행 상태를 직접 확인하려면 getRowStatus, 상태별로 행을 추출하려면 getRowsByStatus를 사용합니다.

1) 데이터 추출과 저장 함수

다음 함수로 시트의 변경 내용을 추출하거나 서버에 저장합니다.

doSave는 내부적으로 데이터 취합(getSaveString 또는 getSaveJson), ajax 전송, 상태 클리어를 순차적으로 수행합니다.

2) 행,셀안에 데이터 수정 정보 확인

• 수정된 행 객체를 얻음
  getRowsByStatus()함수를 수정,삭제,입력 에 따라 필요한 행 객체를 추출할 수 있습니다.

• 수정된 값이 1개라도 존재하는지 여부 확인
  hasChangedData()함수를 통해 true/false로 판별할 수 있습니다.

• 특정 행의 수정여부를 확인

var row = sheet.getRowByIndex(55);
if(sheet.getAttribute(row, null, "Changed")){
	//해당 행은 수정된 내용이 있음.
}
if(sheet.getAttribute(row, null, "Added")){
	//신규로 추가된 행임.
}
if(sheet.getAttribute(row, null, "Deleted")){
	//삭제 예정행임
}

Changed/Added/Deleted는 셋 중 하나만 켜지는 게 아니라, 한 행에 여러 개가 동시에 켜질 수 있습니다(예: 조회된 행을 수정 후 삭제하면 Changed와 Deleted가 모두 1).
특정 상태의 행만 모으려면 getRowsByStatus를 사용하세요.

• 특정 셀의 수정 여부 및 수정 전 값을 확인
  셀의 수정 전(최초 로딩) 값은 Orig 속성으로 확인합니다.

var row = sheet.getFocusedRow();
//Name이 AMT인 컬럼의 수정 여부와 수정 전 값을 getAttribute로 확인
if(sheet.getAttribute(row, "AMT", "Changed")){//수정됨.
	//수정 전 값 확인
	var oldValue = sheet.getAttribute(row, "AMT", "Orig");
}

3) 저장 관련 이벤트

4) 데이터 구조

저장 후 서버가 돌려주는 리턴 json 형식입니다. (참고)

{
	"IO":{
		"Result":1, "Message":"저장되었습니다."
	}
}

서버 응답을 직접 처리하는 경우, 이 리턴 결과를 applySaveResult 또는 acceptChangedData로 시트에 반영합니다.
(Deleted 행은 삭제하고, Added/Changed는 상태를 클리어합니다.)

9. 렌더링

1) 시트 내 값 변경과 렌더링

시트 내에 값을 변경하거나 색상을 변경하는 등 화면에 변화를 일으키는 경우 렌더링 타이밍에 주의하여야 합니다.

//여러번 렌더링이 일어나는 로직
var drows = sheet.getDataRows();
for(var i=0;i<drows.length;i++){
	sheet.setValue(drows[i], "DWT" , "사용불가");
	sheet.setAttribute( {row:drows[i],attr:"Color",val:"#FF0000"});
}

//단 한번만 렌더링이 일어나는 로직
var drows = sheet.getDataRows();
for(var i=0;i<drows.length;i++){
	//setValue나 setAttribute에 render인자값을 0으로 설정(값의 수정이 있어도 화면에 반영되지 않음)
	sheet.setValue(drows[i], "DWT" , "사용불가" , 0 );
	sheet.setAttribute( {row:drows[i],attr:"Color",val:"#FF0000",render:0});
}
//최종 변경된 내용이 화면에 표시됨.
sheet.rerender();

다양한 렌더링 함수 참고

10. 파일 export/import 기능 사용

파일을 export하거나 import하는 방법은 크게 서버에서 수행하는 방법과 클라이언트에서 수행하는 방법으로 나누어집니다.

서버에서 export/import 하는 방법

서버에서 파일에 대한 export/import 작업을 위해서는 사전 작업이 필요합니다.
엑셀 업로드/다운로드 설정하기 부분을 참고하시기 바랍니다.

• 엑셀 다운로드/업로드 기능
  down2Excel(), loadExcel() 함수를 통해 데이터 다운로드, 업로드를 하실 수 있습니다.

• 텍스트 다운로드/업로드 기능
  down2Text(), loadText() 함수를 통해 데이터 다운로드, 업로드를 하실 수 있습니다.

클라이언트에서 export/import 하는 방법

javascript를 이용하여 export/import 작업을 위해서는 아래와 같은 작업이 필요합니다.

1) jszip.min.js 파일 추가하기

/plugins/jszip.min.js 파일을 추가합니다.

2) 다음 함수를 통해 import/export 기능 수행

• 엑셀, text 다운로드 기능
  exportData()
• 엑셀, text 업로드 기능
  importData()

11. 컨텍스트 메뉴 기능

마우스 우측 버튼 클릭 시 나타나는 컨텍스트 메뉴를 설명합니다. IBSheet는 기본으로 제공되는 헤더 메뉴와, 직접 항목을 구성하는 커스텀 메뉴를 지원합니다.

1) 기본 제공 헤더 메뉴

ibsheet-common.js가 화면에 포함(로드)되어 있으면, 헤더에서 마우스 우클릭 시 나타나는 컨텍스트 메뉴가 기본 제공됩니다.
기본 항목은 컬럼 표시/숨김, 컬럼 정보 저장/저장 취소, 필터행 생성/감추기 등입니다.
표시 여부는 UseHeaderContextMenu(cfg, 기본값 표시)로 제어하며, 메뉴 구현과 항목은 ibsheet-common.js의 Def.Header.Menu에 정의되어 있어 프로젝트에 맞게 수정할 수 있습니다.

2) 커스텀 메뉴

마우스 우측 버튼 클릭 시 표시되는 컨텍스트 메뉴를 직접 설정할 수도 있습니다.
헤더, 행, 셀, 컬럼 등에 각각 Menu 속성으로 지정할 수 있습니다.
appendix에 menu를 참고해 주세요.

12. 커스텀 다이얼로그 기능 사용

ibsheet-dialog.js 파일을 통해 몇 가지 다이얼로그 기능을 사용하실 수 있습니다.
(아래 기능을 사용하기 위해서는 반드시 ibsheet-dialog.js 파일이 해당 화면에 include되어 있어야 합니다.)

13. FAQ

• 시트에 버튼을 추가하거나 혹은 Click이벤트를 통해 layer형태의 팝업을 띄우는 경우, 팝업 내에 시트나 input element에서 입력을 해도 계속 팝업을 띄운 시트에서 입력이 이루어지는 문제.
  시트를 클릭하여 팝업을 띄우는 경우, 시트는 아직까지 포커스를 자신이 갖고 있다고 판단하기 때문에 발생하는 문제입니다.
  팝업을 띄울 때, blur()함수를 호출하여 더 이상 시트가 포커스를 잡지 않게 해야 합니다.

• 조회 직후 시트가 포커스를 가져가지 않게 하는 방법.
  시트는 데이터를 로딩 후 첫 번째 행, 첫 번째 열에 포커스를 갖게 됩니다.
  만약 조회 후 포커스를 가져가지 않게 하려면 (cfg)IgnoreFocused 속성을 1로 설정하시면 됩니다.

• 컬럼에 Attribute+Formula 선언하니까 다른 Formula까지 동작하지 않는 문제
  Formula만 사용할 때 계산 순서를 결정하는 CalcOrder를 설정하지 않으면 컬럼명의 알파벳 순으로 자동 계산을 합니다. 하지만 Attribute+Formula가 사용되면 Attribute+Formula와 일반 Formula에 대한 연산 순서를 모두 CalcOrder에 정의하여야만 정상 작동하게 됩니다.

• 시트 생성 후 조회를 했는데 오류가 나거나 조회가 간헐적으로 안 되는 문제
  시트 생성 이전에 조회 함수를 호출하여 발생하는 경우가 많습니다. 시트 생성이 비동기 형태이기 때문에 IBSheet.create()함수 호출 이후에 조회 함수를 호출하게 되면 이러한 문제가 발생할 수 있습니다.
  문제를 해결하기 위해서는 생성 후 발생 이벤트인 onRenderFirstFinish에서 조회 함수를 호출하여야 합니다.

• 시트를 제거하거나 시트를 다시 생성하는 방법
  화면 내에 모든 시트를 제거하려면 IBSheet.disposeAll()함수를 호출하면 됩니다. 단일 시트를 제거할 때는 sheet.dispose()함수를 통해 제거할 수 있습니다.
  이렇게 제거된 시트를 다시 생성하는 것은 일반적인 시트를 생성하는 것과 동일하게 IBSheet.create()함수를 사용하시면 됩니다.

Read More

• 파일 구성 introduction
• Quick Start getting started
• 시트 객체 기본 구조 getting started
• SearchMode cfg
• Extend col
• method 사용법 기초 method
• doSearch method
• doSearchPaging method
• down2Excel method
• down2Text method
• getSaveString method
• getSaveJson method
• getChangedData method
• loadSearchData method
• loadExcel method
• loadText method
• rerender method
• renderBody method
• refreshRow method
• refreshCell method
• showDownloadDialog method
• showEditDialog method
• showFindDialog method
• showPivotDialog method
• showUploadDialog method
• event 사용법 기초 event
• onReceiveData event
• onBeforeDataLoad event
• onDataLoad event
• onSearchFinish event
• onSave event
• onBeforeSave event
• onAfterSave event
• static 객체 란 static
• onBeforeCreate static
• CommonOptions static
• Solid appendix
• Menu appendix

Since