라이브러리화 한다는 것은
HTML 파일에 같이 작성된 자바 스크립트(JS) 코드를
별도의 JS 파일에 함수로 구현하고
이 함수만 호출하면
TreeGrid를 사용할 수 있도록 하겠다는 것이다.
또, 사용자(개발자)가 자신의 상황에 맞추어
간단한 설정만 하면 TreeGrid를 사용할 수 있도록 하는 것이다.
즉, TreeGrid 라이브러리 파일(sample3_treegrid9.js)과
이 라이브러리를 사용하는 HTML 파일(sample3.html)로 분할 해서 구현한다.
라이브러리화한 후,
HTML 파일에 남아있는 코드를 보면
복잡한 코드는 사라지고 option과 data만 남은 것을 볼 수 있다.
option과 data는
TreeGrid 사용자의 상황에 따라 바꿔서 지정하고
사용자는 30 라인에 있는 것처럼
TreeGrid9을 실행만 시키면 된다.
sample3.html기존의 코드는 다음과 같이 sample3_treegrid9.js파일에 작성하고
HTML(sample3.html)에서는
8 라인에서 작성한 것처럼 <script src="sample3_treegrid9.js"></script>
JS 파일을 가져오기 하면 된다.
sample3_treegrid9.js이상의 코드와
이전 예제(sample2.html)와 차이는
1 라인의 TreeGrid9 함수뿐이다.
외부 파일로 빼면서 함수로 구성한 것이다.
모든 코드는 동일하다.
다만, HTML에서 호출할 때 함수로 호출하지 않고
New를 사용해서 클래스로 실행했다.
간단하게는 함수화해서 함수를 호출해도 되지만
앞으로 여러 가지 기능을 추가해 나갈 것이기 때문에
클래스 방식으로 사용하였다.
JS에서는 함수와 클래스가 유사하게 사용된다.
자세한 설명은 [JS 클래스]로 검색하면 찾을 수 있다.
'JavaScript > TreeGrid' 카테고리의 다른 글
| 3. 데이터(JSON)를 트리형(계층형)으로 보여 주기 위해 들여쓰기 I (0) | 2017.01.14 |
|---|---|
| 4. 데이터(JSON)를 트리형(계층형)으로 보여 주기 위해 들여쓰기 II (0) | 2017.01.14 |
| 6. 클릭시 자식 노드 숨기기 (0) | 2017.01.14 |
| 7. 클릭시 자식 노드 숨김 / 보이기 (0) | 2017.01.14 |
| 8. 버그 수정 (0) | 2017.01.14 |