实现效果如下图
列表界面代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/base.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
.layui-table-cell{
height:auto!important;
white-space:normal;
}
</style>
<head>
<meta charset="utf-8">
<title>菜品列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="${basePath}/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="${basePath}/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">菜名</label>
<div class="layui-input-inline">
<input type="text" name="dishname" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
</div>
</div>
</form>
</div>
</fieldset>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
</div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
</div>
</div>
<script src="${basePath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'table','rate'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
rate=layui.rate;
table.render({
elem: '#currentTableId',
url: '${basePath}/dishes/list/data.json',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{type: 'numbers', width: 80, title: '序号'},
{field: 'dishesName', width: 120, title: '菜名名'},
{field: 'picId', title: '图片', templet: function (d) {
return '<img onclick="showimg(this)" style="display: inline-block; width: 50%; height: 100%;" src="${basePath}/images/' + d.picId + '">';
}},
{field: 'introduce', width: 150, title: '菜品介绍'},
{field: 'salesCount', width: 150, title: '菜品销量(份)'},
{field: 'judge', title: '星级',width: 180,
templet: function(d){
return '<div id="judge'+d.id+'"></div>'}},
{field: 'price', width: 150, title: '价格(元)'},
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
limits: [5,10, 15],
limit: 15,
page: true,
skin: 'line',
parseData:function (res) {
var result;
if(this.page.curr){
result=res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
}
else{
result=res.data.slice(0,this.limit);
}
return{
"code":res.code,
"msg":res.msg,
"count":res.count,
"data":result
};
},
done:function(res, curr, count){
var data = res.data;//返回的json中data数据
for (var item in data) {
//司机星级
rate.render({
elem: '#judge'+data[item].id+'' //绑定元素
, length: 5 //星星个数
, value: data[item].judge //初始化值
, theme: '#E799B0' //颜色
, half: true //支持半颗星
, text: false //显示文本,默认显示 '3.5星'
, readonly: true //只读
});
}
}
});
window.showimg = function (t) {
//页面层
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: '516px',
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: '<img style="display: inline-block; width: 100%; height: 100%;" src="' + t.src + '">'
});
}
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
//执行搜索重载
table.reload('currentTableId', {
page: {
curr: 1
}
, where: {
'dishesname':data.field.dishname
}
}, 'data');
return false;
});
/**
* toolbar监听事件
*/
table.on('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // 监听添加操作
var index = layer.open({
title: '添加菜品',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose:false,
area: ['35%', '70%'],
content: '${basePath}/dishes/add',
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'delete') { // 监听删除操作
var checkStatus = table.checkStatus('currentTableId')
, data = checkStatus.data;
var ids='';
for(var i=0;i<data.length;i++)
{
if(i==data.length-1)
ids+=data[i].id;
else
ids+=data[i].id+",";
}
$.ajax({
type:"post",
url:"${basePath}/dishes/deleteAll",
data:{"ids":ids},
datatype:"text",
success:function (data) {
if(data=='error')
layer.alert("删除失败",function () {
layer.closeAll();
})
else if(data=='ok'){
layer.alert("删除成功",function () {
window.location.reload();
layer.closeAll();
})
}
}
});
}
});
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
var index = layer.open({
title: '编辑菜品',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['40%', '90%'],
content: '${basePath}/dishes/edit/'+data.id,
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
} else if (obj.event === 'delete') {
layer.confirm('真的删除行么', function (index) {
$.ajax({
url : "${basePath}/dishes/delete",
type : "post",
data :{'id':data.id},
dataType : "text",
//成功响应的结果
success : function(data){
if(data == "ok"){
layer.alert("成功",function(){
//parent.window.location.reload();
obj.del();//移除该行
layer.closeAll();//关闭弹窗
});
}else{
layer.alert("失败")
}
}
});
});
}
});
});
</script>
</body>
</html>
列表界面代码图片部分
从后台接受图片在数据库中存储的id,表格中自动填充,basepath文件保存了tomcat相对地址,在下面贴了
{field: 'picId', title: '图片', templet: function (d) {
return '<img onclick="showimg(this)" style="display: inline-block; width: 50%; height: 100%;" src="${basePath}/images/' + d.picId + '">';
}},
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%@ page isELIgnored="false" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--shiro标签库--%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%--设置basePath--%>
<c:set var="basePath" value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}"/>
需要以如下方式引用
至于怎么把数据包装成对象返回给页面,这是ssm框架的基本操作,这里略过.
下面讲一下编辑与上传功能
下面的代码接受从前端传回来的图片,上传到服务器后返回一个地址给界面,界面用一个hidden域保存地址,然后包含在一个表单里封装成对象,返回给后台进行存储.
@RequestMapping("/saveimg")
@ResponseBody
public Map<String, Object> upload(HttpServletRequest servletRequest,@RequestParam("file") MultipartFile file) throws IOException {
//如果文件内容不为空,则写入上传路径
if (!file.isEmpty()) {
//上传文件路径
String filePath1 = servletRequest.getSession().getServletContext().getRealPath("/");
String filePath = servletRequest.getSession().getServletContext().getRealPath("/images");
// 获取原始图片的扩展名
String originalFilename = file.getOriginalFilename();
// 生成文件新的名字
String newFileName = UUID.randomUUID() + originalFilename;
// 封装上传文件位置的全路径
File targetFile = new File(filePath, newFileName);
file.transferTo(targetFile);
Map<String, Object> res = new HashMap<>();
//返回的是一个url对象
res.put("url", newFileName);
return res;
} else {
return null;
}
}
添加页面前端代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/base.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>菜品添加</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="${basePath}/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="${basePath}/css/public.css" media="all">
<style>
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<form class="layui-form" enctype="text/plain">
<div class="layui-form-item">
<label class="layui-form-label" >菜品名称</label>
<div class="layui-input-block">
<input name="dishesName" lay-verify="dishesName" autocomplete="off" placeholder="请输入菜名" class="layui-input" type="text"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">菜品图片</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload1">上传图片</button>
<input type="hidden" id="img_url" name="picId" value=""/>
<div class="layui-upload-list">
<img class="layui-upload-img" width="100px" height="80px" id="demo1"/>
<p id="demoText"></p>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >菜品价格</label>
<div class="layui-input-block">
<input name="price" lay-verify="price" autocomplete="off" placeholder="菜品价格" class="layui-input" type="number"/>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">菜品简介</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" name="introduce" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<button type="submit" class="layui-btn" onclick="update" value="保存"/>
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</form>
<script src="${basePath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
layui.use('upload', function(){
var upload = layui.upload
, $ = layui.jquery;
var uploadInst = upload.render({
elem: '#upload1' //绑定元素
,url: '${basePath}/dishes/saveimg' //上传接口
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
alert("上传成功"+res.url);
document.getElementById("img_url").value = res.url;
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
</script>
<!--要给当前脚本加上th:inline="javascript",tymeleaf才能生效。self.location = /*[[@{/sys_seller/find}]]*/'';-->
<script type="text/javascript" th:inline="javascript">
layui.use(['form', 'layedit'], function(){
var form = layui.form
, layer = layui.layer
, $ = layui.jquery;
form.on('submit(saveBtn)', function (data) {
$.ajax({
type: 'POST',
url: '${basePath}/dishes/save',
dataType: 'text',
data: data.field,//往后台发送的是data.field,即一个{name:value}的数据结构
async: true,
success : function(data){
alert(data);
if(data == "ok"){
layer.alert("成功",function(){
parent.window.location.reload();
});
}else{
layer.alert("失败")
}
}
});
return false;
});
});
</script>
</body>
</html>
编辑功能与添加功能很像,只不过后台调用的是Mapper里的updateSelective方法(可能名字不对,差不多是这个),要先在列表里把选中行的id返回给后台,查到数据后再返回给编辑页面,这里贴一下编辑页面的代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/base.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>菜品编辑</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="${basePath}/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="${basePath}/css/public.css" media="all">
<style>
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<form class="layui-form" enctype="text/plain">
<div class="layui-form-item">
<label class="layui-form-label" >菜品名称</label>
<div class="layui-input-block">
<input name="dishesName" lay-verify="dishesName" value="${dish.dishesName}" autocomplete="off" placeholder="请输入菜名" class="layui-input" type="text"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">菜品图片</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload1">上传图片</button>
<input type="hidden" id="img_url" name="picId" value="${dish.picId}"/>
<div class="layui-upload-list">
<img class="layui-upload-img" width="100px" height="80px" id="demo1" src="${basePath}/images/${dish.picId}">
<p id="demoText"></p>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >菜品价格</label>
<div class="layui-input-block">
<input name="price" lay-verify="price" autocomplete="off" value="${dish.price}" placeholder="菜品价格" class="layui-input" type="number"/>
</div>
</div>
<input type="hidden" name="id" value="${dish.id}">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">菜品简介</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" name="introduce" value="${dish.introduce}" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<button type="submit" class="layui-btn" onclick="update" value="保存"/>
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</form>
<script src="${basePath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
layui.use('upload', function(){
var upload = layui.upload
, $ = layui.jquery;
var uploadInst = upload.render({
elem: '#upload1' //绑定元素
,url: '${basePath}/dishes/saveimg' //上传接口
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
//alert("上传成功"+res.url);
document.getElementById("img_url").value = res.url;
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
</script>
<!--要给当前脚本加上th:inline="javascript",tymeleaf才能生效。self.location = /*[[@{/sys_seller/find}]]*/'';-->
<script type="text/javascript" th:inline="javascript">
layui.use(['form', 'layedit'], function(){
var form = layui.form
, layer = layui.layer
, $ = layui.jquery;
form.on('submit(saveBtn)', function (data) {
$.ajax({
type: 'POST',
url: '${basePath}/dishes/update',
dataType: 'text',
data: data.field,//往后台发送的是data.field,即一个{name:value}的数据结构
async: true,
success : function(data){
alert(data);
if(data == "ok"){
layer.alert("更新成功",function(){
parent.window.location.reload();
});
}else{
layer.alert("失败")
}
}
});
return false;
});
});
</script>
</body>
</html>