Spring MVC+layui（基于bootstrap）+t 新增功能（页面和数据传递）

为开发的规范，更易于扩充，将新增与列表页分开为:list.html、add.html
list.html:

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"></meta>
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
<title>中国光电网</title>
<link rel="stylesheet" href="/layui/css/layui.css"></link>
</head>
<body class="layui-layout-body"><div class="layui-layout layui-layout-admin"><!-- 头部区域 --><head th:include="/manage/top"></head><!-- 左侧菜单栏 --><head th:include="/manage/menu"></head><div class="layui-body"><!-- 内容主体区域  --><div style="padding: 15px;"><fieldset class="layui-elem-field site-demo-button"><legend>操作</legend><a id="add" class="layui-btn layui-btn-primary" href="javascript:;">新增</a></fieldset><table id="demo" lay-filter="test"></table></div></div><!-- 底部固定区域 --><div class="layui-footer">中国光电网</div></div><script src="/layui/layui.js"></script><script src="/js/jquery-3.2.1.min.js"></script><script>layui.use('table', function() {var table = layui.table;//第一个实例table.render({elem : '#demo',height : 315,url : '/manage/attribution/datatable', //数据接口page : true, //开启分页cols : [ [ //表头{field : 'id',title : 'ID',width : 80,sort : true,fixed : 'left'}, {field : 'name',title : '栏目名',width : 80}, {field : 'createTime',title : '创建时间',width : 160,sort : true}, {field : 'updateTime',title : '更新时间',width : 160}, {field : 'language',title : '语言',width : 80} ] ]});});</script><!-- 弹出事件  --><script>//询问框$("#add").click(function(){//iframe层layer.open({type: 2,title: '新增',shadeClose: true,shade: 0.8,area: ['380px', '50%'],content: '/manage/attribution/add' //iframe的url}); })</script><script>//JavaScript代码区域layui.use('element', function() {var element = layui.element;});</script>
</body>
</html>

add.html

<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">栏目名称</label><div class="layui-input-block"><input type="text" name="name" lay-verify="required"placeholder="请输入" autocomplete="off" class="layui-input"></input></div></div><div class="layui-form-item"><label class="layui-form-label">语言</label><div class="layui-input-block"><input type="radio" name="language" value="0" title="中文"checked="checked"></input> <input type="radio" name="language"value="1" title="英文"></input></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button></div></div></form><script src="/layui/layui.js"></script><script src="/js/jquery-3.2.1.min.js"></script><script>//Demolayui.use('form', function() {var form = layui.form;//监听提交form.on('submit(formDemo)', function(data) {layer.msg(JSON.stringify(data.field));var param = JSON.stringify(data.field);$.get('/manage/attribution/save?param='+param , function(data) {console.log(data);layer.msg(data);});return false;});});</script><script>//JavaScript代码区域layui.use('element', function() {var element = layui.element;});</script>

AttributionController.java

package com.cioe.optochina.controller;import java.util.HashMap;
import java.util.Map;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.alibaba.fastjson.JSONObject;
import com.cioe.optochina.entity.Attribution;
import com.cioe.optochina.service.AttributionService;@Controller
@RequestMapping("/manage/attribution")
public class AttributionController {@Autowiredprivate AttributionService attributionService;@RequestMapping(value = "/list")String list() {return "/manage/attribution/list";}@RequestMapping(value = "/add")String add() {return "/manage/attribution/add";}@RequestMapping(value = "/datatable")@ResponseBodyString datatable(Map<String, Object> map) {Page<Attribution> pages = attributionService.findAll(1, 10);map.put("code", 0);map.put("msg", "success");map.put("count", pages.getTotalElements());map.put("data", pages.getContent());String result = JSONObject.toJSONString(map);return result;}@RequestMapping(value = "/save")@ResponseBodyString save(HttpServletRequest request, HttpServletResponse response) {Map<String, Object> map = new HashMap<String, Object>();String param = request.getParameter("param");//这样可以获取前台参数，然后转成对应对象Attribution t = JSONObject.parseObject(param, Attribution.class);attributionService.save(t);map.put("msg", "success");return JSONObject.toJSONString(map);}
}