jstree XML 데이터 및 JSON 데이터 기본 사용 방법

[황정식]

search_detail_form.jsp

search.js

SearchDetailForm.java

SearchDao.java

ibatis-search.xml

==== tree_view.jsp ====

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<link rel="stylesheet" type="text/css" href="/js/themes/default/style.css"/>
<style type="text/css">
 div#wrapper {
  width: 950px;
  height: 700px;
  margin-left: 500px;
 }
 
 div#form {
  float: left;
  padding: 10px 0px 0px 10px;
  width: 400px;
  height: 700px;
  border: 1px solid;
 }
 
 div#tree_wrapper {
  float: left;
  padding: 10px 0px 0px 10px;
  width: 500px;
  height: 700px;
  margin-left: 2px;
  border: 1px dashed;
  display: none;
 }
 
 div#treeview {
  margin: 10px 10px 0px 0px;
  width: 470px;
  height: 400px;
  border: 1px solid;
  overflow: auto;
 }
 
 div#search_guide_wrapper {
  padding: 10px 0px 0px 10px;
  width: 500px;
  height: 700px;
  margin-left: 2px;
  border: 1px dashed;
  float: left;
 }
 
</style>
<center>
 <h2>상세검색 폼</h2>
</center>
<div id="wrapper">
 <div id="form">
  산업기술 선택 <s:textfield name="newTechCode" maxlength="30" size="42"/><br/>
  <div style="text-align:right; padding:3px 7px 0px 0px; cursor: pointer"><img src="/images/test/btn_newTech.jpg" id="btn_newTech"/></div>
 </div>
 <div id="tree_wrapper">
  기술분류 코드 선택<br/>
   <s:textfield name="search_newTechCode" maxlength="30" size="42"/><br/><br/>
   하단의 tree 에서 검색하고자 하는 항목을 더블클릭하세요.
   <div id="treeview" style="padding: 5px">
      
    <div id="tree_container">
      <% /* 트리뷰가 표시되는 영역 */ %>
    </div>
    
   </div>
   <p/><p/>
   <s:textfield name="choice_newTechCode" maxlength="30" size="55" readonly="true"/> <img src="/images/test/btn_confirm‎.jpg" id="btn_newTech_confirm‎" style="cursor:pointer;"/>
 </div>
 
 <div id="search_guide_wrapper">
  <img src="/images/test/search_guide.jpg"/>
 </div>
</div>

<script type="text/xxxxjavascript" src="/js/jquery.jstree.js"></script>
<script type="text/xxxxjavascript" src="/js/_lib/jquery.hotkeys.js"></script>
<script type="text/xxxxjavascript" src="/js/search.js"></script>

==== tree_view.js ====

/**
* JSON 데이터를 사용해서 트리뷰를 생성하는 부분.
*
*
* 작성일자 : 2011-10-10
* 작성자 : 황정식
*/
if($("#tree_container").size() > 0)
{

 $("#tree_container").jstree({
  "json_data" : { 
   
   "ajax" : { 
    //"url" : "/view/search/newTech.json"
    "url" : "/search/newTechData.navi"

   } 

  }, 

  "plugins" : [ "themes", "json_data", "ui" ]

 })
 .bind("select_node.jstree", function (e, data) {
  // 데이터의 해당 id 값을 얻어온다.
  var id = data.rslt.obj.data("id");
  
  // 최하위 노드가 아닐때만 코드를 선택할 수 있도록 한다.
  if(id != undefined && id != "root_node")
  {
   var choice_code = $("input[name='choice_newTechCode']").val();
   
   // 입력전 이미 사전에 입력된 코드를 배열로 저장.
   var total_code_before_choice_array = choice_code.split("+");
   
   for(var i=0; i < total_code_before_choice_array.length; i++)
   {
    if(id == total_code_before_choice_array[i])
    {
     alert(‎"이미 선택한 코드입니다");
     
     return;
    }
   }
   
   // 첫번째 코드에는 "+" 문자열을 생략한다.
   if(!choice_code)
   {
    var total_code = choice_code + id;
   }
   else
   {
    var total_code = choice_code + "+" + id;
   }
   
   
   
   // 입력후 입력된 코드를 배열로 저장.
   var total_code_after_choice_array = total_code.split("+");
   
   if(total_code_after_choice_array.length <= 5)
   {
    $("input[name='choice_newTechCode']").val(total_code);
   }
   else
   {
    alert(‎"코드는 5개까지만 추가 가능합니다");
    return;
   }
   
  }
  
   
 });
}

