[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) 관련 참고

IBSheet8 Appendix Type