3초기억력

jquery, jstree 사용. 자식노드 선택시 부모노드 선택하는 스크립트 본문

코딩_jquery

jquery, jstree 사용. 자식노드 선택시 부모노드 선택하는 스크립트

잠수콩 2013. 1. 15. 09:21



제목 :  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 하길.



출처 : 광고 좀 클릭해주세용....


예제 소스 :

jstree.zip

저작자표시 비영리 변경금지

'코딩_jquery' 카테고리의 다른 글

랭킹 scroll. nth-child 사용한 css 제어  (0) 2013.03.28
반응형 테이블, 소스코드 첨부  (0) 2013.03.28
jquery, ajax, xml 활용한 도움말 layer 보여주기  (0) 2013.01.22
jquery - editor : tinymce editor ( jquery 용 )  (0) 2011.03.25
jquery - detach() : 줄 삭제(버퍼에 남음?)  (0) 2011.03.25
'코딩_jquery' Related Articles more
Comments