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);}
}

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

Spring MVC + Hibernate JPA + Bootstrap 搭建的博客系统
Spring MVC + Hibernate JPA + Bootstrap 搭建的博客系统 Demo 相关阅读: 1.Spring MVC+Hibernate JPA+ Bootstrap 搭建的博 ...
HOW-TO：带有Spring MVC的Tomcat中的自定义错误页面
默认的Tomcat错误页面看起来很可怕. 此外,它们可能会公开有价值的信息,包括服务器版本和异常堆栈跟踪. Servlet规范提供了一种通过web.xml配置异常行为的方法. 可以配置对特定Java异 ...
java怎么设置404界面_如何使用Spring MVC显示自定义的404 Not Found页面
本篇文章给大家带来的内容是关于如何使用Spring MVC显示自定义的404 Not Found页面,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 不知道大家对千篇一律的404 No ...
ajax bootstrap 进度条,Bootstrap进度条与AJAX后端数据传递结合使用实例详解
很多时候,我们执行页面上某个URL请求的时候,需要有等待的时间.如果是直接的页面跳转,浏览器会有缓冲进度展示,但是如果是AJAX,我觉得应该自己加上进度条,等待数据全部接收到之后,进度条消失,展示页面 ...
Spring MVC之基于xml配置的web应用构建
2019独角兽企业重金招聘Python工程师标准>>> 更多spring博文参考: http://spring.hhui.top/ 直接用SpringBoot构建web应用可以说非常 ...
Spring MVC中基于自定义Editor的表单数据处理技巧
本文出处:http://blog.csdn.net/chaijunkun/article/details/8642642,转载请注明.由于本人不定期会整理相关博文,会对相应内容作出完善.因此强烈建议在 ...
Spring MVC之基于java config无xml配置的web应用构建
更多spring相关博文参考: spring.hhui.top 前一篇博文讲了SpringMVC+web.xml的方式创建web应用,用过SpringBoot的童鞋都知道,早就没有xml什么事情了,其 ...
ASP.NET MVC +Layui 实现图片上传功能
ASP.NET MVC +Layui 实现图片上传功能这是一个前端的添加功能只展示图片添加的前端代码 <div class="layui-upload"> < ...
如何让Spring MVC显示自定义的404 Not Found页面
不知道大家对千篇一律的404 Not Found的错误页面是否感到腻歪了?其实通过很简单的配置就能够让Spring MVC显示您自定义的404 Not Found错误页面. 在WEB-INF的web. ...

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

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

最新文章

热门文章