[01] 개발환경 셋팅하기와 같이 개발환경에 제품 복사 후 특정 페이지에 IBSheet를 생성해보자
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Website</title> </head> <body> <h1>환영합니다!</h1> <p>이것은 기본적인 index.html 파일입니다.</p> </body> </html>
html 코드에서 p 태그 아래에 IBSheet를 그리려면 아래 순서로 코드를 작성해야 한다.
1. IBSheet 제품 import 하기
IBSheet 관련 파일을 import 한다.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Website</title> <!----- ibsheet 기본 모듈 -----> <link rel="stylesheet" type="text/css" href="sheet/css/default/main.css"> <script src="sheet/ibsheet.js"></script> <script src="sheet/ibleaders.js"></script> <script src="sheet/locale/ko.js"></script> <!----- ibsheet 선택 모듈 -----> <script src="sheet/plugins/ibsheet-common.js"></script> <script src="sheet/plugins/ibsheet-excel.js"></script> <script src="sheet/plugins/ibsheet-dialog.js"></script> </head> <body> <h1>환영합니다!</h1> <p>이것은 기본적인 index.html 파일입니다.</p> </body> </html>
각 파일에 대한 설명은 도움말의 파일 구성 부분을 참고 하시기 바랍니다.
2. IBSheet를 그릴 DIV 객체 삽입하기
IBSheet 객체를 삽입하기 위해서는 body태그 사이에 IBSheet를 그릴 div 태그가 반드시 존재해야 한다.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Website</title> <link rel="stylesheet" type="text/css" href="sheet/css/default/main.css"> <script src="sheet/ibsheet.js"></script> <script src="sheet/ibleaders.js"></script> <script src="sheet/locale/ko.js"></script> <script src="sheet/plugins/ibsheet-common.js"></script> <script src="sheet/plugins/ibsheet-excel.js"></script> <script src="sheet/plugins/ibsheet-dialog.js"></script> </head> <body> <h1>환영합니다!</h1> <p>이것은 기본적인 index.html 파일입니다.</p> <!-- 시트가 될 DIV 객체 --> <div id="sheetDiv"></div> </body> </html>
3. IBSheet.create 함수를 이용하여 초기화 하기
브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 시점(sheetDiv가 랜더링이 완료된 시점)에 초기화 구문을 작성하면 된다.
자세한 함수 설명은 도움말(IBSheet.create)을 참고 하시기 바랍니다.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Website</title> <!----- ibsheet 기본 모듈 -----> <link rel="stylesheet" type="text/css" href="sheet/css/default/main.css"> <script src="sheet/ibsheet.js"></script> <script src="sheet/ibleaders.js"></script> <script src="sheet/locale/ko.js"></script> <!----- ibsheet 선택 모듈 -----> <script src="sheet/plugins/ibsheet-excel.js"></script> <script src="sheet/plugins/ibsheet-dialog.js"></script> <script src="sheet/plugins/ibsheet-common.js"></script> <script> document.addEventListener("DOMContentLoaded", () => initIBSheet()); function initIBSheet(){ const opt = { //각 열에 대한 정의 (열의 이름, 유형(Type), 포맷(Format)등을 설정) Cols:[ {Header: "이름", Name: "sa_nm", Type: "Text"}, {Header: "사원번호", Name: "sa_id", Type: "Text", Align: "center"}, {Header: "비고", Name: "sa_desc", Type: "Lines"} ] }; //시트객체 생성 IBSheet.create({ id: "sheet", // 생성할 시트의 id el: "sheetDiv", // 시트를 생성할 Dom 객체 및 id options: opt // 생성될 시트의 속성 }); } </script> </head> <body> <h1>환영합니다!</h1> <p>이것은 기본적인 index.html 파일입니다.</p> <div id="sheetDiv"></div> </body> </html>
[최종화면]
[관련 파일 정상 호출] - 개발자도구 >> 네트워크탭에서 아래와 같이 Status가 200으로 되어 있어야 한다.
SEE ALSO
객체 생성과 초기화
교육 동영상
각 열(Column) 별 타입(Type) 관련 참고