zTree_ztree的实体类-CSDN博客

本文链接：https://blog.csdn.net/w_t_y_y/article/details/78555113

效果

zTree插件即可用静态加载树形列表，也可用动态加载，动态加载时，后端只需要返回一个json字符串即可，前提是这个json用到的实体类的字段必须遵循zTree的API。如这里的实体类叫Menu，则它的字段如下，这是固定的：

package com.ifytek.domain;

import java.util.ArrayList;

public class Menu {
	int id;
	int pid;
	String urls;
	String name;
	ArrayList<Menu> children = new ArrayList<>();

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public int getPid() {
		return pid;
	}

	public void setPid(int pid) {
		this.pid = pid;
	}

	public String getUrls() {
		return urls;
	}

	public void setUrls(String urls) {
		this.urls = urls;
	}

	public ArrayList<Menu> getChildren() {
		return children;
	}

	public void setChildren(ArrayList<Menu> children) {
		this.children = children;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

}

下面具体讲一下过程：

1、首先需要引入几个css和js文件，

首页控制器：

package com.ifytek.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/index")
public class Index extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.getRequestDispatcher("/WEB-INF/jsp/index.jsp").forward(req, resp);
	}
}

对应的前台：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="assets/js/jquery-1.4.4.min.js" ></script>
<script>
		
			$(function(){
				
			
				$("form").submit(function(){
					var dt=$("form").serialize();
					$.post("login",dt,function(data){
						//alert(data);
						if(data=="登录成功"){
							
							window.location.href="main";
						}else{
							alert(data);
						}
					});
					return false;
				})
			})
		</script>
<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 80%;
				margin: 0 auto;
			}
			#header{
				width: 1130px;
				height: 100px;
				background-color: gray;
				margin: 0 auto;
				text-align:center;
			}
			#content{
				width: 1130px;
				margin: 0 auto;
			}
			#left{
				width: 360px;
				height: 650px;
				background-color: gainsboro;
				float: left;
			}
			#right{
				height: 650px;
				float: left;
				width: 770px;
				background-color: darkgrey;
			}
			form{
				width: 100px;
				margin: 0 auto;
				margin-top: 200px;
			}
			form input{
				margin-top: 20px;
				height: 40px;
				font-size: 20px;
				width: 333px;
			}
			
		</style>
	</head>

	<body>
	<div id="header">
			<h1>设备报修系统</h1>
		</div>
		<div id="content">
			<div id="left">
				<h2>设备动态</h2>
				<h2>今日天气</h2>
			</div>
			<div id="right">
				<form method="post">
					<input type="text" name="username" placeholder="请输入用户名" /><br />
					<input type="password" name="pwd" placeholder="请输入密码" /><br />
					<input type="text" name="authcode" placeholder="请输入验证码" />
					<img src="getImg">
					<br />
					<input type="submit" value="登录" />
					<a href="">还没有账号，去注册</a>
					
				</form>
				
			</div>
		</div>
		
		
		

	</body>

</html>

2、登录成功请求的控制器：

package com.ifytek.controller;

import java.io.IOException;


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/main")
public class Main extends HttpServlet{
@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	req.getRequestDispatcher("/WEB-INF/jsp/main.jsp").forward(req, resp);
	}
@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

对应的视图：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎</title>
	<link rel="stylesheet" href="assets/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<link rel="stylesheet" href="assets/css/home.css" type="text/css">
	<script type="text/javascript" src="assets/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="assets/js/jquery.ztree.core.js"></script>
	<SCRIPT type="text/javascript">
		var setting = {
			view: {
				dblClickExpand: false,
				showLine: true,
				selectedMulti: false,
				showIcon: true,
				addDiyDom: addDiyDom
			},
			async: {
				enable: true,
				url:"getmenu",//请求树形组件
			},
			callback: {
				beforeClick: function(treeId, treeNode) {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					if (treeNode.isParent) {
						zTree.expandNode(treeNode);
						return false;
					} else {
						demoIframe.attr("src",treeNode.urls);
						return true;
					}
				}
			}
		};
		$(document).ready(function(){
			var t = $("#treeDemo");
			$.fn.zTree.init(t, setting);
			demoIframe = $("#testIframe");
			demoIframe.bind("load", loadReady);
		});
		function loadReady() {
			var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
			htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
			maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
			h = demoIframe.height() >= maxH ? minH:maxH ;
			if (h < 530) h = 530;
			demoIframe.height(h);
		}
		function addDiyDom(treeId, treeNode) {
			var spaceWidth = 5;
			var switchObj = $("#" + treeNode.tId + "_switch"),
			icoObj = $("#" + treeNode.tId + "_ico");
			switchObj.remove();
			icoObj.before(switchObj);

			if (treeNode.level > 1) {
				var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
				switchObj.before(spaceStr);
			}
		}
	</SCRIPT>
</head>
<body>
	
	<div id="content">
		<TABLE border=0 height=650px align=left>
			<TR>
				<TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
					<ul id="treeDemo" class="ztree" style="width:260px; overflow:auto;"></ul>
				</TD>
				<TD width=1130px align=left valign=top><IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100%  height=700px SRC=""></IFRAME></TD>
			</TR>
		</TABLE>
	</div>