/**
* XML 데이터를 사용해서 트리뷰를 생성하는 부분.
* IE9에서 트리뷰를 생성하지 못하는 문제로 인해 JSON 데이터로 교체했음.
*
*
* 작성일자 : 2011-10-10
* 작성자 : 황정식
*/
/*// 페이지 로딩시 DB에서 조회된 데이터를 xml 파싱후, 트리뷰로 랜더링.
if($("#tree_container").size() > 0)
{
 $("#tree_container").jstree({
   "xml_data" : {
    "ajax" :  {
      // "url" : "/search/newTechData.navi" 
     "url" : "/view/search/newTech.xml"
    },
    "xsl" : "nest"
   },
    "core" : {  
    "initially_open" : [ "node_0" ]   // 로딩시 오픈되는 노드 레벨. xml 데이터에서 id 속성의 값.
   }, 
 
   "plugins" : [ "themes", "xml_data", "ui", "contextmenu", "crrm", "types" ]
 })
 .bind("select_node.jstree", function (e, data) {
   // xml 노드의 해당 속성값을 얻어온다.
   var id = data.rslt.obj.attr("id");
   
   // 최하위 노드가 아닐때만 코드를 선택할 수 있도록 한다.
   if(id != undefined && id != "node_0")
   {
    var choice_code = $("input[name='choice_newTechCode']").val();
    
    // 입력전 이미 사전에 입력된 코드를 배열로 저장.
    var total_code_before_choice_array = choice_code.split("+");
    
    for(var i=0; i < total_code_before_choice_array.length; i++)
    {
     if(id == total_code_before_choice_array[i])
     {
      alert(‎"이미 선택한 코드입니다");
      
      return;
     }
    }
    
    // 첫번째 코드에는 "+" 문자열을 생략한다.
    if(!choice_code)
    {
     var total_code = choice_code + id;
    }
    else
    {
     var total_code = choice_code + "+" + id;
    }
    
    
    
    // 입력후 입력된 코드를 배열로 저장.
    var total_code_after_choice_array = total_code.split("+");
    
    if(total_code_after_choice_array.length <= 5)
    {
     $("input[name='choice_newTechCode']").val(total_code);
    }
    else
    {
     alert(‎"코드는 5개까지만 추가 가능합니다");
     return;
    }
    
   }
 });
}*/

/**
* 신기술 분류체계 래퍼 화면에 표시
*
*
* 작성일자 : 2011-10-10
* 작성자 : 황정식
*/
$("#btn_newTech").click(function(){
 $("#CONTENTS_right_skill").css({"display":"block"});
 $("#CONTENTS_right_explain").css({"display":"none"});
});

/**
* 선택된 코드를 검색 필드에 입력시키기위한 버튼 클릭.
*
*
* 작성일자 : 2011-10-10
* 작성자 : 황정식
*/
$("#btn_newTech_confirm‎").click(function(){
 var total_code = $("input[name='choice_newTechCode']");
 
 if(!total_code.val())
 {
  alert(‎"코드를 선택하세요");
  return;
 }
 $("input[name='newTechCode']").val(total_code.val());
 total_code.val("");
});

==== TreeView.java ====

package kipra.model.search.action;

import java.util.Iterator;
import java.util.List;
import org.apache.commons.lang3.time.StopWatch;
import java.util.concurrent.TimeUnit;

import kipra.model.search.bean.NewTechDataBean;
import kipra.model.search.dao.SearchDao;

import com.opensymphony.xwork2.ActionSupport;

/**
 * 상세 검색 폼. 트리뷰 생성 로직 포함.
 * @author 황정식
 * @version 1.0 - 2011/10/06
 *
 */
public class SearchDetailForm extends ActionSupport
{
 private String jsonData;
 
 public String execute( ) throws Exception
 {
  
  return SUCCESS;
 }
 
