BootStrap Jstree 트 리 메뉴 의 추가 삭제 및 수정 원본 코드

18349 단어 bootstrapjstree
1.우선 jstree 플러그 인 을 다운로드 하려 면 클릭 하여 링크 열기
2.페이지 에 플러그 인 js 파일 css 파일 도입

<link rel="stylesheet" href="plugins/jstree/themes/classic/style.css" rel="external nofollow" > 
<script type="text/javascript" src="plugins/jstree/_lib/jquery.js"></script> 
<script type="text/javascript" 
 src="plugins/jstree/_lib/jquery.cookie.js"></script> 
<script type="text/javascript" 
 src="plugins/jstree/_lib/jquery.hotkeys.js"></script> 
<script type="text/javascript" src="plugins/jstree/jquery.jstree.js"></script> 
3.컨트롤 초기 화
 1)html

<div id="demo2" class="demo" style="height:100px;"></div> 
2)js 는 demo 2 를 사용 하여 트 리 컨트롤 을 초기 화 합 니 다.

<script type="text/javascript" class="source below"> 
 $(function() { 
 $("#demo2").jstree( 
  { 
  "json_data" : { 
   "ajax" : { 
   "url" : "http://localhost:8080/MemberManager/DepartmentTreeJson", 
   "data" : function(n) { 
     // the result is fed to the AJAX request `data` option 
     return { 
     "operation" : "get_children", 
     "id" : n.attr ? n 
      .attr( 
      "id") 
      .replace( 
      "node_", 
      "") 
      : 1 
     }; 
    } 
    } 
   }, 
  "plugins" : [ 
    "themes", 
    "json_data", 
    "ui", 
    "crrm", 
    "contextmenu", 
    "search" ], 
   }) 
  .bind("loaded.jstree", 
   function(event, data) { 
   }) 
  .bind( 
   "select_node.jstree", 
   function(event, data) { 
   if (data.rslt.obj 
    .attr("id") != undefined) { 
   } 
   }) 
  .bind( 
   "remove.jstree", 
   function(e, data) { 
   data.rslt.obj.each(function() { 
    $.ajax({ 
     async : false, 
     type : 'POST', 
     url : "http://localhost:8080/MemberManager/CreateNodeForDepartment", 
     data : { 
      "operation" : "remove_node", 
      "id" : this.id.replace("node_", "") 
     }, 
     success : function(r) { 
      if (!r.status) { 
      data.inst.refresh(); 
      } 
     } 
     }); 
    }); 
   }) 
  .bind( 
   "remove.jstree", 
   function(e, data) { 
   data.rslt.obj.each(function() { 
    $.ajax({ 
     async : false, 
     type : 'POST', 
     url : "http://localhost:8080/MemberManager/CreateNodeForDepartment", 
     data : { 
      "operation" : "remove_node", 
      "id" : this.id 
      .replace( 
      "node_", 
      "") 
     }, 
     success : function( 
      r) { 
      if (!r.status) { 
      data.inst.refresh(); 
      } 
     } 
     }); 
    }); 
   }) 
  .bind( 
   "create.jstree", 
   function(e, data) { 
   $.post( 
    "http://localhost:8080/MemberManager/CreateNodeForDepartment", 
    { 
    "operation" : "create_node", 
    "id" : data.rslt.parent 
     .attr( 
     "id") 
     .replace( 
     "node_", 
     ""), 
    "position" : data.rslt.position, 
    "title" : data.rslt.name, 
    "type" : data.rslt.obj 
     .attr("rel") 
    }, 
    function(r) { 
    if (r.status) { 
     $(data.rslt.obj).attr("id", "node_" + r.id); 
    } else { 
     data.inst.refresh(); 
     $.jstree.rollback(data.rlbk); 
    } 
    }); 
   }) 
  .bind( 
   "rename.jstree", 
   function(e, data) { 
   $.post( 
    "http://localhost:8080/MemberManager/CreateNodeForDepartment", 
    { 
    "operation" : "rename_node", 
    "id" : data.rslt.obj 
     .attr( 
     "id") 
     .replace( 
     "node_", 
     ""), 
    "title" : data.rslt.new_name 
    }, 
    function(r) { 
    if (!r.status) { 
     data.inst.refresh(); 
     $.jstree.rollback(data.rlbk); 
    } 
    }); 
   }) 
   // 1) the loaded event fires as soon as data is parsed and inserted 
   // 2) but if you are using the cookie plugin or the core `initially_open` option: 
  .one("reopen.jstree", 
   function(event, data) { 
   }) 
   // 3) but if you are using the cookie plugin or the UI `initially_select` option: 
  .one("reselect.jstree", 
   function(event, data) { 
   }); 
  }); 
 </script> 

