728x90
반응형
뎁스가 있는 데이터를 관리할 화면이 필요했고, 인지하기 쉽게 윈도우 폴더 트리구조의 jquery 플러그인이 필요했다.
여러가지 적용해보고 쉽게 적용할 수 있는 플러그인을 찾아서 기록해 둔다.
# zTree 다운로드 링크, 데모와 document 링크
# 사용한 버전 : v3.5.46
1. json 데이터로 간단한 트리 만들기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
var zNodes =[
{
id: 1, // unique ID
pId: 0, // parent ID
name: "Name",
t: "Description",
open: true // open this node on page load
},
{
id: 11,
pId: 1,
name: "Node 1-1",
t: "This is Node 1-1"
},
{
id: 12,
pId: 1,
name: "Node 1-2",
t: "This is Node 1-2"
},
];
var setting = {
data: {
key: {
title:"t"
},
simpleData: {
enable: true
}
},
// more settings here
};
zTreeObj = $.fn.zTree.init($("#treeView"), setting, zNodes);
|
cs |
2. ajax으로 받은 데이터로 트리 만들기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
$(document).ready(function() {
var setting = {
data: {
key: {
title:"t"
},
simpleData: {
enable: true
}
},
async: {
enable: true,
type: "GET",
url: AJAX_CALL_URL,
// autoParam:["id", "name=n", "level=lv"],
// otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter,
},
callback : {
beforeClick : function(treeId, treeNode){
},
beforeAsync: function(treeId, treeNode){
},
onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
},
onAsyncSuccess: function(event, treeId, treeNode, msg){
},
onNodeCreated: function(event, treeId, treeNode){
},
onClick: function(srcEvent, treeId, node, clickFlag){
},
}
};
zTreeObj = $.fn.zTree.init($("#treeView"), setting);
});
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
|
cs |
주의사항
1) 1의 zNodes와 같은 형태의 값을 리턴해 줄 것
2) AJAX_CALL_URL은 ajax url 값
3) dataFilter: filter 는 ajax 응답 후 필요한 데이터 처리가 있는 경우의 셈플
4) 전체 갱신이 필요한 경우 아래와 같이 사용
|
1
|
zTreeObj.reAsyncChildNodes(false, 'refresh', null, null);
|
cs |
5) 일부 갱신이 필요한 경우(트리최상위 node중 첫번째 node 아래로 전체 리플래시 됨)
|
1
2
3
4
|
var nodes = zTreeObj.getNodes();
if (nodes.length>0) {
zTreeObj.reAsyncChildNodes(nodes[0], "refresh", null, null);
}
|
cs |
6) 트리에서 선택한 항목의 데이터 얻기
|
1
|
var node = zTreeObj.getSelectedNodes();
|
cs |
주석 처리된 부분은 데모에 있는 내용이었지만 아직 사용해 보지 않았기에 주석처리 했다.
* 관련글
[jQuery] zTree node children, updateNode() : https://deonggi.tistory.com/113
[jquery, zTree] zTree의 checkbox 사용 : https://deonggi.tistory.com/118
728x90
반응형