[JsTree] Context Menu와 Jstree

Jstree를 구현하는 구현부

$("#ddipTree").jstree({
"xml_data" : {
"ajax" : {

//XML 데이터 수령 <item id="" attr1><content><name>노드명</name></content></item> 형식
"url" : "<c:url value='/dsgnClfy/getDdipTree_lvl1.do'/>",
"type" : "POST",
"data" : function (node) {

//처음 open 되었을씨 root가 되는 node를 가져옴 query 형식이 달라서
ddipCnt++;
if(ddipCnt > 1) {

return {
"ddipCnt" : ddipCnt,
"clfyId" : node.attr ? node.attr("id") : ''
};

//두번째부터 부모키를 가지고 하위 노드를 가져옴
} else {
return {
"ddipCnt" : ddipCnt,
"obsSeq" : obsSeq,
"bisnId" : bisnId,
"ddipKind" : ddipKind,
"phaseCd" : phaseCd,
"fieldId" : fieldId,
};
}
}
},
"xsl" : "nest"
},

//jstree에서 사용하는 각종 플러그인

//테마, 데이터형식, ui, contexmenu, cookies

"plugins" : [ "themes", "xml_data", "ui","crrm","hotkeys","contextmenu", "cookies"],

//가끔 이전에 눌렀던 node가 자동선택 되는 경우가 있는데 쿠키때문에 그렇다. 쿠키를 제거하면

//사용하지 않을 수도 있지만 유용하게 쓰일 수 있기 떄문에 자동선택은 아래와 같이 해제가능하다.
"cookies" : {
"save_selected" : false
},

//contextMenu를 사용하려면 plugin을 사용해야하며 아래와 같이 기술한다.
"contextmenu" : {
"items" : {
"create" : {
"separator_before" : false, //api 참고
"separator_after" : true, //api 참고
"label" : "등록", //node에서 마우스 오른쪽 클릭 시 text
"action" : function (obj) {

//action에 맞는 jstree 이벤트가 존재하지만 contextmenu는 사용하되

//처리는 팝업창으로 처리하기 위해서 이와같이 한다.
if($(obj).attr("flag") != "B"){
var clfyId = $(obj).attr("id");
gf_openWindow("<c:url value='/dsgnClfy/editTree.do?

mode=inst&knd=ddip&clfyId="+clfyId+"'/>",500, 280);
}else{
alert("납품정보는 수행할 수 없습니다.");
return;
}
}
},
"rename" : {
"separator_before" : false,
"separator_after" : true,
"label" : "수정",
"action" : function (obj) {
if($(obj).attr("flag") != "B"){
var clfyId = $(obj).attr("id");
var hrnkClfyCd = "";
if($(obj).attr("hrnkClfyId")) {

//선택된 노드의 부모의 ID에 해당하는 clfyCd 가지고 오기
hrnkClfyCd = $.jstree._reference('#ddipTree')._get_parent("#"+clfyId).attr("clfyCd");
hrnkPath =

$.jstree._reference('#ddipTree')._get_parent("#"+clfyId).attr("path");

}
gf_openWindow("<c:url value='/dsgnClfy/editTree.do?

mode=updt&knd=ddip&hrnkClfyCd="+hrnkClfyCd+"&clfyId="+clfyId+"'/>",500, 280);
}else {
alert("납품정보는 수행할 수 없습니다.");
return;
}
}
},
"remove" : {
"separator_before" : false,
"separator_after" : true,
"label" : "삭제",
"action" : function (obj) {
if(!confirm("선택하신 분류를 삭제하시겠습니까 ?"))
return;

if($(obj).attr("flag") != "B"){
var clfyId = $(obj).attr("id");
var flag = $(obj).attr("flag");
if(!$(obj).attr("hrnkClfyId"))
flag = 'C';

execDeleteClfy(clfyId, flag);

} else {
alert("납품정보는 수행할 수 없습니다.");
return;
}
}
},
"ccp" : null
}
}
});

//node 선택 시 이벤트 발생 부분
$("#ddipTree").bind("select_node.jstree",(function(event, data) {
var flag = data.inst.get_selected().attr("flag");
var bisnId = data.inst.get_selected().attr("bisnId");
var phaseCd = data.inst.get_selected().attr("phaseCd");
var stepId = parent.$("input[name='cnstKind']:checked").val();
if(flag == "B"){ //사업 정보인 경우
var param = "?stepId="+stepId+"&fieldId="+fieldId+"&obsSeq=" + obsSeq + "&bisnId=" + bisnId+"&phaseCd="+phaseCd;
var url = "<c:url value='/dsgnClfy/bisnInfoPop.do"+param+"'/>";
gf_openWindow(url, 800, 600);
}else{
var id = data.inst.get_selected().attr("id");
parent.dsgnDocFileView.uf_SearchRequestMap(stepKind,id,'');
}
}));
}

 

결과는 아래와 같다,.

클릭하면 팝업창이 뜨고 등록/수정을 수행한다.

그 이후 tree가 refresh되는 문제는 화면에서 iframe으로 처리했기 때문에 iframe 영역만 refresh되도록 구현했으며 cookie를 통해서 금방 등록/수정하기 위해 클릭했던 node를 찾아 펼치기 때문에 이와 같은 효과를 볼 수 있다. autoselect를 false로 설정해서 node를 자동선택함으로 불필요하게 데이터를 불러오는 부분과 연계된 부분을 뗴어낼 수 있어서 다행이다.