实际应用: 后台管理
开发工具: idea
开发语言: Java
数据库: MySQL
持久化: Mybatis
演示界面:
1.jpg
一、准备实体类
1)、每一个选项框对应一个实体类，配置列表 通过外键关联 配置类别。这里通过js写死了配置类别，实际获取方式跟配置列表相同。
配置列表实体类：
/**
* @auther ZengSakae
* @date 2019-12-13 15:53
*/
public class Pojo2 {
private Integer id;
private String reason_name;
private String details_of_reason;
private String secheme_description;
private Integer dis_order;
private Integer collocation_id;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getReason_name() {
return reason_name;
}
public void setReason_name(String reason_name) {
this.reason_name = reason_name;
}
public String getDetails_of_reason() {
return details_of_reason;
}
public void setDetails_of_reason(String details_of_reason) {
this.details_of_reason = details_of_reason;
}
public String getSecheme_description() {
return secheme_description;
}
public void setSecheme_description(String secheme_description) {
this.secheme_description = secheme_description;
}
public Integer getDis_order() {
return dis_order;
}
public void setDis_order(Integer dis_order) {
this.dis_order = dis_order;
}
public Integer getCollocation_id() {
return collocation_id;
}
public void setCollocation_id(Integer collocation_id) {
this.collocation_id = collocation_id;
}
@Override
public String toString() {
return "Pojo2{" +
"id=" + id +
", reason_name='" + reason_name + '\'' +
", details_of_reason='" + details_of_reason + '\'' +
", secheme_description='" + secheme_description + '\'' +
", dis_order=" + dis_order +
", collocation_id=" + collocation_id +
'}';
}
}
二、控制层
说明： 由于页面是通过AJAX方式来实现异步效果，所以控制层返回给页面的值是json格式。
通过以下代码可以实现把实体类集合转化为JSON格式的字符串
List<Pojo2> lists = xnglService.queryAllPojo2(id);
JSONArray jsonArray = JSONArray.fromObject(lists);
String result = jsonArray.toString();
return result;
pom 引入的依赖：
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.2.3</version>
<classifier>jdk15</classifier>
</dependency>
若从AJAX传入一个JSON的字符串则需要在AJAX表达式中设置如下属性
dataType: 'json', //设置为json格式
data: JSON.stringify(lists), //通过JSON.stringify将页面设置的 字符串数组转换为 JSON格式
async: false, //变更为同步请求
contentType: 'application/json;charset=utf-8',
以下代码有重复部分，没有做优化。
import com.zrr.xngl.pojo.Pojo1;
import com.zrr.xngl.pojo.Pojo2;
import com.zrr.xngl.service.XnglService;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.*;
/**
* @auther ZengSakae
* @date 2019-12-10 17:31
*/
@RestController
public class XnglController {
@Autowired
XnglService xnglService;
@RequestMapping(value = "/queryPojo")
public String queryPojo1(HttpServletRequest request, HttpServletResponse response) throws Exception{
// 设置为utf-8，避免解析出现乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("application/json");
int id = 0;
//判断传入的id是否为空，这里只是做校验
if(null != request.getParameter("id") || !"".equals(request.getParameter("id"))){
id = Integer.parseInt(request.getParameter("id"));
}
List<Pojo1> ls = xnglService.queryAllPojo(id);
JSONArray jsonArray = JSONArray.fromObject(ls); //把得到的实体类List集合转换为json数据
String lists = jsonArray.toString(); //把json数据转换成json格式的String类型
return lists; //返回这个String给前端页面
}
@RequestMapping(value = "/queryPojo2")
public String queryPojo2(HttpServletRequest request,HttpServletResponse response) throws Exception{
// 设置为utf-8，避免解析出现乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("application/json");
int id = 0;
if(null != request.getParameter("id") || !"".equals(request.getParameter("id"))){
id = Integer.parseInt(request.getParameter("id"));
}
List<Pojo2> lists = xnglService.queryAllPojo2(id);
JSONArray jsonArray = JSONArray.fromObject(lists);
String result = jsonArray.toString();
return result;
}
@RequestMapping(value = "/savePojo2")
@ResponseBody
public String savePojo2(@RequestBody String data)throws Exception{
String result = "";
JSONArray jsonArray = JSONArray.fromObject(data);
List<Pojo2> lists = new ArrayList<>();
for (int i=0;i<jsonArray.size();i++){
Object o = jsonArray.get(i);
JSONObject jsonObject = JSONObject.fromObject(o);
Pojo2 p2 = (Pojo2) JSONObject.toBean(jsonObject,Pojo2.class);
if(null == p2.getId() || "".equals(p2.getId())){
boolean b = xnglService.addPojo2(p2.getReason_name(),p2.getDetails_of_reason(),p2.getSecheme_description(),p2.getDis_order());
if(b){
System.out.println("添加成功");
}
}else {
boolean b = xnglService.savePojo2(p2.getId(),p2.getReason_name(),p2.getDetails_of_reason(),p2.getSecheme_description(),p2.getDis_order());
if (b){
System.out.println("更新成功");
}
}
}
return "SUCCESS";
}
}
三、服务层
@Service
public class XnglService {
@Autowired
XnglMapper xnglMapper;
public List<Pojo1> queryAllPojo(Integer id) {
return xnglMapper.getAllPojo(id);
}
public List<Pojo2> queryAllPojo2(int id) {
return xnglMapper.getAllPojo2(id);
}
public boolean savePojo2(Integer id, String reason_name, String details_of_reason, String secheme_description, Integer dis_order) {
return xnglMapper.savePojo2(id,reason_name,details_of_reason,secheme_description,dis_order);
}
public boolean addPojo2(String reason_name, String details_of_reason, String secheme_description, Integer dis_order) {
return xnglMapper.addPojo2(reason_name,details_of_reason,secheme_description,dis_order);
}
}
四、Mapper层 （代替了dao）
说明：只需要注意给参数设置别名 注解@Param
@Repository
public interface XnglMapper {
List<Pojo1> getAllPojo(@Param("id") Integer id);
List<Pojo2> getAllPojo2(@Param("collocation_id") Integer id);
boolean savePojo2(@Param("id") Integer id,@Param("reason_name") String reason_name,@Param("details_of_reason") String details_of_reason,@Param("secheme_description") String secheme_description,@Param("dis_order") Integer dis_order);
boolean addPojo2(@Param("reason_name") String reason_name,@Param("details_of_reason") String details_of_reason,@Param("secheme_description") String secheme_description,@Param("dis_order") Integer dis_order);
}
五、mapping.xml 配置文件
<?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.zrr.xngl.mapper.XnglMapper">
<select id="getAllPojo" resultType="com.zrr.xngl.pojo.Pojo1">
select * from collocation_column cc
where cc.type_id = #{id}
</select>
<select id="getAllPojo2" resultType="com.zrr.xngl.pojo.Pojo2">
select * from gzwtfl g
where g.collocation_id = #{collocation_id}
</select>
<update id="savePojo2" parameterType="com.zrr.xngl.pojo.Pojo2">
update gzwtfl
set reason_name = #{reason_name},details_of_reason = #{details_of_reason},secheme_description = #{secheme_description},dis_order = #{dis_order}
where id = #{id}
</update>
<insert id="addPojo2" parameterType="com.zrr.xngl.pojo.Pojo2">
insert into gzwtfl(reason_name,details_of_reason,secheme_description,dis_order,collocation_id)
values(#{reason_name},#{details_of_reason},#{secheme_description},#{dis_order},5)
</insert>
</mapper>
六、HTML页面 （thymeleaf技术）
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>性能管理流程</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}" src="../static/js/jquery-3.4.1.min.js"></script>
<style type="text/css">
.inp1 {
float: left;
}
</style>
<body>
<div style="height: 100px; width: 100%; background-color: #adacac; border: 2px solid #78b6da;">
配置类别: <select id="select1">
<option value="0">--请选择--</option>
<option value="1">流程角色配置</option>
<option value="2">流程数据配置</option>
</select>  
配置列表: <select id="select2">
<option value="0">--请选择--</option>
</select>
</div>
<div>
<button id="add">添加</button>
<button id="del">删除</button>
<button id="save">保存</button>
<button id="flush">刷新</button>
<form>
<table>
<thead>
<tr>
<th hidden="hidden">id</th>
<th>问题原因分类</th>
<th>原因分析详情</th>
<th>方案描述</th>
<th>排序</th>
</tr>
</thead>
<tbody id="tbbody">
<tr class="listsss">
</tr>
</tbody>
</table>
</form>
</div>
<script>
$('#select1').change(function () {
var value = $(this).val();
if (value) {
$.ajax({
type: "get", //调用方式: get、post、put、delete 等
url: "/queryPojo", // 调用的RequestMapping 的URL
data: {"id": value}, //给controller层传入当前页面选项的value值，以便数据库查询
dataType: "json", //指定ajax接收类型为json
success: function (data) {
$('#select2 option ').remove();
$('#select2').append("<option value = 0 >" + "--请选择--" + "</option>");
var lists = data; //可以不写，直接遍历data
for (i in lists) {
$('#select2').append("<option value =" + lists[i].id + ">" + lists[i].name + "</option>");
}
}
});
}
})
$('#select2').change(function () {
var value = $(this).val();
if (value) {
$.ajax({
type: "get", //调用方式: get、post、put、delete 等
url: "/queryPojo2", // 调用的RequestMapping 的URL
data: {"id": value}, //给controller层传入当前页面选项的value值，以便数据库查询
dataType: "json", //指定ajax接收类型为json
success: function (data) {
$('.listsss').remove();
var lists = data; //可以不写，直接遍历data
for (i in lists) {
// $('#tbbody').append("<tr class='listsss'>" + "<th hidden='hidden'>" + lists[i].id + "</th>" + "<th>"+ lists[i].reason_name + "</th>" + "<th>"+ lists[i].details_of_reason + "</th>" + "<th>"+ lists[i].secheme_description + "</th>" + "<th>"+ lists[i].dis_order + "</th>" +"</tr>" );
$('#tbbody').append("<tr class='listsss'>" + "<th hidden='hidden'>" + "<input type='text' name='id' value='" + lists[i].id + "'/></th>" + "<th><input type='text' name='reason_name' value='" + lists[i].reason_name + "'/></th>" + "<th><input type='text' name='details_of_reason' value='" + lists[i].details_of_reason + "'/></th>" + "<th><input type='text' name='secheme_description' value='" + lists[i].secheme_description + "'/></th>" + "<th><input type='text' name='dis_order' value='" + lists[i].dis_order + "'/></th>" + "</tr>");
}
}
});
}
});
$('#save').click(function () {
var length = $('.listsss').length;
var ids = $("input[ name = 'id']");
var reason_names = $("input[ name = 'reason_name']");
var details_of_reasons = $("input[ name = 'details_of_reason']");
var secheme_descriptions = $("input[ name = 'secheme_description']");
var dis_orders = $("input[ name = 'dis_order']");
var lists = new Array();
for (var i = 0; i < length; i++) {
var pojo2 = {};
pojo2.id = ids[i].value;
pojo2.reason_name = reason_names[i].value;
pojo2.details_of_reason = details_of_reasons[i].value;
pojo2.secheme_description = secheme_descriptions[i].value;
pojo2.dis_order = dis_orders[i].value;
lists.push(pojo2);
}
// for(var j=0;j<lists.length;j++){
// alert(lists[j].reason_name);
// }
$.ajax({
type: "post",
url: "/savePojo2",
dataType: 'json',
data: JSON.stringify(lists),
async: false,
contentType: 'application/json;charset=utf-8',
success: function (data) {
alert("更新成功");
}
});
})
$('#flush').click(function () {
//暂时未完善
});
$('#add').click(function () {
$('#tbbody').append("<tr class='listsss'>" + "<th hidden='hidden'>" + "<input type='text' name='id' value=''/></th>" + "<th><input type='text' name='reason_name' value=''/></th>" + "<th><input type='text' name='details_of_reason' value=''/></th>" + "<th><input type='text' name='secheme_description' value=''/></th>" + "<th><input type='text' name='dis_order' value=''/></th>" + "</tr>");
});
</script>
</body>
</html>
基本情况就是如此，可以在tr里面嵌入input框方便使用ajax实现更新，新增。
也可以另创建一个div遮罩层来新增，更新。
