jquery ztree

업무에 추석에 이번달은 엄청 바쁘네요.

그래도 하나하나 남겨야 나중에 필요할때 바로 찾아볼 수 있겠죠^^

오늘은 jquery 플러그인 중에 ztree에 대해 써볼까 합니다. 

전에 dynatree를 이용해서 트리로 카테고리를 구성했었는데 의외로 구현이 어려운 작업이 많이 있더라고요

그래서 다시 찾아보다가 발견한 것이 ztree입니다. 

jquery-ztree

홈페이지 url : http://www.ztree.me/v3/main.php#_zTreeInfo

데모 페이지 url  : http://www.ztree.me/v3/demo.php#_101

홈페이지 주소로 들어가면 위와 같은 화면이 나와요..

현재 버전은 3.5.14로 괘 안정적이랍니다. 

장점이야 여러 브라우저에서 되고 json도 되고 써있지만 가장 중요한것은 구현이 쉽다는 것입니다. 

기본적으로 그룹을 생성하고 그 그룹안에서 자식들을 만드는 식으로 구현을 했습니다. 

그리고 순서저장이라는 버튼을 만들어놨는데, 이건 드래그 앤 드롭이 지원이 되더라고요. ajax로 상태를 저장할까 하다가 귀찮아서 한번에 저장하는 방식을 취했습니다. 

그리고 값들이 많아지면 전체적으로 열기나 닫기가 필요할것 같아서 만들어 놓았고요.

소스를 받으면 예제들이 많이 있는데.. 전 왠만한건 다 ajax로 처리했습니다. 

var setting = {

view:{

addHoverDom : addHoverDom,

removeHoverDom: removeHoverDom,

selectedMulti : false

},

edit: {

enable: true,

showRemoveBtn: true,

showRenameBtn: true,

drag:{

isCopy : true,

isMove : true,

prev : true,

inner : false,

next : true

}

},

data: {

simpleData: {

enable: true

}

},

callback: {

beforeDrag: beforeDrag,

beforeDrop: beforeDrop, 

beforeRename : beforeRename,

beforeRemove : beforeRemove

}

};

제가 세팅한 값들입니다. 

기본 세팅값에서 오버했을 때 버튼이 나온다던가 드래그 드롭했을때 이벤트를 어떻게 실행할것인지, 어떤 버튼이 나오게 할것인지 등에 관한 내용을 설정할 수 있고 이벤트에 따라 함수에 적용을 하면 됩니다. 

위와 같이 예제를 보고 하나하나 실행시켜 본 다음 setting값을 변경하면 어느정도 다 맞춰진다는 것이죠.

다른 트리들은 약간씩 튕기는 현상이나 버그가 있는것 같던데 이건 어느정도 안정적으로 브라우져에서 작동을 하니 편하게 끝냈답니다. 

트리를 만들어야 한다면 한번쯤 써봐도 괜찮다 생각이 들어 글을 남겨놓습니다.