계박사의 코딩교실

이번에 소개하는 jQuery Plugin 은 Dynatree.js 입니다.

트리 구조로 표현할 때 직접 구현하기 보다는 데이터만 트리구조로 해놓은 뒤 Plugin 을 이용하여 데이터 트리를 표현하는게 일반적입니다.

오픈 소스가 정말 많아서 이런저런 Tree Plugin 을 사용해봤지만 가장 좋았던 것은 Dynatree.js plugin 였습니다.

대부분의 트리 구조는 비슷하다. Json 데이터 또는 html 의 <li> 태그 등을 이용하여 트리 구조를 그리는게 대부분의 방식입니다.

Dynatree 도 마찬가지로 다양한 방법을 제공합니다.

Sample 들은 아래의 사이트에서 확인 가능합니다.

http://wwwendt.de/tech/dynatree/doc/samples.html

Dynatree 가 좋았던 점은 다양한 방법으로 Tree 를 그리기가 쉽습니다.

Sample 중 몇 개의 소스를 소개하도록 하겠습니다.

1. <li> 태그를 이용하여 트리구조 그리기 

아래와 같이 Server Side 에서 Json 데이터를 구현만 해주면됩니다.

처음 Tree 가 호출되었을 때 Ajax 로 호출하여 그리는 방식입니다.

Server Side 에서 트리구조 Json 데이터 리스트를 가져올 수 있도록 구현을 하면 됩니다.

보통 이런 경우 Server Side 에서 쿼리로 재귀쿼리로 Tree 구조를 가져온뒤 Dynatree Json 타입에 맞게 만들어 넘기면 됩니다.

3. lazy loading 방식으로 그리기

lazy loading 방식은 간단히 모든 Tree 구조데이터를 한번에 가져오는게 아니라 Tree 의 Children 을 실시간으로 가져오는 방식입니다.

2번째 방식인 ajax로 json 데이터를 가져오는 것은 같지만 처음에 전체 데이터가 아닌 큰 구조의 데이터라던지 부모 데이터만 가져온 뒤에 살을 붙입니다.

Ajax 로 실시간으로 해당 Node 의 Children 만가져오도록 구현을 하면 되기 때문에 

재귀쿼리로 Tree 전체를 만들어야되는 복잡도가 줄어들기때문에 괜찮은 방법입니다.

이번 프로젝트에서도 2번째 방법으로 개발을 하다가 3번째 방법인 lazy Loading 방식으로 변경하였더니 소스가 간결해 져서 좋았습니다.

실제로 부모 Node를 가져온 뒤 클릭할때마다 Node 의 Children 만 가져와서 붙이기때문에 쿼리도 더 간단해졌습니다.

3번째 방법이 가장 좋은 것은 아니다. 상황에 따라 필요한 방식으로 개발을 하는게 제일 좋습니다.

이번에 소개 하는 jQuery Plugin 은 DataTables 라는 Grid 종류의 라이브러리입니다.

보통 개발할 때 데이터 리스트 출력 시 반복문으로 <tr><td>데이터</td><tr> 방법으로 출력을 많이 하게됩니다.

특별히 Grid 를 사용하지 않는 경우 html Tag 안에서 처리하는 경우가 많습니다.

이러한 방법으로 개발을 한다고해서 잘못된 코딩방법도 아니고 잘못 짜여진 소스도 아닙니다.

단지 리스트 출력 외에 여러 부가적인 기능들을 직접 코딩하여 개발을 하려면 시간도 많이 걸리고 디버깅도 쉽지가 않습니다.

에를 들어 Multi Sorting 이나 Paging 처리 라던지 직접 구현하려면 그만큼 시간도 듭니다.

하지만 괜찮은 Plugin 하나를 잘 알고 쉽게 다룰줄 안다면 쉽게 구현이 가능합니다.

그래서 이번에 사용해본 DataTables 같은 경우 많은 기능도 있고 특히 예제와 설명이 잘되어있어 사용하기 편리합니다.

https://www.datatables.net/

아래는 프로젝트에서 직접 개발했던 코드입니다.

코드를 간략하게 설명하자면 HTML 코드 부분은 단순하게 데이터 리스트의 컬럼과 위치만 잡는 역활을 하며

실제 데이터 출력은 javascript 부분의 ajax 함수에서 Json으로 가져와 리스트를 출력하게 됩니다.

Column 별로 rendering을 직접 구현도 가능하며 데이터 값에 따라 버튼의 유무 표현을 쉽게 할 수 있습니다.

1.Javascript 코드

2. HTML 코드

jQuery Plugin 중에 이름 그대로 validation 기능을 하는 plugin 입니다.

특히 사용자 등록, 수정 또는 검색 조건 입력 부분과 같이 사용자가 입력하는 부분에 validation 체크와 함께 메세지를 편리하게 사용 가능합니다.

장점은 역시 가독성이 좋고 정규화 되어있기 때문에 편리합니다.

특히 if else, for, switch 등등 소스가 정신없이 되어있지만 jQuery Validation Plugin 쓰면 깔끔해서 좋습니다.

사용법은 아래 링크에 들어가면 예제와 함께 금방 익힐 수 있습니다.

http://jqueryvalidation.org/