layui+SSM的数据表的增删改实例(利用弹框添加、修改)


Posted in Javascript onSeptember 27, 2019

本人前端知识相当于小白,初学SSM时,了解了layui前端框架,所以开始研究了数据表的增删改查,由于js、ajax知识不是很好,所以百度了相关ajax操作,用以借鉴。希望能帮助有需要的初学者,不喜勿喷,另外有相关不足,希望大家可以指出,谢谢!

注: 以下前端代码都是利用layui的框架,后台是SSM

前端:

<%--
 Created by IntelliJ IDEA.
 User: SL
 Date: 2019/2/26
 Time: 14:03
 To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>layui在线调试</title>
 <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css?t=1545041465443" rel="external nofollow" media="all">
 <script src="${ctx}/static/jquery/jquery-3.3.1.js"></script>
 <style>
  body {
   margin: 10px;
  }

  .demo-carousel {
   height: 200px;
   line-height: 200px;
   text-align: center;
  }
 </style>
</head>
<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="${ctx}/static/layui/layui.js?t=1545041465443" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
 layui.config({
  version: '1545041465443' //为了更新 js 缓存,可忽略
 });

 layui.use(['layer', 'table', 'element'], function () {
  var layer = layui.layer //弹层
   , table = layui.table //表格
   , element = layui.element //元素操作
   , form = layui.form


  //监听Tab切换
  element.on('tab(demo)', function (data) {
   layer.tips('切换了 ' + data.index + ':' + this.innerHTML, this, {
    tips: 1
   });
  });

  //执行一个 table 实例
  table.render({
   elem: '#demo'
   , height: 420
   , url: '${ctx}/news/main/' //数据接口
   , title: '新闻表'
   , page: true //开启分页
   , toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
   , totalRow: true //开启合计行
   , cols: [[ //表头
    {type: 'checkbox', fixed: 'left'}
    , {field: 'id', title: '新闻编号', width: 30, sort: true, fixed: 'left'}
    , {field: 'title', title: '新闻名称', width: 180}
    , {field: 'summary', title: '新闻摘要', width: 180}
    , {field: 'author', title: '作者', width: 70}
    , {field: 'createDate', title: '创建时间', width: 100}
    , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
   ]]
  });

  //监听头工具栏事件
  table.on('toolbar(test)', function (obj) {
   var checkStatus = table.checkStatus(obj.config.id)
    , data = checkStatus.data; //获取选中的数据
   switch (obj.event) {
    case 'add':
     /*layer.msg('添加');*/
     layer.open({
      //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
      type: 1,
      title: "添加新闻信息",
      area: ['420px', '330px'],
      content: $("#popAddTest")//引用的弹出层的页面层的方式加载修改界面表单
     });
     //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示,当然也是异步请求的要数据的修改数据的获取
     /*setFormValue(obj,data);*/
     form.on('submit(submit12)', function (massage) {

      $.ajax({
       url: '${ctx}/news/add/',
       type: 'POST',
       dataType: 'json',
       contentType: "application/json; charset=utf-8",
       data: JSON.stringify({
        /*id: JSON.stringify(data.id),*/
        id: data.id,
        newtitle: massage.field.newtitle,
        newsummary: massage.field.newsummary,
        newauthor: massage.field.newauthor
       }),
       success: function (msg) {
        var returnCode = msg.returnCode;//取得返回数据(Sting类型的字符串)的信息进行取值判断
        if (returnCode == 200) {
         layer.closeAll('loading');
         layer.load(2);
         layer.msg("添加成功", {icon: 6});
         setTimeout(function () {
           location.reload();//刷新页面
           /* layer.closeAll();//关闭所有的弹出层*/
          },
          1000
         );
         //加载层-风格
        } else {
         layer.msg("添加失败", {icon: 5});
        }
       }
      })
      return false;//false:阻止表单跳转 true:表单跳转
     })
     break;
    case 'update':
     if (data.length === 0) {
      layer.msg('请选择一行');
     } else if (data.length > 1) {
      layer.msg('只能同时编辑一个');
     } else {
      layer.alert('编辑 [id]:' + checkStatus.data[0].id);
     }
     break;
    case 'delete':  /*批量删除*/
     if (data.length === 0) {
      layer.msg('请选择需要删除的数据');
     } else {
      /*layer.msg('删除');*/
      /* var checkStatus = table.checkStatus('demo');*/
      var ids = "";
      for(var i=0;i<data.length;i++){
       ids += data[i].id+",";
      }
      alert(ids);
      parent.layer.msg('删除中...', {icon: 16,shade: 0.3,time:2000});
      $.ajax({
       url: '${ctx}/news/mulDelete/',
       type: 'POST',
       dataType: 'json',
       contentType: "application/json; charset=utf-8",
       data: JSON.stringify({
        /*id: JSON.stringify(data.id),*/
        ids: ids
       }),
       success: function (msg) {
        var returnCode = msg.returnCode;//取得返回数据(Sting类型的字符串)的信息进行取值判断
        if (returnCode == 200) {
         layer.closeAll('loading');
         layer.load(2);
         layer.msg("删除成功", {icon: 6});
         setTimeout(function () {
           location.reload();//刷新页面
           /* layer.closeAll();//关闭所有的弹出层*/
          },
          1000
         );
         //加载层-风格
        } else {
         layer.msg("删除失败", {icon: 5});
        }
       }
      })
      return false;//false:阻止表单跳转 true:表单跳转
     }
     break;
   }
   ;
  });

  //监听行工具事件
  table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
   var data = obj.data //获得当前行数据
    , layEvent = obj.event; //获得 lay-event 对应的值
   if (layEvent === 'detail') {
    layer.msg('查看操作');
   } else if (layEvent === 'del') {
    /*layer.confirm('真的删除行么', function(index){
     obj.del(); //删除对应行(tr)的DOM结构
     layer.close(index);
     //向服务端发送删除指令

    });*/

    layer.confirm('真的删除行么', function (index) {
     obj.del(); //删除对应行(tr)的DOM结构
     layer.close(index);
     //向服务端发送删除指令
     $.ajax({
      url: '${ctx}/news/delete/'
      , type: 'POST'
      , data: "{\"id\":\"" + data.id + "\"}"
      , dataType: 'json'
      , contentType: "application/json; charset=utf-8"
      , success: function (msg) {
       var returnCode = msg.returnCode;//取得返回数据(Sting类型的字符串)的信息进行取值判断
       if (returnCode == 200) {
        layer.closeAll('loading');
        layer.load(2);
        layer.msg("删除成功", {icon: 6});
        setTimeout(function () {
          location.reload();//刷新页面
          /* layer.closeAll();//关闭所有的弹出层*/
         },
         1000
        );
        //加载层-风格
       } else {
        layer.msg("删除失败", {icon: 5});
       }
      }
     });
     return false;
    });


   } else if (layEvent === 'edit') {
    /* layer.prompt({
      formType: 2
      ,value: data.summary
     }, function(value, index){
      obj.update({
       summary: value
      });
      layer.close(index);
     });*/

    $("#newtitle").val(data.title);
    $("#newsummary").val(data.summary);
    $("#newauthor").val(data.author);

    layer.open({
     //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
     type: 1,
     title: "修改新闻信息",
     area: ['420px', '330px'],
     content: $("#popUpdateTest")//引用的弹出层的页面层的方式加载修改界面表单
    });
    //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示,当然也是异步请求的要数据的修改数据的获取
    /*setFormValue(obj,data);*/
    form.on('submit(submit11)', function (massage) {

     $.ajax({
      url: '${ctx}/news/update/',
      type: 'POST',
      dataType: 'json',
      contentType: "application/json; charset=utf-8",
      data: JSON.stringify({
       /*id: JSON.stringify(data.id),*/
       id: data.id,
       newtitle: massage.field.newtitle,
       newsummary: massage.field.newsummary,
       newauthor: massage.field.newauthor
      }),
      success: function (msg) {
       var returnCode = msg.returnCode;//取得返回数据(Sting类型的字符串)的信息进行取值判断
       if (returnCode == 200) {
        layer.closeAll('loading');
        layer.load(2);
        layer.msg("修改成功", {icon: 6});
        setTimeout(function () {
          obj.update({
           title: massage.field.newtitle,
           summary: massage.field.newsummary,
           author: massage.field.newauthor
          });//修改成功修改表格数据不进行跳转
          location.reload();//刷新页面
          /* layer.closeAll();//关闭所有的弹出层*/
         },
         1000
        );
        //加载层-风格
       } else {
        layer.msg("修改失败", {icon: 5});
       }
      }
     })
     return false;//false:阻止表单跳转 true:表单跳转
    })
   }
  });

 });