</pre>4.    <p></p><p><pre name="code" class="java"> 
import java.util.List; 
public class Department { 
 //   id 
 private String departmentid; 
 //      
 private String name; 
 //     ID 
 private String parentid; 
 //       。  id       
 private String orders; 
 //    
 private List<Department> childNode; 
 public List<Department> getChildNode() { 
 return childNode; 
 } 
 public void setChildNode(List<Department> childNode) { 
 this.childNode = childNode; 
 } 
 public String getDepartmentid() { 
 return departmentid; 
 } 
 public void setDepartmentid(String departmentid) { 
 this.departmentid = departmentid; 
 } 
 public String getName() { 
 return name; 
 } 
 public void setName(String name) { 
 this.name = name; 
 } 
 public String getParentid() { 
 return parentid; 
 } 
 public void setParentid(String parentid) { 
 this.parentid = parentid; 
 } 
 public String getOrders() { 
 return orders; 
 } 
 public void setOrders(String orders) { 
 this.orders = orders; 
 } 
 @Override 
 public String toString(){ 
 return "[departmentID:"+this.departmentid+ 
 "departmentName:"+this.name+ 
 "parentID:"+this.parentid+"orders:"+this.orders+"]"; 
 } 
} 
4.코드 분석
플러그 인 초기 화data 및 plugins 코드 구조 주의

4.1 위의 그림 두 부분,즉 초기 화 부분 에서 plugins 라 는 매개 변 수 는 jstree 통합 플러그 인의 지방 theme 표시 주제,jsondata 위 에서 정의 한 json데이터
Ajax 입 니 다.뒤에서 json 데 이 터 를 가 져 와 서 프론트 페이지 로 돌아 가 려 고 합 니 다.contextmenu 는 마우스 오른쪽 단 추 를 누 르 면 트 리 노드 에 추가 삭제 검사 메뉴 가 나타 납 니 다.
4.2 제 이 슨 데이터 형식
전시

이것 은 무제 한 으로 나 눌 수 있 는 메뉴 입 니 다.우 리 는 위의 그림 의 디 렉 터 리 구조 에 따라 아래 의 제 이 슨 데이터 구 조 를 비교 해 보면 더욱 뚜렷 해 집 니 다.

{"data":"     ","attr":{"id":"e59365b9-7b2a-43a3-b10a-cfe03d5eb004"}, 
 "children":[ 
 {"data":"   ","attr":{"id":"73919359-2a1b-4ee7-bcc2-56949e8560e8"}, 
  "children":[ 
   {"data":"   ","attr":{"id":"a7ea6a0f-0b78-4064-803b-f2e0a95d914f"}, 
   "children":[ 
    {"data":"  ","attr":{"id":"fc20e438-e7b9-4cca-be6a-49965daab528"},"children":[]}]}]}, 
 {"data":"    ","attr":{"id":"e1bdae71-6cfb-4e8c-ab29-a3eb03b9961d"},"children":[]} 
 ] 
}, 
4.4 json 데 이 터 를 조립 합 니 다.저 는 먼저 모든 부모 노드 인 parentid=1 을 찾 은 다음 에 모든 하위 노드 를 List대상 에 추가 한 다음 에 순환 재 귀 를 통 해 무한 메뉴 json 데 이 터 를 조립 합 니 다.

