BootStrap 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
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.71.노드 를 만 드 는 방법 은 오른쪽 단 추 를 누 르 면 트 리 메뉴 팝 업 증가 제거 등 동작 을 합 니 다(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 트 리 메뉴 의 첨삭 과 개 조 를 위 한 소스 코드 입 니 다.도움 이 되 셨 으 면 합 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
부트스트랩 5 스티커Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.