</body>
</html>

3、重点在于这个树形组件的获取：

控制器：

package com.ifytek.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.ifytek.service.LoginService;

@WebServlet("/getmenu")
public class GetMenuServlet extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		HttpSession session=req.getSession();
		String username=(String) session.getAttribute("username");
		LoginService service=new LoginService();
		String menujson=service.getMenuJson(username);
		System.out.println(menujson);
		resp.getWriter().write(menujson);
	}
}

service：

package com.ifytek.service;

import java.sql.PreparedStatement;


import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.ifytek.dao.LoginDao;
import com.ifytek.domain.Menu;
import com.ifytek.domain.Message;
import com.ifytek.domain.User;

import net.sf.json.JSON;
import net.sf.json.JSONArray;

public class LoginService {

	public Message checkLogin(User user) {
		Message message = new Message();
		LoginDao dao = new LoginDao();
		User dbuser = dao.getUserByUserName(user);
		if (dbuser == null) {
			message.setCode(401);
			message.setRes(false);
			message.setMsg("用户名不存在");
		} else {
			if (user.getPwd().equals(dbuser.getPwd())) {
				message.setCode(200);
				message.setRes(true);
				message.setMsg("登录成功");
			} else {
				message.setCode(402);
				message.setRes(false);
				message.setMsg("密码错误");
			}

		}
		dao.close();
		return message;
	}

	

	public int get_Id() {
		LoginDao dao=new LoginDao();
		int a=dao.get_Id();
		dao.close();
		return a;
	}

	
	

	
	public String getMenuJson(String username) {
		LoginDao dao=new LoginDao();
		ResultSet resultSet=dao.getIdByName(username);
		int uid = 0;
		
		try {
			while(resultSet.next()){
				uid = resultSet.getInt("id");
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		System.out.println("uid为"+uid);
		ArrayList<Menu> menus=dao.getMenuByUid(uid);
		ArrayList<Menu> fmenu=new ArrayList<>();
		for(Menu menu:menus) {
			if(menu.getPid()==0) {
				//一级菜单
				System.out.println("..."+menu.getId());
				System.out.println("一级菜单:  "+menu.getName());
				fmenu.add(menu);
			}else {
				//非一级菜单
				
				
			}
		}
		for(Menu menu:menus){
			if(menu.getPid()!=0){
				System.out.println("。。。"+menu.getId());
				for(Menu fm : fmenu) {
					if(menu.getPid() == fm.getId()) {
						fm.getChildren().add(menu);
					}
				}
			}
		}
		JSONArray array=JSONArray.fromObject(fmenu);
		System.out.println("返回"+array.toString());
	
		return array.toString();
	}

}

dao：

package com.ifytek.dao;

import java.sql.Connection;


import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.ifytek.domain.Const;
import com.ifytek.domain.Menu;
import com.ifytek.domain.User;
import com.ifytek.util.DbUtil;

public class LoginDao {
DbUtil dbUtil;
	public User getUserByUserName(User user) {
		dbUtil = new DbUtil();
		String sql = "select * from userlogin where username=? ";
		ResultSet resultSet = dbUtil.executeQuery(sql, user.getName());
		try {
			if (resultSet.next()) {
				User dbuser = new User();
				dbuser.set_id(resultSet.getInt("id"));
				dbuser.setName(resultSet.getString("username"));
				dbuser.setPwd(resultSet.getString("pwd"));
				return dbuser;
			} else {
				return null;
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

	

	
	public int get_Id() {
		System.out.println();
		int a=1;
		dbUtil=new DbUtil();
		String sql="select max(id) from userlogin";
		ResultSet resultSet=dbUtil.executeQuery(sql);
		try {
			
				while(resultSet.next()){
					a=resultSet.getInt(1);
				}
				
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return a;
	}

	
	public void close() {
		dbUtil.close();
	}

	

	public ResultSet findUser(User user) {
		dbUtil=new DbUtil();
		String sql="select * from userlogin where username=?";
		ResultSet rs=dbUtil.executeQuery(sql, user.getName());
		return rs;
	}

	

	public ArrayList<Menu> getMenuByUid(int uid) {
		dbUtil=new DbUtil();
		//select * from menu m left join rolemenu rm on m.id=rm.mid left join loginrole lr on lr.rid=rm.rid where lr.lid=1;
		String sql="select * from menu m left join rolemenu rm "+
		" on m.id=rm.mid left join loginrole lr on lr.rid=rm.rid where lr.lid=?";
		ResultSet resultSet=dbUtil.executeQuery(sql, uid);
		ArrayList<Menu> list=new ArrayList<>();
		try {
			while(resultSet.next()){
				Menu menu=new Menu();
				menu.setId(resultSet.getInt("id"));
				menu.setUrls(resultSet.getString("murl"));
				menu.setName(resultSet.getString("name"));
				menu.setPid(resultSet.getInt("pid"));
				list.add(menu);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}
}

说明：本项目使用了权限登录，不同权限的用户登录进来能访问的内容不一样。数据表：