(jquery-treeview) 1. 트리를 표현하는 방법

첫 프로젝트에서 사용하게 된 Jquery-Treeview의 사용법.

이건 뭐 document나 API가 없어서 demo페이지만 보고 개발해야될 처지다;

기존 시스템을 재구축하는 프로젝트인데, 비슷한 UI를 가진 라이브러리가 이거뿐이라 울며 겨자먹기로..

  

https://github.com/jzaefferer/jquery-treeview 에서 다운받을 수 있다.

뭐 딱 SI에서 쓸만한 UI라는 생각이 든다.

다운 받아서 demo폴더로 들어가봤다.

대충 정리하자면

1. index.html -> 대충 여러 기능을 테스트해볼 수 있는 데모 페이지

2. async.html -> 서버에서 데이터를 가져와 dynamic하게 트리를 그리는 기능의 데모 페이지

3. edit.html -> 트리에 노드를 추가, 삭제하는 방법을 보여주는 데모 페이지

4. images.html -> 위에 화면처럼 파일과 폴더형식의 그림으로 표현하는 방법을 보여주는 데모 페이지

이정도만 참고해도 원하는 기능을 구현할 수 있다.

서버에서 모든 데이터를 가져와 DOM으로 그리는 방법

먼저 이 방법은 꽤나 간단하다.

대신 데이터가 많을 경우 각 노드마다 부모 노드의 DOM을 탐색하는 비용이 많이 들어서 속도가 많이 느리다.

1. 트리를 그리기 위한 DOM을 준비

<ul id="codeList">

<li id="0"><a class="folder code">전체</a>

<ul><!-- 자식 노드가 들어올 공간--></ul> 

</li>

</ul>

2. ajax를 이용해서 서버에서 데이터를 수신

$.ajax({

type         : "GET",

url : "<c:url value='URL' />",

contentType : "application/json",

data         : dataSet,

processData : true,

  .............

});

3. 수신한 데이터를 이용해 태그 삽입

data.forEach(function(e, i) {

var codeNm = e.codeNm;

var codeId = e.codeId;

  var parentId = e.parentId;

var codeLvl = e.codeLvl;

var li = '<li id="'+ codeId +'" lvl="' + codeLvl + '"><a class="file code">'+ codeNm +'</a></li>';

// 1레벨은 그냥 추가

// 다음 레벨부터는 상위 li의 클래스를 폴더로 바꾸고 자기 자신을 추가

  if(codeLvl == 1) {

lvl0.append(li);

} else {

var parentLi = $("li[id='"+ parentId +"']");

      parentLi.find("a").removeClass("file");

      parentLi.find("a").addClass("folder");

      var bUl = parentLi.find("ul");

   // 하위 그룹이 없으면 li로 추가

      // 하위 그룹이 있으면 ul로 추가

      if(bUl.length == 0) {

          li = "<ul>" + li + "</ul>";

          parentLi.append(li);

      } else {

         bUl.append(li);

      }

  }

});

-> 계층구조를 그리기위해 노드마다 4개의 데이터를 가져왔다.

     (각 노드를 구별하기 위한 ID, 각 노드의 트리 LEVEL, 화면에 표시할 NAME, 부모 노드를 찾기 위한 부모ID)

-> 해당 데이터를 이용해 <li>태그(각 노드를 의미함) 를 준비한다.

-> 부모 노드에 해당하는 DOM(여기서는 ul태그)를 검색한다

- 자식 노드가 있다면 각 노드를 의미하는 <li>태그를 부모 노드의 <ul>태그에 삽입한다.

- 자식 노드가 없다면 LEAF를 의미하는 <ul>태그로 감싼 <li>태그를  부모 노드의 <ul>태그에 삽입한다.

* 트리 구조에서 자식이 없는 LEAF는 <li>태그

* 트리 구조에서 부모를 의미하는 INNER NODE는 <ul>태그

4. Jquery.treeview() 호출

$("#codeList").treeview({collapsed: true});

최종 화면은 위와 같다.

서버에서는 그저 요청받은 데이터만 전송하면 된다.

여기서는 데이터가 적기때문에 전체데이터를 받아서 그려도 문제가 되지 않지만,

같은 기능을 사용하는 다른 화면에서는 데이터의 양이 많아서 DOM을 그리느라 화면이 3~4초 뒤에 표시됐다;

그 외에도 해당 화면에만 종속되는 기능이 되었고, 재사용성은 제로다.

한달 뒤에 이코드를 보면 바로 삭제해버릴것 같다.

사실 다음날 같은 기능의 화면이 있어서 새로 만들다가 이 코드는 걍 휴지통에 버렸다.

서버에서 다형성과 지네릭을 사용하고 프론트에서 jquery-treeview 자체에서 지원하는 edit, async를 활용하면 재사용성은 일단 높아진다.

디자인패턴 공부한지 한달밖에 안되서 확장성?은 모르겠다.

* 컨트롤러 코드

// 코드그룹의 코드 전체 데이터

@ResponseBody

@RequestMapping(value = "/findCodeByGroup")

public List<Code> findCodeByGroup(@RequestParam("codeGroupId") String codeGroupId) {

return codeService.findAllByGroup(codeGroupId);

}

(jquery-treeview) 1. 트리를 표현하는 방법

(jquery-treeview) 2-1. async를 이용한 다이나믹 트리(서버)

(jquery-treeview) 2-2. async를 이용한 다이나믹 트리(클라이언트)