</script>

<%--这里是弹出层表单(修改)--%>
<div class="layui-row" id="popUpdateTest" style="display:none;">
 <div class="layui-col-md10">
  <form class="layui-form layui-from-pane" action="" style="margin-top:20px" method="">
   <div class="layui-form-item"><label class="layui-form-label">新闻标题</label>
    <div class="layui-input-block"><input type="text" name="newtitle" id="newtitle"
              autocomplete="off" placeholder="请输入新闻标题" class="layui-input">
    </div>
   </div>
   <div class="layui-form-item"><label class="layui-form-label">新闻摘要</label>
    <div class="layui-input-block"><input type="text" name="newsummary" id="newsummary"
              autocomplete="off" placeholder="请输入新闻编号" class="layui-input">
    </div>
   </div>
   <div class="layui-form-item"><label class="layui-form-label">作者</label>
    <div class="layui-input-block"><input type="text" name="newauthor" id="newauthor"
              autocomplete="off" placeholder="请输入作者" class="layui-input">
    </div>
   </div>
   <div class="layui-form-item" style="margin-top:40px">
    <div class="layui-input-block">
     <button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="submit11">确认修改</button>
     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
   </div>
  </form>
 </div>
</div>


<%--这里是弹出层表单(添加)--%>
<div class="layui-row" id="popAddTest" style="display:none;">
 <div class="layui-col-md10">
  <form class="layui-form layui-from-pane" action="" style="margin-top:20px" method="">
   <div class="layui-form-item"><label class="layui-form-label">新闻标题</label>
    <div class="layui-input-block"><input type="text" name="newtitle"
              autocomplete="off" placeholder="请输入新闻标题" class="layui-input">
    </div>
   </div>
   <div class="layui-form-item"><label class="layui-form-label">新闻摘要</label>
    <div class="layui-input-block"><input type="text" name="newsummary"
              autocomplete="off" placeholder="请输入新闻编号" class="layui-input">
    </div>
   </div>
   <div class="layui-form-item"><label class="layui-form-label">作者</label>
    <div class="layui-input-block"><input type="text" name="newauthor"
              autocomplete="off" placeholder="请输入作者" class="layui-input">
    </div>
   </div>
   <div class="layui-form-item" style="margin-top:40px">
    <div class="layui-input-block">
     <button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="submit12">确认添加</button>
     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
   </div>
  </form>
 </div>