 public String newTechDataExecute() throws Exception
 {
  List<NewTechDataBean> level1List = SearchDao.getInstance().getNewTechList();
    
  String level1Name = "";
  String level1Code = "";
  String level2Name = "";
  String level2Code = "";
  String level3Name = "";
  String level3Code = "";
  
  jsonData = "[{\"data\":\"신기술 분류체계\",\"metadata\":{\"id\" : \"root_node\"},\"state\":\"open\",\"children\":[";
  
  for(int i=0; i < level1List.size(); i++)
  {
   level1Name = level1List.get(i).getLevel1Name();
   level1Code = level1List.get(i).getLevel1Code();
   
   if(i != (level1List.size() - 1))
   {
    jsonData += "{\"data\":\"" + level1Name + "\",\"state\" : \"close\",\"children\":[";
    
    // level1에 해당하는 level2 리스트를 가져온다.
    List<NewTechDataBean> level2List = SearchDao.getInstance().getNewTechList(level1Code);
    for(int j=0; j < level2List.size(); j++)
    {
     level2Name = level2List.get(j).getLevel2Name();
     level2Code = level2List.get(j).getLevel2Code();
     
     if(j != (level2List.size() - 1))
     {
      jsonData += "{\"data\":\"" + level2Name + "\",\"state\" : \"close\",\"children\":[";
      
      // level2에 해당하는 level3 리스트를 가져온다.
      List<NewTechDataBean> level3List = SearchDao.getInstance().getNewTechList(level2Code);
      
      for(int k=0; k < level3List.size(); k++)
      {
       level3Name = level3List.get(k).getLevel3Name();
       level3Code = level3List.get(k).getLevel3Code();
       
       if(k != (level3List.size() - 1))
       {
        jsonData += "{\"data\":\"" + level3Name + "\",\"metadata\":{\"id\" : \"" + level3Code + "\"},\"state\" : \"close\"},";
       }
       else
       {
        jsonData += "{\"data\":\"" + level3Name + "\",\"metadata\":{\"id\" : \"" + level3Code + "\"},\"state\" : \"close\"}";
       }
      }
      
      jsonData += "]},";
     }
     else
     {
      jsonData += "{\"data\":\"" + level2Name + "\",\"state\" : \"close\",\"children\":[";
      
      // level2에 해당하는 level3 리스트를 가져온다.
      List<NewTechDataBean> level3List = SearchDao.getInstance().getNewTechList(level2Code);
      
      for(int k=0; k < level3List.size(); k++)
      {
       level3Name = level3List.get(k).getLevel3Name();
       level3Code = level3List.get(k).getLevel3Code();
       
       if(k != (level3List.size() - 1))
       {
        jsonData += "{\"data\":\"" + level3Name + "\",\"metadata\":{\"id\" : \"" + level3Code + "\"},\"state\" : \"close\"},";
       }
       else
       {
        jsonData += "{\"data\":\"" + level3Name + "\",\"metadata\":{\"id\" : \"" + level3Code + "\"},\"state\" : \"close\"}";
       }
      }
      
      jsonData += "]}";
     }
    }
    
    jsonData += "]},";
   }
   else
   {
    jsonData += "{\"data\":\"" + level1Name + "\",\"state\" : \"close\",\"children\":[";
    
    // level1에 해당하는 level2 리스트를 가져온다.
    List<NewTechDataBean> level2List = SearchDao.getInstance().getNewTechList(level1Code);
    for(int j=0; j < level2List.size(); j++)
    {
     level2Name = level2List.get(j).getLevel2Name();
     level2Code = level2List.get(j).getLevel2Code();
     
     if(j != (level2List.size() - 1))
     {
      jsonData += "{\"data\":\"" + level2Name + "\",\"state\" : \"close\",\"children\":[";
      
      // level2에 해당하는 level3 리스트를 가져온다.
      List<NewTechDataBean> level3List = SearchDao.getInstance().getNewTechList(level2Code);
      
      for(int k=0; k < level3List.size(); k++)
      {
       level3Name = level3List.get(k).getLevel3Name();
       level3Code = level3List.get(k).getLevel3Code();
       
       if(k != (level3List.size() - 1))
       {
        jsonData += "{\"data\":\"" + level3Name + "\",\"metadata\":{\"id\" : \"" + level3Code + "\"}, \"state\" : \"close\"},";
       }
       else
       {
        jsonData += "{\"data\":\"" + level3Name + "\",\"metadata\":{\"id\" : \"" + level3Code + "\"},\"state\" : \"close\"}";
       }
      }
      
      jsonData += "]},";
     }
     else
     {
      jsonData += "{\"data\":\"" + level2Name + "\",\"state\" : \"close\",\"children\":[";
      
      // level2에 해당하는 level3 리스트를 가져온다.
      List<NewTechDataBean> level3List = SearchDao.getInstance().getNewTechList(level2Code);
      
      for(int k=0; k < level3List.size(); k++)
      {
       level3Name = level3List.get(k).getLevel3Name();
       level3Code = level3List.get(k).getLevel3Code();
       
       if(k != (level3List.size() - 1))
       {
        jsonData += "{\"data\":\"" + level3Name + "\",\"metadata\":{\"id\" : \"" + level3Code + "\"},\"state\" : \"close\"},";
       }
       else
       {
        jsonData += "{\"data\":\"" + level3Name + "\",\"metadata\":{\"id\" : \"" + level3Code + "\"},\"state\" : \"close\"}";
       }
      }
      
      jsonData += "]}";
     }
    }
    
    jsonData += "]}";
   }
   
  }
  
  
  jsonData += "]}]";
  
  System.out.println(jsonData);
  
  /*xmlData = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" +
    "<root>" +
     "<item id=\"node_0\">" +
      "<content><name><![CDATA[신기술분류체계]]></name></content>";
      
  StopWatch clock = new StopWatch();
  clock.start();
  for(int i=0; i < level1List.size(); i++)
  {
   level1Name = level1List.get(i).getLevel1Name();
   level1Code = level1List.get(i).getLevel1Code();
   
   xmlData += "<item>" +
        "<content><name><![CDATA[" + level1Name + "]]></name></content>";
   
   // level1에 해당하는 level2 리스트를 가져온다.
   List<NewTechDataBean> level2List = SearchDao.getInstance().getNewTechList(level1Code);
   
   for(int j=0; j < level2List.size(); j++)
   {
    level2Name = level2List.get(j).getLevel2Name();
    level2Code = level2List.get(j).getLevel2Code();
    
    xmlData += "<item>" +
         "<content><name><![CDATA[" + level2Name + "]]></name></content>";
    
    // level2에 해당하는 level3 리스트를 가져온다.
    List<NewTechDataBean> level3List = SearchDao.getInstance().getNewTechList(level2Code);
    
    for(int k=0; k < level3List.size(); k++)
    {
     level3Name = level3List.get(k).getLevel3Name();
     level3Code = level3List.get(k).getLevel3Code();
     
     xmlData += "<item id=\"" + level3Code + "\">" +
          "<content><name><![CDATA[" + level3Name + "]]></name></content>" +
         "</item>";
     
    }
    xmlData += "</item>";
   }     
   
   xmlData += "</item>";
   
  }
  
  xmlData += "</item>" +
    "</root>";
  
  clock.stop();
  
  System.out.println("데이터 로딩 시간: " + clock.getTime());
  
  System.out.println("데이터 로딩 시간: " + TimeUnit.MILLISECONDS.toMinutes(clock.getTime()) + "분 " + ((clock.getTime()/1000) % 60) + "초");
  
  
  System.out.println(jsonData);*/
    
  return SUCCESS;
 }

 public String getJsonData()
 {
  return jsonData;
 }

 public void setJsonData(String jsonData)
 {
  this.jsonData = jsonData;
 }
 
 
}

[하루하루]

잘 보았습니다. 음.. 그런데 예문으로 드신게 스트럿츠 인거 같은데 스프링 으로는 어떻게 될까요? db 연동해서 전자정부 프레임워크에 적용을 시켜 볼려 하니 코드만 바꿔선 안될꺼 같아 질문 드려 봅니다..

[황정식]

스프링이라고해서 jstree의 설정이 변경되거나 그러지는 않습니다. 스트럿츠든 스프링이든 프레임워크만 틀린부분이고 그렇기때문에 자바단 로직이 아닌 클라이언트 로직은 그대로 사용하시면 됩니다.

[바랑카]

자료 감사합니다. 잘 봣습니다.