import java.util.List; 
public class Department { 
 //   id 
 private String departmentid; 
 //      
 private String name; 
 //     ID 
 private String parentid; 
 //       。  id       
 private String orders; 
 //    
 private List<Department> childNode; 
 public List<Department> getChildNode() { 
  return childNode; 
 } 
 public void setChildNode(List<Department> childNode) { 
  this.childNode = childNode; 
 } 
 public String getDepartmentid() { 
  return departmentid; 
 } 
 public void setDepartmentid(String departmentid) { 
  this.departmentid = departmentid; 
 } 
 public String getName() { 
  return name; 
 } 
 public void setName(String name) { 
  this.name = name; 
 } 
 public String getParentid() { 
  return parentid; 
 } 
 public void setParentid(String parentid) { 
  this.parentid = parentid; 
 } 
 public String getOrders() { 
  return orders; 
 } 
 public void setOrders(String orders) { 
  this.orders = orders; 
 } 
 @Override 
 public String toString(){ 
  return "[departmentID:"+this.departmentid+ 
  "departmentName:"+this.name+ 
  "parentID:"+this.parentid+"orders:"+this.orders+"]"; 
 } 
} 
4.5 이 곳 servlet 은 클 라 이언 트 에 jstree 의 json 을 제공 합 니 다.data。컨트롤 을 초기 화 할 때 ajax 가 이 servlet 를 호출 하여 json 데 이 터 를 가 져 와 json 에 게 되 돌려 주 는 것 입 니 다.data

