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

이번에는 클라이언트에서 jquery-treeview 라이브러리을 사용하는 방법이다.

기본적인 사용법은 첫번째 포스팅인 트리를 표현하는 방법 과 비슷하다.

저 포스팅은 ajax로 모든 데이터를 가져오고 treeview에서 해당 데이터를 이용해서 전체 트리를 그리는 방식이였다.

이번에는 데이터를 가져올 때 해당 트리의 자식요소만 가져오는 다이나믹 트리를 구성해보자.

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

<ul id="codeList">

<li id="0" class="hasChildren">

<span class="dept">전체</span>

<ul>

</ul>

</li>

</ul>

<form id="searchForm">

<input type="hidden" name="parent" value="0" />

</form>

이전과는 달리 searchForm이라는 id를 가진 Form태그가 추가되었다.

이는 parentId로 자식 노드들을 select하기 위한 용도이다.

2. treeview의 async를 이용하기 위한 사전작업

보통 라이브러리의 document에서 사용법고 데모 예시를 쉽게 찾아볼 수 있다.

그런데 이 라이브러리는 document가 안보인다.;;

그래서 직접 async.html과 async.js를 열어보았다.

음 우선 treeview의 자체 기능으로 ajax를 사용할 수 있다.

서버 URL, 전송할 데이터, 메소드 타입을 사용하는구나.

이번엔 js파일을 살펴보자.

제이쿼리에 extend를 사용해서 내가 정의한 ajax랑 자체적으로 합치는구나.

(1) dataType은 기본적으로 json응답.

(2) root? 얘는 아무래도 트리를 그릴 ul태그의 id를 지정하는 것 같다.

(3) 나머지 트리를 그리는 일은 알아서 success콜백으로 수행해준다.

자 그럼 이전 포스팅 에서 만들어놓은 컨트롤러로 돌아가보자.

@ResponseBody

@RequestMapping("/getTreeview")

public List<? super TreeVo> test( @RequestParam("parent") String parent) throws Exception {

List<Code> list = codeCatService.findCodeListByParent(parent);

return codeService.parseToTree(list);

}

우리는 select문을 위해 부모 노드의 아이디인 parent를 매개변수로 넘거줘야했다.

아 사용법이 간단하구나. 이제 그냥 jquery.treeview를 호출하기만 하면 되겠다.

3. 제이쿼리 트리뷰 호출

$("#codeList").treeview({

url: "<c:url value='/setup/common/code/getTreeview' />", // 서버 URL

root: "codeList", // UL 태그

ajax: { // 메소드 종류

type: "get",

data: { // 전송 파라미터

parent: $("#searchForm").serializeObject()

},

complete: function(response) { // 통신 성공시 로직

// 트리의 +아이콘에 마우스를 올리면 parent를 변경한다.

$(".hitarea.hasChildren-hitarea").unbind("mouseover");

$(".hitarea.hasChildren-hitarea").mouseover(function() {

$("input[name='parent']").val($(this).parent().prop("id"));

});

},

collapsed: true

});

오 잘된다.

자 그럼 자식을 가진 이너노드는 MSN뿐이니까 얘를 펼쳐보자.

????????????????????????????????????

MSN의 ID는 7인데 왜 0의 자식들을 가져왔지..?

진정하고 우선 크롬 개발자도구를 열어서 네트워크 탭을 확인해보자.

최초 페이지 로딩 시 parent는 0이므로 파라미터가 제대로 날라갔다.

MSN의 +아이콘을 클릭하고 다시 확인해보자. 이 때 parent는 7이 되어야 할 것이다.

(mouseover에서 그렇게 해놨으니까)

하.. 여전히 parent가 0이다.

아무래도 $("#searchForm").serializeObject()가 최초 한번만 호출되어서

파라미터로 전달되는 parent는 항상 0인가보다.

왜지? 다른 페이지에서 ajax를 직접 호출하고 serializeObject()를 사용하면 매번 호출됬는데,

여기서는 한번만 호출된다.... $.extend가 문제인가?

아무리 생각해봐도 async.js를 직접 수정하는것 말고는 해결방법이 생각이 나질 않았다.

그래서 treeview호출부분에서 parent를 날리지 않고, async.js의 $.ajax 호출부분을 변경했다.

이렇게 하면 실시간으로 변경되는 parent값이 정상적으로 전달된다.

호출 결과

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

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

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