BootStrap Jstree 树形菜单的增删改查的实现源码

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 使用 demo2来初始化树形控件

<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.代码解析

插件初始化我这里使用了插件的两个参数json_data,以及plugins注意看代码结构

4.1上图两个部分即初始化部分重点解释下plugins这个参数是jstree整合插件的地方theme表示主题，json_data将上文定义的json_data也就

是Ajax从后要获取json数据返回到前台页面。contextmenu，是鼠标右键在树形节点上会弹出增删改查的菜单。

4.2 json数据的格式

先看展示

这是一个可以无限极下分的菜单，我们可以根据上图的目录结构对照下面的json数据结构来看，这样会更清晰。

{"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<chiledren>对象里面，紧接着再通过循环递归组装无限极菜单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方法

这里是创建json的核心。

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处理所有的操作（创建，移除，修改。。）

1. import java.io.IOException; 
2. import java.io.PrintWriter; 
3. import java.util.UUID; 
4. import javax.servlet.ServletException; 
5. import javax.servlet.http.HttpServlet; 
6. import javax.servlet.http.HttpServletRequest; 
7. import javax.servlet.http.HttpServletResponse; 
8. import cn.goldwind.www.pojo.Department; 
9. import cn.goldwind.www.service.DepartmentService; 
10. import cn.goldwind.www.serviceimpl.DepartmentServiceImpl; 
11. public class CreateNodeForDepartment extends HttpServlet { 
12.  private static final long serialVersionUID = 1L; 
13.  public CreateNodeForDepartment() { 
14.   super(); 
15.  } 
16.  @Override 
17.  public void destroy() { 
18.   super.destroy(); // Just puts "destroy" string in log 
19.   // Put your code here 
20.  } 
21.  @Override 
22.  public void doGet(HttpServletRequest request, HttpServletResponse response) 
23.    throws ServletException, IOException { 
24.   request.setCharacterEncoding("utf-8"); 
25.   response.setContentType("text/html;charset=UTF-8"); 
26.   PrintWriter out = response.getWriter(); 
27.   DepartmentService deptService=new DepartmentServiceImpl(); 
28.   if("rename_node".equals(request.getParameter("operation"))){ 
29.    String id=request.getParameter("id"); 
30.    String title=request.getParameter("title"); 
31.    Department dept=new Department(); 
32.    dept.setDepartmentid(id); 
33.    deptService.modifyDepartment(dept, title); 
34.   }else if("create_node".equals(request.getParameter("operation"))){ 
35.    String id=request.getParameter("id"); 
36.    String title=request.getParameter("title"); 
37.    Department dept=new Department(); 
38.    dept.setDepartmentid(UUID.randomUUID().toString()); 
39.    dept.setName(title); 
40.    dept.setParentid(id); 
41.    deptService.insertDepartment(dept); 
42.   }else if("remove_node".equals(request.getParameter("operation"))){ 
43.    String id=request.getParameter("id"); 
44.    Department dept=new Department(); 
45.    dept.setDepartmentid(id); 
46.    deptService.deleteDepartment(dept); 
47.   } 
48.   out.flush(); 
49.   out.close(); 
50.  } 
51.  /** 
52.   * The doPost method of the servlet. <br> 
53.   * 
54.   * This method is called when a form has its tag value method equals to 
55.   * post. 
56.   * 
57.   * @param request 
58.   *   the request send by the client to the server 
59.   * @param response 
60.   *   the response send by the server to the client 
61.   * @throws ServletException 
62.   *    if an error occurred 
63.   * @throws IOException 
64.   *    if an error occurred 
65.   */ 
66.  @Override 
67.  public void doPost(HttpServletRequest request, HttpServletResponse response)  
68.    throws ServletException, IOException { 
69.   doGet(request, response); 
70.  } 
71.  /** 
72.   * Initialization of the servlet. <br> 
73.   * 
74.   * @throws ServletException 
75.   *    if an error occurs 
76.   */ 
77.  @Override 
78.  public void init() throws ServletException { 
79.   // Put your code here 
80.  } 
81. } 

好了这就完成了，当然这里面的树也是可以自定义图标，自定义按钮等操作，具体可以自己去探究。

以上所述是小编给大家介绍的BootStrap Jstree 树形菜单的增删改查的实现源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！

原文链接：http://blog.csdn.net/u010288264/article/details/50896479