[置顶] BootStrap Jstree 树形菜单的增删改查的实现源码

1.首先需下载jstree的插件点击打开链接

2.在页面引入插件js文件css文件

<link rel="stylesheet" href="plugins/jstree/themes/classic/style.css">
<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处理所有的操作(创建,移除,修改。。)

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 树形菜单的增删改查的实现源码)