import java.io.IOException; 
import java.io.PrintWriter; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import cn.goldwind.www.service.DepartmentService; 
import cn.goldwind.www.serviceimpl.DepartmentServiceImpl; 
public class DepartmentTreeJson extends HttpServlet { 
 /** 
  * 
  */ 
 private static final long serialVersionUID = 1L; 
 public DepartmentTreeJson() { 
  super(); 
 } 
 @Override 
 public void destroy() { 
  super.destroy(); // Just puts "destroy" string in log 
  // Put your code here 
 } 
 @Override 
 public void doGet(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException { 
  request.setCharacterEncoding("utf-8"); 
  response.setContentType("text/html;charset=UTF-8"); 
  PrintWriter out = response.getWriter(); 
  DepartmentService deptService=new DepartmentServiceImpl(); 
  //             
  StringBuilder json=deptService.createTreeNode(); 
  json.deleteCharAt(json.length()-1); 
  System.out.println(json); 
  out.print("["+json+"]"); 
  out.flush(); 
  out.close(); 
 } 
 @Override 
 public void doPost(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException { 
  doGet(request, response); 
 } 
 @Override 
 public void init() throws ServletException { 
  // Put your code here 
 } 
} 
4.6 위의 servlet 에서 createTreeNode 방법 을 살 펴 보 겠 습 니 다.
여 기 는 제 이 슨 을 만 드 는 핵심 입 니 다.
1)우선 모든(parent=1)루트 노드 를 가 져 옵 니 다.

@Override 
 public StringBuilder createTreeNode() { 
  //       
  List<Department> departments = new ArrayList<Department>(); 
  //             
  departments = queryByParentID("1"); 
  if (departments != null) { 
   return json(departments); 
  } 
  return null; 
 } 
 public StringBuilder json(List<Department> departments) { 
  for (int i = 0; i < departments.size(); i++) { 
   json.append('{'); 
   json.append("\"data\":\"").append(departments.get(i).getName()) 
     .append("\","); 
   json.append("\"attr\":{\"id\":\"").append(departments.get(i).getDepartmentid()).append("\"},"); 
   List<Department> deptchild = queryByParentID(departments.get(i) 
     .getDepartmentid()); 
   json.append("\"children\":"); 
   json.append('['); 
   if (deptchild != null) { 
    json(deptchild); 
    if("1".equals(departments.get(i).getParentid())){ 
     json.deleteCharAt(json.length()-1); 
     json.append(']'); 
     json.append('}'); 
     json.append(','); 
    }if(!"1".equals(departments.get(i).getParentid())&&deptchild!=null){ 
     json.deleteCharAt(json.length()-1); 
     json.append(']'); 
     json.append('}'); 
     json.append(','); 
    } 
   } else{ 
    json.append(']'); 
    json.append('}'); 
    json.append(','); 
   } 
  } 
  return json; 
 } 
 @Override 
 public List<Department> queryByParentID(String parentID) { 
  BaseDaoTemplate bd = new BaseDaoTemplate(); 
  List<Department> departments = new ArrayList<Department>(); 
  String sql = "select departmentid,name,parentid,orders from department where parentid=? "; 
  List<Object> params = new ArrayList<Object>(); 
  params.add(parentID); 
  departments = bd.findAllData(Department.class, sql, params); 
  if (departments.size() > 0) { 
   return departments; 
  } 
  return null; 
 } 
4.7
1.노드 를 만 드 는 방법 은 오른쪽 단 추 를 누 르 면 트 리 메뉴 팝 업 증가 제거 등 동작 을 합 니 다(plugins 에 contextmenu 를 추가 해 야 합 니 다)
2.jstree 를 연결 하 는 작업 입 니 다.노드 를 추가 하 는 것 을 예 로 들 지 않 습 니 다.

원리생 성 버튼(contextMenu)을 누 르 면 트 리 노드 오른쪽 단 추 를 누 르 고 팝 업 단 추 를 선택 합 니 다.위의 그림 의 방법 을 호출 합 니 다.위의 그림 방법 post 방법 은 ajax 를 통 해 배경 데 이 터 를 요청 하여 만 든 트 리 노드 를 데이터베이스 에 저장 합 니 다.
operation:작업 방식(생 성,제거,수정...);
id:현재 노드 의 id 는 다음 노드 의 parentID 를 만 드 는 것 입 니 다.
title:만 든 새 노드 의 이름
이 데이터 만 있 으 면 글 자 를 쓸 수 있 습 니 다.
4.8 servlet 를 만 들 고 모든 작업 을 처리 합 니 다(생 성,제거,수정.)

import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.UUID; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import cn.goldwind.www.pojo.Department; 
import cn.goldwind.www.service.DepartmentService; 
import cn.goldwind.www.serviceimpl.DepartmentServiceImpl; 
public class CreateNodeForDepartment extends HttpServlet { 
 private static final long serialVersionUID = 1L; 
 public CreateNodeForDepartment() { 
  super(); 
 } 
 @Override 
 public void destroy() { 
  super.destroy(); // Just puts "destroy" string in log 
  // Put your code here 
 } 
 @Override 
 public void doGet(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException { 
  request.setCharacterEncoding("utf-8"); 
  response.setContentType("text/html;charset=UTF-8"); 
  PrintWriter out = response.getWriter(); 
  DepartmentService deptService=new DepartmentServiceImpl(); 
  if("rename_node".equals(request.getParameter("operation"))){ 
   String id=request.getParameter("id"); 
   String title=request.getParameter("title"); 
   Department dept=new Department(); 
   dept.setDepartmentid(id); 
   deptService.modifyDepartment(dept, title); 
  }else if("create_node".equals(request.getParameter("operation"))){ 
   String id=request.getParameter("id"); 
   String title=request.getParameter("title"); 
   Department dept=new Department(); 
   dept.setDepartmentid(UUID.randomUUID().toString()); 
   dept.setName(title); 
   dept.setParentid(id); 
   deptService.insertDepartment(dept); 
  }else if("remove_node".equals(request.getParameter("operation"))){ 
   String id=request.getParameter("id"); 
   Department dept=new Department(); 
   dept.setDepartmentid(id); 
   deptService.deleteDepartment(dept); 
  } 
  out.flush(); 
  out.close(); 
 } 
 /** 
  * The doPost method of the servlet. <br> 
  * 
  * This method is called when a form has its tag value method equals to 
  * post. 
  * 
  * @param request 
  *   the request send by the client to the server 
  * @param response 
  *   the response send by the server to the client 
  * @throws ServletException 
  *    if an error occurred 
  * @throws IOException 
  *    if an error occurred 
  */ 
 @Override 
 public void doPost(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException { 
  doGet(request, response); 
 } 
 /** 
  * Initialization of the servlet. <br> 
  * 
  * @throws ServletException 
  *    if an error occurs 
  */ 
 @Override 
 public void init() throws ServletException { 
  // Put your code here 
 } 
} 
자,이제 완성 되 었 습 니 다.물론 이 안에 있 는 트 리 도 아이콘,사용자 정의 버튼 등 을 사용자 정의 할 수 있 고 구체 적 으로 스스로 탐구 할 수 있 습 니 다.
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 BootStrap Jstree 트 리 메뉴 의 첨삭 과 개 조 를 위 한 소스 코드 입 니 다.도움 이 되 셨 으 면 합 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기