제목 : jquery, jstree 사용한 트리구조. 자식노드 선택시 부모노드도 선택토록 변형함
<html>
<head>
<title>jsTree example demo1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript">
$(function() {
$("#demo1").jstree({
"themes" : {
"theme" : [ "default" ]
},
"plugins" : [ "themes", "html_data", "ui" ]
});
$("#demo1").bind("select_node.jstree", function (event, data) {
var me = data.rslt.obj.attr("id"); //자신
if ($("input:checkbox[value="+me+"]:checkbox").is(":checked")==true)
{
$("input:checkbox[value="+me+"]").attr("checked", false);
} else {
$("input:checkbox[value="+me+"]").attr("checked", true);
}
var parents = []; //부모
data.rslt.obj.parents("li").each(function () {
parents.push($(this).attr("id"));
$("input:checkbox[value="+$(this).attr("id")+"]").attr("checked", true);
});
var children = []; //자식
data.rslt.obj.find("li").each(function () {
children.push($(this).attr("id"));
if ($("input:checkbox[value="+me+"]:checkbox").is(":checked")==false)
{
$("input:checkbox[value="+$(this).attr("id")+"]").attr("checked", false);
} else {
$("input:checkbox[value="+$(this).attr("id")+"]").attr("checked", true);
}
});
//로그 찍어보기
$("#log_pc").html("자신 id: " + me + ", parents 갯수="+ parents.length +", children 갯수="+ children.length +", pids 값="+ parents +", cids 값="+ children);
});
//트리메뉴 전부 오픈
$("#demo1").bind("loaded.jstree", function (e, data){
data.inst.open_all();
});
//버튼 액션
$("#btn_check").click(function(){
var pchecked_ids = [];
$("input:checkbox[name=node]:checked").each(function(){
pchecked_ids += this.value + ",";
});
//alert("node="+pchecked_ids);
$("#log_node").html("check된 node="+pchecked_ids);
});
});
</script>
</head>
<body>
<div id="demo1">
<ul id="demoul">
<li id="010000"><input type="checkbox" name="node" value="010000" /><a href="#">부모 노드 1</a>
<ul>
<li id="010100"><input type="checkbox" name="node" value="010100" /><a href="#">자식 노드 1</a>
<ul>
<li id="010101"><input type="checkbox" name="node" value="010101" /><a href="#">자자식 노드 1</a></li>
<li id="010102"><input type="checkbox" name="node" value="010102" /><a href="#">자자식 노드 2</a></li>
<li id="010103"><input type="checkbox" name="node" value="010103" /><a href="#">자자식 노드 3</a></li>
</ul>
</li>
<li id="010200"><input type="checkbox" name="node" value="010200" /><a href="#">자식 노드 2</a></li>
<li id="010300"><input type="checkbox" name="node" value="010300" /><a href="#">자식 노드 3</a></li>
</ul>
</li>
<li id="020000"><input type="checkbox" name="node" value="020000" /><a href="#">부모 노드 2</a>
<ul>
<li id="020100"><input type="checkbox" name="node" value="020100" /><a href="#">자식 노드 1</a></li>
<li id="020200"><input type="checkbox" name="node" value="020200" /><a href="#">자식 노드 2</a></li>
<li id="020300"><input type="checkbox" name="node" value="020300" /><a href="#">자식 노드 3</a></li>
</ul>
</li>
</ul>
</div>
<div id="log_pc"></div>
<div id="log_node"></div>
<form method="post" name="frmMenu">
메뉴ID : <input type="text" name="menu_id" value="" readonly="readonly"/>
</form>
<input type="button" id="btn_check" value="id체크" /><br />
</body>
</html>
내용 : jstree, dtree 에서는 자식노드 선택시 부모노드의 id 값을 못가져오는데, 위와 같은 방식으로 하면 부모노드 추출 가능.
내가 몰라서 못한 것일 수도 있으나, checkbox api 에선 도저히 못찾기에...편법을...
jquery-1.8.3.min.js 파일은 알아서 구하길. ( www.jquery.com )
id : log_pc, log_node 는 화면에 찍어보기 위함. 변수처리햇으니, form 으로 다음페이지로 가서 request 하길.
'JQUERY' 카테고리의 다른 글
| jquery를 이용한 input readonly 및 disable 구현 (0) | 2014.08.08 |
|---|---|
| [jQuery] ajaxSubmit - 심플한 ajax 통신 (1) | 2014.06.24 |
| ACE-T's JS Part 03. Jquery 기초를 배워봅시다! (0) | 2014.06.24 |
| [jQuery] 따라다니는 배너, 스크롤 배너 (1) | 2014.06.11 |
| [jQuery] 별점 플러그인 (0) | 2014.06.11 |
| [Jquery]따라다니는 설명창 (0) | 2014.06.11 |
| [Jquery] 검색어 하이라이트, 색상 변경 (0) | 2014.06.11 |
| [jQuery selectBox]자바스크립트 onchange 를 jquery에서는? (0) | 2014.06.11 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!