</div>
</body>
</html>

后台:

package com.sl.controller;

import com.sl.model.NewsDetail;
import com.sl.service.NewsDetailService;
import com.sl.util.DateUtil;
import org.codehaus.jackson.map.ObjectMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.time.format.DateTimeFormatter;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


@Controller
@RequestMapping("/news")
public class NewsDetailController {

 /*注入NewsDetailService*/
 /**
  *
  */
 @Autowired
 private NewsDetailService newsDetailService;

 @RequestMapping("/main")
 @ResponseBody
 private Map<String, Object> queryAll() {
  Map<String, Object> map = new HashMap<>();
  List<NewsDetail> list = newsDetailService.queryAll();
  int count = newsDetailService.queryAllCount();
  map.put("data", list);
  map.put("code", 0);
  map.put("count", count);

  return map;
 }


 @RequestMapping(value = "/delete", method = RequestMethod.POST, produces = "application/json")
 @ResponseBody
 private Map<String, Object> deleteById(@RequestBody HashMap<String, String> map2) {
  Map<String, Object> map = new HashMap<>();
  int id = Integer.parseInt(map2.get("id"));
  int row = newsDetailService.deleteById(id);
  if (row == 1) {
   List<NewsDetail> list = newsDetailService.queryAll();
   int count = newsDetailService.queryAllCount();
   map.put("data", list);
   map.put("returnCode", "200");
   map.put("count", count);
   map.put("code", 0);
   return map;
  } else {
   map.put("code", 1);
   return map;
  }
 }

 @RequestMapping(value = "/mulDelete", method = RequestMethod.POST, produces = "application/json")
 @ResponseBody
 public Map<String, Object> mulDelete(@RequestBody HashMap<String, String> map2){
  Map<String, Object> map = new HashMap<>();

  String ids = map2.get("ids");
  String mulid[] = ids.split(",");
  int row = 0;
  for(int i=0; i<mulid.length; i++){
   row = newsDetailService.mulDelete(mulid[i]);
  }

  if(row != 0){
   List<NewsDetail> list = newsDetailService.queryAll();
   int count = newsDetailService.queryAllCount();
   map.put("code", 0);
   map.put("data", list);
   map.put("count", count);
   map.put("returnCode", "200");
   return map;
  } else {
   map.put("code", -1);
   return map;
  }
 }

