create (static)

지정한 위치에 시트객체를 생성합니다.
시트객체가 생성되면 IBSheet객체에 배열형식으로 추가(push)됩니다.

• 'el' 객체의 크기에 따라 시트의 너비/높이가 결정됩니다.
• 'el’객체의 너비/높이가 정의되지 않은 경우에는 너비는 100%, 높이는 800px로 설정됩니다.
• sync속성을 1로 사용 시 onRenderFirstFinish 이벤트에서는 window[id] 형식으로 시트에 접근할 수없습니다.(evtParam.sheet로만 접근 가능)

Syntax

object IBSheet.create(id, el, options, data, sync);

Parameters

Return Value

object

Example

var opt = {
        //각 열에 대한 정의 (열의 이름, 유형(Type), 포맷(Format)등을 설정)
        Cols:[
            {Header: {Value: "이름"}, Name: "sa_nm", Type: "Text"},
            {Header: {Value: "사원번호" }, Name: "sa_id", Type: "Text", Align: "center"},
            {Header: {Value: "부서"}, Name: "sa_dept", Type: "Enum",
                Enum: "|경영지원|총무|인사|설계|시공1|시공2", EnumKeys: "|01|02|03|04|05|06"},
            {Header: {Value: "직급"}, Name: "sa_position", Type: "Enum",
                Enum: "|대표|상무|이사|부장|차장|과장|대리|사원", EnumKeys: "|A1|A2|A3|B0|B1|C4|C5|C6"},
            {Header: {Value: "입사일"}, Name: "sa_enterdate", Type: "Date",Width:100, Format: "yyyy/MM/dd"},
            {Header: {Value: "비고"}, Name: "sa_desc", Type: "Lines"}
        ]
    };
var dataArr = [
    {sa_nm: "홍길동", sa_id: "9821450", sa_dept: "04", sa_position: "B0", sa_enterdate: "19980305", sa_desc: ""},
    {sa_nm: "김한국", sa_id: "9510427", sa_dept: "01", sa_position: "A3", sa_enterdate: "19890317", sa_desc: ""}
];

//시트객체 생성
IBSheet.create({
    id: "sheet", // 생성할 시트의 id
    el: "sheetDiv", // 시트를 생성할 Dom 객체 및 id
    options: opt, // 생성될 시트의 속성
    data: dataArr, // 생성될 시트의 정적데이터
    sync: 1 // 동기로 시트 생성( 비동기로 시트 생성)
});

//el에 html element 설정
IBSheet.create({
    "id": "sheet", // 시트객체 이름 (SPA에서는 사용 X)
    "el": document.querySelector("div.part1 .gridarea"), // 시트를 생성할 html element 
    "options": opt, // 초기화 구문
    "data": dataArr//초기 데이터
});

생성 흐름 (라이프사이클)

IBSheet.create()를 호출하면 아래 순서로 시트가 만들어집니다.

1. IBSheet.create() 호출
2. IBSheet.CommonOptions (static)와 호출 시 전달한 options가 머지됨
3. IBSheet.onBeforeCreate (static) 훅이 정의되어 있으면 실행 — 머지된 옵션을 최종 수정 (반드시 수정된 객체를 return)
4. 시트 객체 생성 및 최초 렌더링
5. onRenderFirstFinish (event) 발생 (최초 1회) — 이 시점부터 시트를 사용할 수 있음

생성 과정에서 발생하는 렌더 이벤트 순서는 다음과 같습니다.

onRenderStart와 onRenderFinish는 생성뿐 아니라 조회, 화면 크기 변경(Ctrl + 휠 확대/축소 등), rerender, setTheme, makeSubTotal 등 시트를 다시 그리는 여러 동작에서 발생하는 일반 이벤트입니다. 전체 발생 시점은 onRenderFinish를 참고하세요. 단, renderBody(데이터 영역만 렌더링)로는 발생하지 않습니다. onRenderFirstFinish만 최초 생성 시 1회 발생합니다.

주의 사항

생성 시점 주의: create()는 기본이 비동기(sync: 0)로 동작합니다.
함수가 반환한 직후에는 시트가 아직 완성되지 않았을 수 있으므로, 생성 후 데이터 로드나 시트 조작은 onRenderFirstFinish (event)에서 처리하고, 반드시 동기로 생성해야 한다면 sync 인자를 1로 지정합니다.
create()는 Promise가 아니라 시트 객체를 반환하므로 await IBSheet.create(...)로 감싸도 완료를 기다려 주지 않습니다. async/await 대신 위 방법(onRenderFirstFinish 또는 sync: 1)을 사용하세요.

// 잘못된 예 — await를 붙여도 기다려 주지 않음
async function initSheet() {
  await IBSheet.create({ id: "sheet", el: "sheetDiv", options: OPT });
  sheet.doSearch("/search.do"); // 시트가 아직 준비되지 않아 오류
}

id 중복 주의: id가 중복되면 Can't creation : Duplicate sheet_id already exists 경고가 발생하며 생성되지 않습니다. SPA나 팝업처럼 UNIQ한 id를 지정하기 어려우면, IBSheet.hasSheet로 확인한 뒤 dispose (method) 또는 IBSheet.disposeAll (static)로 제거하고 다시 생성하세요.

파일 로드 주의: ibsheet.js, main.css 등 IBSheet 관련 파일은 한 페이지(DOM)당 1회만 로드합니다. 특히 팝업 화면을 기존 DOM에 append하는 형태라면 팝업 쪽에서 이 파일들을 다시 호출하면 안 됩니다. 재로드하면 전역 IBSheet가 재초기화되어 이미 생성된 시트가 관리 목록(IBSheet 배열)에서 사라집니다.

Read More

• IBSheet.CommonOptions static
• IBSheet.onBeforeCreate static

Since