版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/linzhaoliangyan/article/details/88740627
* 业务需求：统计某个班级男女比例，用饼图展现
* 基础环境
* Student，Teacher，Classes对象没有变
* 创建maven工程，web-app骨架
* 集成SM+Servlet
* entity
* dao
* service
* 资源文件
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd">
<import resource="classpath:spring-mybatis.xml"></import>
<context:component-scan base-package="com.hx.hx02.*"></context:component-scan>
<!-- <context:component-scan base-package="hx02.*"/>-->
</beans>
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
<!--配置数据库连接池-->
<context:property-placeholder location="classpath:dbconfig.properties" file-encoding="utf-8"/>
<bean id="c3p0" class="com.mchange.v2.c3p0.ComboPooledDataSource" destroy-method="close">
<property name="jdbcUrl" value="${url}"></property>
<property name="user" value="${uname}"></property>
<property name="password" value="${password}"></property>
<property name="driverClass" value="${driver}"></property>
</bean>
<!--构建SqlSessionFactory:由于这里是与Spring结合的选择SqlSessionFactoryBean（里面包含SqlSessionFactory）-->
<bean id="ssf" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="c3p0"></property>
<property name="mapperLocations" value="classpath:com.hx.hx02/dao/*.xml"></property>
<property name="configLocation" value="classpath:mybatis-config.xml"></property>
<property name="typeAliasesPackage" value="com.hx.hx02.entity"></property>
</bean>
<!--扫描mapping文件对应dao文件所在的包-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.hx.hx02.dao"></property>
<property name="sqlSessionFactoryBeanName" value="ssf"></property>
</bean>
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="c3p0"></property>
</bean>
<tx:annotation-driven transaction-manager="transactionManager"/>
</beans>
* 添加依赖
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.3.18.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>4.3.18.RELEASE</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>4.3.18.RELEASE</version>
</dependency>
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjrt</artifactId>
<version>1.8.9</version>
</dependency>
<dependency>
<groupId>aopalliance</groupId>
<artifactId>aopalliance</artifactId>
<version>1.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.16</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>4.3.18.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>4.3.18.RELEASE</version>
</dependency>
<dependency>
<groupId>com.mchange</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.5.2</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.3.0</version>
</dependency>
<!--slf4j-->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>1.7.25</version>
</dependency>
<!--log4j-->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
<!--slf4j到log4j-->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>1.7.25</version>
</dependency>
<!--Spring 和 MyBatis链接的jar-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.3.18.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>* 在pom文件中添加resource（才会编译到这些文件到classpath路径下）
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
<!--默认是true-->
<!--<filtering>true</filtering>-->
</includes>
</resource>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
<!--默认是true-->
<!--<filtering>true</filtering>-->
</includes>
</resource>
<resource>
<directory>src/main/webapp</directory>
<includes>
<include>**/*.css</include>
<include>**/*.js</include>
<!--默认是true-->
<!--<filtering>true</filtering>-->
</includes>
</resource>
</resources>* 构建Servlet作为控制器，调用业务的方法
@WebServlet(name="hello",value= {"/hello"})
**
* @author xiaozhao
*/
@WebServlet(name="hello",value= {"/hello"})
public class HelloServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
// 调用业务对象，如何找到业务对象
// 1 传统方式去加载,每次请求时加载
ApplicationContext context=new ClassPathXmlApplicationContext("spring.xml");
ClassesService classService = (ClassesService) context.getBean("classService");
Classes classes = classService.getClassesFromName("html");
response.getWriter().write(classes.toString());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
获得ApplicationContext 的方式
1 传统方式去加载,每次请求时加载
// ApplicationContext context=new ClassPathXmlApplicationContext("spring.xml");
2 解决方案:通过web监听器，web启动的时候加载，并且存储到ServletContext里面
// ApplicationContext context= (ApplicationContext) request.getServletContext().getAttribute("springContext");
@WebListener
public class AppListener implements ServletContextListener {
@Override
public void contextInitialized(ServletContextEvent servletContextEvent) {
ApplicationContext context=new ClassPathXmlApplicationContext("spring.xml");
servletContextEvent.getServletContext().setAttribute("springContext",context);
}
@Override
public void contextDestroyed(ServletContextEvent servletContextEvent) {
servletContextEvent.getServletContext().removeAttribute("springContext");
}
}
// 3 使用SpringWeb自带方式获取
ApplicationContext context=WebApplicationContextUtils.getRequiredWebApplicationContext(request.getServletContext());
在web.xml 配置
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
* 统计某个班级男女比例，用饼图展现
* dao
/**
* 通过班级号获取的班级的信息
* @param cno
* @return
*/
public List<Student> queryStudentsFromCno(int cno);
<select id="queryStudentsFromCno" parameterType="int" resultType="Student">
SELECT sid,cno,sname,ssex,sage,colleage FROM student WHERE cno=#{cno};
</select>* 服务层与Web层传递的实体
* 根据highcharts需要的json数据写的
/**
* @author xiaozhao
*/
public class Title {
/**
* text : 1001班级男生女生比例
*/
private String text;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
import java.util.List;
/**
* @author xiaozhao
*/
public class Series {
/**
* type : pie
* name : 1001班级男生女生比例
* data : [{"name":"男","y":65,"sliced":true,"selected":true},{"name":"女","y":35}]
*/
private String type;
private String name;
private List<DataBean> data;
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<DataBean> getData() {
return data;
}
public void setData(List<DataBean> data) {
this.data = data;
}
public static class DataBean {
/**
* name : 男
* y : 65
* sliced : true
* selected : true
*/
private String name;
private int y;
private boolean sliced;
private boolean selected;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getY() {
return y;
}
public void setY(int y) {
this.y = y;
}
public boolean isSliced() {
return sliced;
}
public void setSliced(boolean sliced) {
this.sliced = sliced;
}
public boolean isSelected() {
return selected;
}
public void setSelected(boolean selected) {
this.selected = selected;
}
}
}
import java.util.List;
/**
* @author xiaozhao
*
*/
public class StatisticsStudentResultDTO {
/**
* 状态码
*/
private int code;
/**
* 处理的结果
*/
private String result;
private Title title;
private List<Series> series;
public int getCode() {
return code;
}
public String getResult() {
return result;
}
public Title getTitle() {
return title;
}
public List<Series> getSeries() {
return series;
}
public void setSeries(List<Series> series) {
this.series = series;
}
public void setCode(int code) {
this.code = code;
}
public void setResult(String result) {
this.result = result;
}
public void setTitle(Title title) {
this.title = title;
}
@Override
public String toString() {
return "StatisticsStudentResultDTO{" +
"code=" + code +
", result='" + result + '\'' +
", title=" + title +
", series=" + series +
'}';
}
}
* service
/**
* @author xiaozhao
*/
public interface StatisticsStudentService {
/**
* 通过班级号，统计学生的性别信息
* @param cno
* @return
*/
public StatisticsStudentResultDTO statisticsStudentByCno(int cno);
}
/**
* @author xiaozhao
*/
@Service("statisticsService")
public class StatisticsStudentServiceImpl implements StatisticsStudentService {
@Autowired
private StudentMapper mStudentMapper;
@Override
public StatisticsStudentResultDTO statisticsStudentByCno(int cno) {
StatisticsStudentResultDTO resultDTO=new StatisticsStudentResultDTO();
try {
List<Student> students = mStudentMapper.queryClassesFromCno(cno);
List<Student> maleStudents=new ArrayList<Student>();
List<Student> femaleStudents=new ArrayList<Student>();
for(Student student:students){
if(student.getSsex()=='男'){
maleStudents.add(student);
}else if (student.getSsex()=='女'){
femaleStudents.add(student);
}
}
resultDTO.setCode(200);
resultDTO.setResult("success");
Title title=new Title();
title.setText(cno+"班级男生女生比例");
resultDTO.setTitle(title);
Series series=new Series();
series.setType("pie");
series.setName(cno+"班级男生女生比例");
List<Series.DataBean> datas=new ArrayList<Series.DataBean>();
Series.DataBean maleBean=new Series.DataBean();
maleBean.setName("男");
maleBean.setY(maleStudents.size());
maleBean.setSelected(true);
maleBean.setSliced(true);
Series.DataBean femaleBean=new Series.DataBean();
femaleBean.setName("女");
femaleBean.setY(femaleStudents.size());
datas.add(maleBean);
datas.add(femaleBean);
series.setData(datas);
List<Series> seriesList=new ArrayList<Series>();
seriesList.add(series);
resultDTO.setSeries(seriesList);
}catch (Exception e){
e.printStackTrace();
resultDTO.setCode(500);
resultDTO.setResult("fail");
}
return resultDTO;
}
}
* 控制层
@WebServlet(name = "StatisticsServlet",value = "/statistics")
public class StatisticsServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
request.setCharacterEncoding("utf-8");
// 获得请求参数
String cno = request.getParameter("cno");
ApplicationContext context= WebApplicationContextUtils.getRequiredWebApplicationContext(request.getServletContext());
StatisticsStudentService statisticsStudentService= (StatisticsStudentService) context.getBean("statisticsService");
StatisticsStudentResultDTO studentResultDTO = (StatisticsStudentResultDTO) statisticsStudentService.statisticsStudentByCno(Integer.parseInt(cno));
Gson gson=new Gson();
response.getWriter().write(gson.toJson(studentResultDTO));
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}* 前端页面
* 使用了bootstrap，jquery，higtcharts
* bootstrap参考：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
* higtcharts参考：http://www.runoob.com/highcharts/highcharts-tutorial.html
* jquery参考：http://www.runoob.com/jquery/jquery-tutorial.html
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>统计某个班的男女比例</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/highcarts/highcharts.js"></script>
<script language="JavaScript">
function change(){
statistics();
}
$(function () {
statistics();
});
function statistics() {
var selValue=$("#selId").val();
$.ajax({
url: "${pageContext.request.contextPath}/statistics?cno="+selValue,
type: "GET",
dataType: "json",
success: function (data, status) {
var content = JSON.parse(JSON.stringify(data));
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
};
var json = {};
json.chart = chart;
json.title = content.title;
json.tooltip = tooltip;
json.series = content.series;
json.plotOptions = plotOptions;
$('#hc').highcharts(json);
}
});
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="page-header">
<h1>统计某个班的男女比例</h1>
</div>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<form role="form">
<div class="form-group">
<label for="name">选择班级</label>
<select id="selId" class="form-control" onchange="change()">
<option value="1001">1001</option>
<option value="1002">1002</option>
<option value="1003">1003</option>
<option value="1004">1004</option>
<option value="1005">1005</option>
</select>
</div>
</form>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div id="hc" style="width: 550px; height: 400px; margin: 0 auto"></div>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
</div>
</body>
</html>
* 下拉菜单根据数据库的数据动态生成
* dao
/**
* 获得所有班级信息
* @return
*/
public List<Classes> queryAllClasses();
<select id="queryAllClasses" resultType="Classes">
SELECT cno,tid,cname,cnum,cdes FROM classes;
</select>* 实体
public class ClassesDataVo {
/**
* 状态码
*/
private int code;
/**
* 处理的结果
*/
private String result;
private List<Classes> classes;
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public List<Classes> getClasses() {
return classes;
}
public void setClasses(List<Classes> classes) {
this.classes = classes;
}
@Override
public String toString() {
return "ClassesDataVo{" +
"code=" + code +
", result='" + result + '\'' +
", classes=" + classes +
'}';
}
}
* 服务层
/**
* @author xiaozhao
*/
public interface StatisticsStudentService {
/**
* 通过班级号，统计学生的性别信息
* @param cno
* @return
*/
public StatisticsStudentResultDTO statisticsStudentByCno(int cno);
public ClassesDataVo getClassesData();
}
@Service("statisticsService")
public class StatisticsStudentServiceImpl implements StatisticsStudentService {
@Autowired
private StudentMapper mStudentMapper;
@Autowired
private ClassesMapper mClassesMapper;
@Override
public StatisticsStudentResultDTO statisticsStudentByCno(int cno) {
StatisticsStudentResultDTO resultDTO=new StatisticsStudentResultDTO();
try {
List<Student> students = mStudentMapper.queryClassesFromCno(cno);
List<Student> maleStudents=new ArrayList<Student>();
List<Student> femaleStudents=new ArrayList<Student>();
for(Student student:students){
if(student.getSsex()=='男'){
maleStudents.add(student);
}else if (student.getSsex()=='女'){
femaleStudents.add(student);
}
}
resultDTO.setCode(200);
resultDTO.setResult("success");
Title title=new Title();
title.setText(cno+"班级男生女生比例");
resultDTO.setTitle(title);
Series series=new Series();
series.setType("pie");
series.setName(cno+"班级男生女生比例");
List<Series.DataBean> datas=new ArrayList<Series.DataBean>();
Series.DataBean maleBean=new Series.DataBean();
maleBean.setName("男");
maleBean.setY(maleStudents.size());
maleBean.setSelected(true);
maleBean.setSliced(true);
Series.DataBean femaleBean=new Series.DataBean();
femaleBean.setName("女");
femaleBean.setY(femaleStudents.size());
datas.add(maleBean);
datas.add(femaleBean);
series.setData(datas);
List<Series> seriesList=new ArrayList<Series>();
seriesList.add(series);
resultDTO.setSeries(seriesList);
}catch (Exception e){
e.printStackTrace();
resultDTO.setCode(500);
resultDTO.setResult("fail");
}
return resultDTO;
}
@Override
public ClassesDataVo getClassesData() {
ClassesDataVo classesDataVo=new ClassesDataVo();
try {
List<Classes> classes = mClassesMapper.queryAllClasses();
classesDataVo.setCode(200);
classesDataVo.setResult("success");
classesDataVo.setClasses(classes);
}catch (Exception e){
e.printStackTrace();
classesDataVo.setCode(500);
classesDataVo.setResult("fail");
}
return classesDataVo;
}
}
* 控制层
/**
* @author xiaozhao
*/
@WebServlet(name="getClasses",value= {"/classes"})
public class GetClassesServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
ApplicationContext context=WebApplicationContextUtils.getRequiredWebApplicationContext(request.getServletContext());
StatisticsStudentService statisticsService = (StatisticsStudentService) context.getBean("statisticsService");
ClassesDataVo classesData = statisticsService.getClassesData();
Gson gson=new Gson();
response.getWriter().write(gson.toJson(classesData));
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>统计某个班的男女比例</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/highcarts/highcharts.js"></script>
<script language="JavaScript">
function change(){
statistics();
}
$(function () {
// 动态获取
$.ajax({
url : "${pageContext.request.contextPath}/classes",
type:"GET",
dataType: "json",
success: function (data, status) {
var content = JSON.parse(JSON.stringify(data));
// alert(content.result)
var selectElement=document.getElementById("selId");
var classes=content.classes;
for(var i=0;i<classes.length;i++){
var option=document.createElement("option");
option.value=classes[i].cno;
option.innerHTML=classes[i].cno;
selectElement.appendChild(option);
}
statistics();
}
}
);
// statistics();
});
function statistics() {
var selValue=$("#selId").val();
$.ajax({
url: "${pageContext.request.contextPath}/statistics?cno="+selValue,
type: "GET",
dataType: "json",
success: function (data, status) {
var content = JSON.parse(JSON.stringify(data));
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
};
var json = {};
json.chart = chart;
json.title = content.title;
json.tooltip = tooltip;
json.series = content.series;
json.plotOptions = plotOptions;
$('#hc').highcharts(json);
}
});
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="page-header">
<h1>统计某个班的男女比例</h1>
</div>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<form role="form">
<div class="form-group">
<label for="name">选择班级</label>
<select id="selId" class="form-control" onchange="change()">
</select>
</div>
</form>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div id="hc" style="width: 550px; height: 400px; margin: 0 auto"></div>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
</div>
</body>
</html>
* 添加ztree
* 下载ztree
* https://github.com/zTree/zTree_v3
* 导入ztree
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
body {
background-color: white;
margin: 0;
padding: 0;
text-align: center;
}
div, p, table, th, td {
list-style: none;
margin: 0;
padding: 0;
color: #333;
font-size: 12px;
font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
}
#testIframe {
margin-left: 10px;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ztree/js/jquery.ztree.core.js"></script>
<SCRIPT type="text/javascript">
<!--
var zTree;
var demoIframe;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function (treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
demoIframe.attr("src", treeNode.file + ".jsp");
return true;
}
}
}
};
var zNodes = [
{id: 1, pId: 0, name: "[core] 基本功能 演示", open: true},
{id: 101, pId: 1, name: "最简单的树 -- 标准 JSON 数据", file: "index"},
{id: 102, pId: 1, name: "最简单的树 -- 简单 JSON 数据", file: "core/simpleData"},
{id: 103, pId: 1, name: "不显示 连接线", file: "core/noline"},
{id: 104, pId: 1, name: "不显示 节点 图标", file: "core/noicon"},
{id: 105, pId: 1, name: "自定义图标 -- icon 属性", file: "core/custom_icon"},
{id: 106, pId: 1, name: "自定义图标 -- iconSkin 属性", file: "core/custom_iconSkin"},
{id: 107, pId: 1, name: "自定义字体", file: "core/custom_font"},
{id: 115, pId: 1, name: "超链接演示", file: "core/url"},
{id: 108, pId: 1, name: "异步加载 节点数据", file: "core/async"},
{id: 109, pId: 1, name: "用 zTree 方法 异步加载 节点数据", file: "core/async_fun"},
{id: 110, pId: 1, name: "用 zTree 方法 更新 节点数据", file: "core/update_fun"},
{id: 111, pId: 1, name: "单击 节点 控制", file: "core/click"},
{id: 112, pId: 1, name: "展开 / 折叠 父节点 控制", file: "core/expand"},
{id: 113, pId: 1, name: "根据 参数 查找 节点", file: "core/searchNodes"},
{id: 114, pId: 1, name: "其他 鼠标 事件监听", file: "core/otherMouse"},
{id: 2, pId: 0, name: "[excheck] 复/单选框功能 演示", open: false},
{id: 201, pId: 2, name: "Checkbox 勾选操作", file: "excheck/checkbox"},
{id: 206, pId: 2, name: "Checkbox nocheck 演示", file: "excheck/checkbox_nocheck"},
{id: 207, pId: 2, name: "Checkbox chkDisabled 演示", file: "excheck/checkbox_chkDisabled"},
{id: 208, pId: 2, name: "Checkbox halfCheck 演示", file: "excheck/checkbox_halfCheck"},
{id: 202, pId: 2, name: "Checkbox 勾选统计", file: "excheck/checkbox_count"},
{id: 203, pId: 2, name: "用 zTree 方法 勾选 Checkbox", file: "excheck/checkbox_fun"},
{id: 204, pId: 2, name: "Radio 勾选操作", file: "excheck/radio"},
{id: 209, pId: 2, name: "Radio nocheck 演示", file: "excheck/radio_nocheck"},
{id: 210, pId: 2, name: "Radio chkDisabled 演示", file: "excheck/radio_chkDisabled"},
{id: 211, pId: 2, name: "Radio halfCheck 演示", file: "excheck/radio_halfCheck"},
{id: 205, pId: 2, name: "用 zTree 方法 勾选 Radio", file: "excheck/radio_fun"},
{id: 3, pId: 0, name: "[exedit] 编辑功能 演示", open: false},
{id: 301, pId: 3, name: "拖拽 节点 基本控制", file: "exedit/drag"},
{id: 302, pId: 3, name: "拖拽 节点 高级控制", file: "exedit/drag_super"},
{id: 303, pId: 3, name: "用 zTree 方法 移动 / 复制 节点", file: "exedit/drag_fun"},
{id: 304, pId: 3, name: "基本 增 / 删 / 改 节点", file: "exedit/edit"},
{id: 305, pId: 3, name: "高级 增 / 删 / 改 节点", file: "exedit/edit_super"},
{id: 306, pId: 3, name: "用 zTree 方法 增 / 删 / 改 节点", file: "exedit/edit_fun"},
{id: 307, pId: 3, name: "异步加载 & 编辑功能 共存", file: "exedit/async_edit"},
{id: 308, pId: 3, name: "多棵树之间 的 数据交互", file: "exedit/multiTree"},
{id: 4, pId: 0, name: "大数据量 演示", open: false},
{id: 401, pId: 4, name: "一次性加载大数据量", file: "bigdata/common"},
{id: 402, pId: 4, name: "分批异步加载大数据量", file: "bigdata/diy_async"},
{id: 403, pId: 4, name: "分批异步加载大数据量", file: "bigdata/page"},
{id: 5, pId: 0, name: "组合功能 演示", open: false},
{id: 501, pId: 5, name: "冻结根节点", file: "super/oneroot"},
{id: 502, pId: 5, name: "单击展开/折叠节点", file: "super/oneclick"},
{id: 503, pId: 5, name: "保持展开单一路径", file: "super/singlepath"},
{id: 516, pId: 5, name: "模糊查找节点", file: "super/fuzzySearch"},
{id: 504, pId: 5, name: "添加 自定义控件", file: "super/diydom"},
{id: 505, pId: 5, name: "checkbox / radio 共存", file: "super/checkbox_radio"},
{id: 506, pId: 5, name: "左侧菜单", file: "super/left_menu"},
{id: 513, pId: 5, name: "OutLook 风格", file: "super/left_menuForOutLook"},
{id: 515, pId: 5, name: "Awesome 风格", file: "super/awesome"},
{id: 514, pId: 5, name: "Metro 风格", file: "super/metro"},
{id: 507, pId: 5, name: "下拉菜单", file: "super/select_menu"},
{id: 509, pId: 5, name: "带 checkbox 的多选下拉菜单", file: "super/select_menu_checkbox"},
{id: 510, pId: 5, name: "带 radio 的单选下拉菜单", file: "super/select_menu_radio"},
{id: 508, pId: 5, name: "右键菜单 的 实现", file: "super/rightClickMenu"},
{id: 511, pId: 5, name: "与其他 DOM 拖拽互动", file: "super/dragWithOther"},
{id: 512, pId: 5, name: "异步加载模式下全部展开", file: "super/asyncForAll"},
{id: 6, pId: 0, name: "其他扩展功能 演示", open: false},
{id: 601, pId: 6, name: "隐藏普通节点", file: "exhide/common"},
{id: 602, pId: 6, name: "配合 checkbox 的隐藏", file: "exhide/checkbox"},
{id: 603, pId: 6, name: "配合 radio 的隐藏", file: "exhide/radio"}
];
$(document).ready(function () {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
demoIframe = $("#testIframe");
demoIframe.bind("load", loadReady);
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(zTree.getNodeByParam("id", 101));
});
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);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE border=0 height=600px align=left>
<TR>
<TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</TD>
<TD width=770px align=left valign=top>
<IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=600px
SRC="index.jsp"></IFRAME>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
* 假如导入完不显示，记得用maven打包一下，ztree才会生成到classpath路径下
* ztree数据实现同数据库加载
* 持久化实体
* 通过gsonformat生成
public class ZNode {
/**
* id : 1
* pId : 0
* name : [core] 基本功能 演示
* open : true
* file : index
*/
private int id;
private int pId;
private String name;
private boolean open;
private String file;
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 getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isOpen() {
return open;
}
public void setOpen(boolean open) {
this.open = open;
}
public String getFile() {
return file;
}
public void setFile(String file) {
this.file = file;
}
}
* dao
/**
* @author xiaozhao
*/
public interface ZNodeMapper {
/**
* 查询所有节点
* @return
*/
List<ZNode> queryAllZnode();
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.hx.hx02.dao.ZNodeMapper">
<select id="queryAllZnode" resultType="ZNode">
SELECT id,pid,NAME,OPEN,FILE FROM znode
</select>
</mapper>* 业务对象
public class ZNodeVo {
/**
* 状态码
*/
private int code;
/**
* 处理的结果
*/
private String result;
private List<ZNode> zNodes;
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public List<ZNode> getzNodes() {
return zNodes;
}
public void setzNodes(List<ZNode> zNodes) {
this.zNodes = zNodes;
}
@Override
public String toString() {
return "ZNodeVo{" +
"code=" + code +
", result='" + result + '\'' +
", zNodes=" + zNodes +
'}';
}
}
* 业务层
public interface ZNodeService {
/**
* 获得所有树节点
* @return
*/
ZNodeVo getAllZNodes();
}
@Service("nodeService")
public class ZNodeServiceImpl implements ZNodeService {
@Autowired
private ZNodeMapper mZNodeMapper;
@Override
public ZNodeVo getAllZNodes() {
ZNodeVo zNodeVo=new ZNodeVo();
try{
List<ZNode> zNodes = mZNodeMapper.queryAllZnode();
zNodeVo.setCode(200);
zNodeVo.setResult("success");
zNodeVo.setzNodes(zNodes);
}catch (Exception e){
e.printStackTrace();
zNodeVo.setCode(500);
zNodeVo.setResult("fail");
}
return zNodeVo;
}
}
* 控制层
@WebServlet(name="nodes",value= {"/nodes"})
public class NodeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
ApplicationContext context=WebApplicationContextUtils.getRequiredWebApplicationContext(request.getServletContext());
ZNodeService zNodeService = (ZNodeService) context.getBean("nodeService");
ZNodeVo zNode = zNodeService.getAllZNodes();
Gson gson=new Gson();
response.getWriter().write(gson.toJson(zNode));
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
* 视图
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
body {
background-color: white;
margin: 0;
padding: 0;
text-align: center;
}
div, p, table, th, td {
list-style: none;
margin: 0;
padding: 0;
color: #333;
font-size: 12px;
font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
}
#testIframe {
margin-left: 10px;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ztree/js/jquery.ztree.core.js"></script>
<SCRIPT type="text/javascript">
<!--
var zTree;
var demoIframe;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function (treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
demoIframe.attr("src", treeNode.file + ".jsp");
return true;
}
}
}
};
$(document).ready(function () {
$.ajax({
url : "${pageContext.request.contextPath}/nodes",
type:"GET",
dataType: "json",
success: function (data, status) {
var content = JSON.parse(JSON.stringify(data));
var zNodes=content.zNodes;
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
demoIframe = $("#testIframe");
demoIframe.bind("load", loadReady);
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(zTree.getNodeByParam("id", 101));
}
}
);
});
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);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE border=0 height=600px align=left>
<TR>
<TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</TD>
<TD width=770px align=left valign=top>
<IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=600px
SRC="index.jsp"></IFRAME>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
* AOP实现业务实体功能的封装
* BaseDataVo
/**
* @author xiaozhao
*/
public class BaseDataVo {
/**
* 状态码
*/
protected int code;
/**
* 处理的结果
*/
protected String result;
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
@Override
public String toString() {
return "BaseDataVo{" +
"code=" + code +
", result='" + result + '\'' +
'}';
}
}
* 编写切面
@Component
@Aspect
public class DataVoAspect {
@Pointcut("execution(* com.hx.hx02.service.impl.*ServiceImpl.*(..))")
public void pointCut() {
}
@Around("pointCut()")
public Object around(ProceedingJoinPoint joinPoint) {
System.out.println("方法 前....");
Object obj = null;
BaseDataVo baseDataVo = null;
try {
obj = joinPoint.proceed();
if (obj instanceof BaseDataVo) {
baseDataVo = (BaseDataVo) obj;
baseDataVo.setCode(200);
baseDataVo.setResult("success");
}
} catch (Throwable throwable) {
throwable.printStackTrace();
baseDataVo=new BaseDataVo();
baseDataVo.setCode(500);
baseDataVo.setResult("fail");
return baseDataVo;
}
return obj;
}
@AfterReturning("pointCut()")
public void speakAfterReturning() {
System.out.println("speakAfeterReturning");
}
@AfterThrowing("pointCut()")
public void speakAfterThrowing() {
System.out.println("speakAfterThrowing");
}
}
spring 配置文件
<aop:aspectj-autoproxy proxy-target-class="false"></aop:aspectj-autoproxy>* 删除处理异常的代码
@Service("nodeService")
public class ZNodeServiceImpl implements ZNodeService {
@Autowired
private ZNodeMapper mZNodeMapper;
@Override
public BaseDataVo getAllZNodes() {
ZNodeVo zNodeVo = new ZNodeVo();
List<ZNode> zNodes = mZNodeMapper.queryAllZnode();
// int i=100/0;
zNodeVo.setzNodes(zNodes);
return zNodeVo;
}
}