 @RequestMapping(value = "/update", method = RequestMethod.POST, produces = "application/json")
 @ResponseBody
 public Map<String, Object> updateById(@RequestBody HashMap<String, String> map2) throws IOException {
  Map<String, Object> map = new HashMap<>();

  int id = Integer.parseInt(map2.get("id"));
  String title = map2.get("newtitle");
  String summary = map2.get("newsummary");
  String author = map2.get("newauthor");
  /*System.out.println(id+" "+title +" "+summary+" "+author);
  System.out.println(1);
  System.out.println(new Date());
  System.out.println(DateUtil.getCurrentDateString());
  System.out.println(2);*/
  NewsDetail newsDetail = new NewsDetail();
  newsDetail.setId(id);
  newsDetail.setTitle(title);
  newsDetail.setSummary(summary);
  newsDetail.setAuthor(author);
  newsDetail.setCreateDate(DateUtil.formatDate(new Date(), "yyyy-MM-dd HH-mm-ss"));
  /*System.out.println(newsDetail.getCreateDate());
  System.out.println(DateUtil.formatDate(new Date(), "yyyy-MM-dd HH-mm-ss"));*/

  int row = newsDetailService.updateById(newsDetail);
  if (row == 1) {
   List<NewsDetail> list = newsDetailService.queryAll();
   int count = newsDetailService.queryAllCount();
   map.put("data", list);
   map.put("count", count);
   map.put("code", 0);
   map.put("returnCode", "200");
   return map;
  } else {
   map.put("code", 1);
   return map;
  }
 }

 @RequestMapping("/update2")
 @ResponseBody
 public Map<String, Object> update2(NewsDetail newsDetail) {
  Map<String, Object> map = new HashMap<>();
  /*newsDetail.setCreateDate(new Date());*/
  int row = newsDetailService.updateById(newsDetail);
  if (row == 1) {
   List<NewsDetail> list = newsDetailService.queryAll();
   int count = newsDetailService.queryAllCount();
   map.put("data", list);
   map.put("count", count);
   map.put("code", 0);
   return map;
  } else {
   map.put("code", 1);
   return map;
  }

 }

 @RequestMapping("/add")
 @ResponseBody
 public Map<String, Object> add(@RequestBody HashMap<String, String> map2) {
  Map<String, Object> map = new HashMap<>();
  String title = map2.get("newtitle");
  String summary = map2.get("newsummary");
  String author = map2.get("newauthor");
  NewsDetail newsDetail = new NewsDetail();
  newsDetail.setTitle(title);
  newsDetail.setSummary(summary);
  newsDetail.setAuthor(author);
  newsDetail.setCreateDate(DateUtil.formatDate(new Date(), "yyyy-MM-dd HH-mm-ss"));
  boolean row = newsDetailService.addNews(newsDetail);
  if (row) {
   List<NewsDetail> list = newsDetailService.queryAll();
   int count = newsDetailService.queryAllCount();
   map.put("data", list);
   map.put("count", count);
   map.put("returnCode", "200");
   map.put("code", 0);
   return map;
  } else {
   map.put("code", 1);
   return map;
  }
 }

}

亲测有效,希望大家提出不足!谢谢!另外后台里面有一个时间转换的类(DateUtil.formatDate()),前端有一个例如url: '${ctx}/news/update/',其中的${cxt}是一个指定的路径,后台写了一个类,这些有需要的,可以看我的博客,谢谢!

以上这篇layui+SSM的数据表的增删改实例(利用弹框添加、修改)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
javascript中闭包closure的深入讲解
Mar 03 Javascript
vue实现在线翻译功能
Sep 27 #Javascript
webpack 处理CSS资源的实现
Sep 27 #Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 #Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 #Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 #Javascript
vue实现全匹配搜索列表内容
Sep 26 #Javascript
vue实现节点增删改功能
Sep 26 #Javascript
You might like
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
详解vue 组件
2020/06/11 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python内置函数property()如何使用
2020/09/01 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
刑事法律意见书
2015/06/04 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Javascript设计模式之原型模式详细
2021/10/05 Javascript
python playwright 自动等待和断言详解
2021/11/27 Python