먼저 zTree 사용에 대한 기존 포스트가 있다.
해당 내용에 추가되는 내용이므로 zTree 사용방법을 모른다면 기존 포스트를 확인하기 바란다.
* [jquery] zTree plugin (tree view) : https://deonggi.tistory.com/110
# tree에 checkbox 추가를 위한 설정
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var setting = {
check : {
enable: true, // 체크박스 사용시
chkDisabledInherit: true // 체크박스 disabled 사용시
},
callback : {
onClick: function(srcEvent, treeId, node, clickFlag) {
// 클릭시 check toggle 처리
zTreeObj.checkNode(node, null, false, $("#callbackTrigger").attr("checked"));
},
}
};
|
cs |
개인적인 필요로 인해 2가지를 적용했다.
1. 코드로 check, uncheck 적용
내 경우 node 클릭 시 toggle로 checkbox 컨트롤이 필요해서 callback.onClick에 코드(위 소스의 9번 라인)가 추가 되었다.
* 참고 checkNode의 매개변수 설명
|
1
2
3
4
|
zTreeTools.checkNode = function (node, checked, checkTypeFlag, callbackFlag)
// checked : check여부, toggle 시 null
// checkTypeFlag : 하위 댑스가 있을때 하위 댑스도 check여부
// callbackFlag : $("#callbackTrigger").attr("checked")
|
cs |
2. disabled 적용
|
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
|
/**
* zTree node ~ 하위node의 chkDisabled을 수정하기 위한 재귀함수
* @param node
* @param key
* @returns
*/
function updateChkDisabled(node, key){
if (typeof key != 'undefined' && key == 'reset') {
if (node.useYn == 'N') node.chkDisabled = true;
else delete node.chkDisabled;
} else {
node.chkDisabled = true;
}
zTreeObj.updateNode(node);
$.each(node.children, function(index, subNode){
updateChkDisabled(subNode, key);
});
}
// chkDisabled all reset
$.each(zTreeObj.getNodes(), function(i, node){
updateChkDisabled(node, 'reset');
});
/**
* 타입에 따라 트리 disabled 처리
* @param tp
* @returns
*/
function changeChkDisabled(tp){
if(typeof tp != 'undefined') {
if (tp != 'SUPER') {
$.each(zTreeObj.getNodes(), function(i, node){
if(node.tp == 'SUPER') updateChkDisabled(node, tp);
});
}
}
}
|
cs |
포인트는 node.chkDisabled = true로 처리하면 된다. 필요가 없다면 delete.
또한 해당 기능은 disabled 시 하위 node까지 동일 해야 한다.
1) 10번 라인은 내가 필요해 의해 넣은 내용으로 리셋시 useYn가 N이라면 disabled 처리
2) 23~25번 라인은 전체 리셋시 실행
3) 32~41번 라인은 tp가 'SUPER'가 아닌 경우, node.tp가 SUPER 이외의 것을 가진 node ~ 하위node 모두를 disabled 처리
4) 해당 소스는 23~25번을 먼저 호출하고, 상황에 따라(tp) 37번 라인 실행
다시 내 중심적으로 적은 내용이니, 다른 분들께서 사용하신다면 상황에 맞게 수정하여 사용하시면 되시겠다.
* 관련글
[jquery] zTree plugin (tree view): https://deonggi.tistory.com/110
[jQuery] zTree node children, updateNode() : https://deonggi.tistory.com/113