投稿
  1. 极客之音首页
  2. 后端漫谈

扩展：构建ssm项目，使用ajax请求实现layui单表的查询和添加

seven_ • • 后端漫谈 • 阅读 268

导读：本篇文章讲解 扩展：构建ssm项目，使用ajax请求实现layui单表的查询和添加，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

扩展：构建ssm项目，使用ajax请求实现layui单表的查询和添加

要求：

1.构建ssm项目
2.实现layUI单表的查询和添加
要用ajax请求
在上一篇的基础上，进行修改
(仅实现了查询和插入，分页、修改、删除待完善)

运行结果如下：

查询：

在这里插入图片描述
在这里插入图片描述

插入：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

刷新页面：

在这里插入图片描述
在这里插入图片描述

代码整体布局：

在这里插入图片描述

修改的代码部分如下：

GoodsController:

package com.aaa.demo.controller;

import com.aaa.demo.entity.CommonResult;
import com.aaa.demo.entity.Goods;
import com.aaa.demo.service.IGoodsService;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
import java.util.List;

@Controller
public class GoodsController {
    //@Resource
    @Autowired
    private IGoodsService iGoodsService;

    @RequestMapping("/list")
    public String list(Model model){
        //使用业务层对象查询数据
        List<Goods> goodsList=iGoodsService.listAll();
//        CommonResult commonResult=new CommonResult(0,"success",100,goodsList);
//        String i= JSONArray.toJSONStringWithDateFormat(commonResult,"yyyy-MM-dd");
//        //使用model存储数据，springMVC会自动把数据带到页面
//        model.addAttribute("goodsList",i);

        //使用model存储数据，springMVC会自动把数据带到页面
        model.addAttribute("goodsList",goodsList);

        //返回视图名字,springMVC会自动用转发方式调到该页面
        return "goodsList";
    }

    //@ResponseBody:表示该方法返回的内容，直接回传给浏览器，不做页面跳转
    @ResponseBody
    @GetMapping("/listForData")
    public String listForData(HttpServletResponse response){
        //response.setContentType("text/html;charset=utf-8");
        List<Goods> goodsList = iGoodsService.listAll();
//        return  JSONArray.toJSONStringWithDateFormat(goodsList,"yyyy-MM-dd");
        CommonResult commonResult=new CommonResult(0,"success",100,goodsList);
        return JSONArray.toJSONStringWithDateFormat(commonResult,"yyyy-MM-dd");
    }

    @ResponseBody
    @PostMapping ("/insertForDate")
    public String insertForDate(Goods goods){
        System.out.println(goods);
        //response.setContentType("text/html;charset=utf-8");
        int count=iGoodsService.insert(goods);
        CommonResult commonResult=null;
        if (count>0){
            commonResult=new CommonResult(0,"success",count,goods);
        }else{
            commonResult=new CommonResult(0,"success",count,goods);
        }

        return JSONArray.toJSONStringWithDateFormat(commonResult,"yyyy-MM-dd");
    }

    @ResponseBody
    @PostMapping("/updateForDate")
    public String updateForDate(Goods goods){
        //response.setContentType("text/html;charset=utf-8");
        int count=iGoodsService.update(goods);
        CommonResult commonResult=null;
        if (count>0){
            commonResult=new CommonResult(0,"success",count,goods);
        }else{
            commonResult=new CommonResult(0,"success",count,goods);
        }
        return JSONArray.toJSONStringWithDateFormat(commonResult,"yyyy-MM-dd");
    }

    @ResponseBody
    @GetMapping("/deleteForDate")
    public String deleteForDate(Integer goodsId){
        //response.setContentType("text/html;charset=utf-8");
        int count=iGoodsService.delete(goodsId);
        Object data=null;
        if (count>0){
            data= CommonResult.success();
        }else{
            data= CommonResult.fail();
        }
        return JSONArray.toJSONStringWithDateFormat(data,"yyyy-MM-dd");
    }

}

goodsList.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/24
  Time: 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<body>
<%--    ${goodsList}--%>

    <!--要渲染的数据表格-->
    <table id="goods" lay-filter="goods"></table>

    <!--弹出表单-->
    <form class="layui-form" action="" style="display: none;margin:10px" id="goodsFrm" lay-filter="goodsFrm">
        <!--学生编号，修改的时候，需要传这个值-->
        <input type="hidden" id="goodsId" name="goodsId"/>
        <!--设置提交的地址-->
        <input type="hidden" id="action" name="action">

        <div class="layui-form-item">
            <label class="layui-form-label">商品名</label>
            <div class="layui-input-block">
                <input type="text" name="goodsName"  lay-verify="required" placeholder="请输入商品名" autocomplete="off" 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="price"  lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <select name="address" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="河南">河南</option>
                    <option value="河北">河北</option>
                    <option value="山东">山东</option>
                    <option value="湖北">湖北</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生产日期</label>
            <div class="layui-input-block">
                <input type="text" name="produceDate" id="produceDate"  lay-verify="required" placeholder="请输入生产日期" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类别编号</label>
            <div class="layui-input-block">
                <select name="category.categoryId" lay-verify="required"> <%--注意多表关联--%>
                    <option value="">请选择</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="stuBtnSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


    <!--定义表格工具条-->
    <script type="text/html" id="stuBar">
        <div class="layui-btn-container">
            <!--lay-event:用于设置一个按钮的特定事件，事件名字自己定义-->
            <button type="button" class="layui-btn" lay-event="stuAdd">添加</button>
            <button type="button" class="layui-btn layui-btn-danger" lay-event="stuBatchDel">批量删除</button>
        </div>
    </script>
    <script type="text/html" id="stuRowBar">
        <div  class="layui-btn-container">
            <!--lay-event:用于设置一个按钮的特定事件，事件名字自己定义-->
            <button type="button" class="layui-btn layui-btn-sm" lay-event="stuEdit">编辑</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="stuDel">删除</button>
        </div>
    </script>

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

    <script>
        layui.use(['table','layer','laydate','form'], function(){
            var table = layui.table //表格组件
                ,layer=layui.layer  //弹出层
                ,laydate=layui.laydate //日期
                ,form=layui.form //表单
                ,$ = layui.$; //jq

            //渲染日期框
            laydate.render({
                elem: "#produceDate"
            })

            // //加载班级下拉框
            // loadClassInfo();

            //渲染表格数据
            table.render({
                elem: '#goods' //渲染的目标元素
                ,url: '${pageContext.request.contextPath}/listForData' //发送请求获取数据
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,toolbar:"#stuBar" //设置表格工具条
                ,defaultToolbar: ['filter']
                ,width:1000
                ,page:true //启用分页
                ,limit:20 //每页条数
                ,limits:[5,10,20,30] //可选条数
                ,cols: [[  //表格列的定义
                    {title:"全选",type:"checkbox"}
                    ,{field:'goodsId', width:80, title: '商品号', sort: true}
                    ,{field:'goodsName', width:80, title: '商品名'}
                    ,{field:'price', width:80, title: '价格'}
                    ,{field:'produceDate', title: '生产日期', width: '30%', width: 120} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'address', width:80, title: '商品产地'}
                    // ,{field:'categoryId', title: '类别编号', hide:true}
                    ,{field: 'categoryId',title: '类别编号',templet:function (res) {
                            return res.category.categoryId;
                        }}
                    // ,{field:'categoryName', title: '类别名字',with:80, sort: true}
                    ,{field: 'categoryName',title: '品类名称',templet:function (res) {
                            return res.category.categoryName;
                        }}
                    ,{title:"操作",fixed:"right",toolbar:"#stuRowBar"}
                ]]
            });

            //通过table组件监听表格头部工具条触发的事件
            //toolbar(stu):表示table组件要监听stu(lay-filter)这个表格的工具条事件
            //obj:当工具条中的按钮，触发事件时，layui会将事件信息封装为对象，传入到这个参数中
            table.on("toolbar(goods)",function (obj){
                console.log(obj);
                //根据触发的事件做特定处理
                switch (obj.event){
                    case "stuAdd":
                        //弹出表单
                        $("#action").val("${pageContext.request.contextPath}/insertForDate");
                        showStuFrm();
                        break;
                    case "stuBatchDel":
                        //点击批量删除，获取当前选中行的信息
                        var checkStatus = table.checkStatus('stu'); //idTest 即为基础参数 id 对应的值
                        //输出选中行对象属性
                        //console.log(checkStatus);
                        //console.log(checkStatus.data) //获取选中行的数据
                        //console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
                        //console.log(checkStatus.isAll ) //表格是否全选
                        //判断当前是否有选中行
                        if(checkStatus.data.length==0){
                            layer.msg("请先选中一行");
                            return;
                        }
                        var ids = [];
                        for(var i=0;i<checkStatus.data.length;i++){
                            ids.push(checkStatus.data[i].studentId);
                        }
                        //拼接数组中的id: 3,4,5,6
                        ids = ids.join(",");
                        delStu(ids);
                        break;
                }
            })

            //通过table组件，监听行工具条事件
            table.on("tool(stu)",function (obj){
                console.log(obj);
                //判断点击按钮的事件
                switch (obj.event){
                    case "stuEdit":
                        //弹出表单
                        $("#action").val("${pageContext.request.contextPath}/updateForDate");
                        showStuFrm();
                        //为表单设值
                        form.val("stuFrm",obj.data);
                        break;
                    case "stuDel":
                        layer.confirm("确定要删除么?",function (index){
                            var ids = obj.data.studentId;
                            delStu(ids);
                            //关闭确认框
                            layer.close(index);
                        })
                        break;
                }
            })



            //绑定表单中，提交按钮的提交事件
            form.on("submit(stuBtnSubmit)",function (obj){
                console.log(obj);
                $.ajax({
                    url:$("#action").val(),
                    type:"post",
                    data:obj.field, //表单数据
                    dataType:"json",
                    success:function (res){
                        if(res.code==0){
                            layer.msg("添加成功",{icon:6});
                            //关闭表单
                            layer.close(stuFrmIndex);
                            //表单重置
                            $("#stuFrm")[0].reset();
                            // //刷新表格
                            // table.reload('stu', {
                            //     page: {
                            //         curr: 1 //重新从第 1 页开始
                            //     }
                            // });
                        }else{
                            layer.msg("添加失败",{icon:5});
                        }
                    }
                })
            })

            //删除学生
            function delStu(ids){
                $.ajax({
                    url:"${pageContext.request.contextPath}/deleteForDate",
                    data:{ids:ids},
                    type:"post",
                    dataType:"json",
                    success:function (res){
                        if(res.code==0){
                            layer.msg("删除成功!",{icon:6});
                            //重新加载表格
                            //刷新表格
                            table.reload('stu', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                        }else{
                            layer.msg("删除失败!",{icon:5})
                        }
                    }
                })
            }

            <%--//加载班级数据--%>
            <%--function loadClassInfo(){--%>
            <%--    $.ajax({--%>
            <%--        url:"${pageContext.request.contextPath}/list",--%>
            <%--        type: "get",--%>
            <%--        dataType:"json",--%>
            <%--        success:function (res){--%>
            <%--            console.log(res);--%>
            <%--            //循环数据，将班级添加到下拉框中--%>
            <%--            for(var i=0;i<res.data.length;i++){--%>
            <%--                var cls = res.data[i];--%>
            <%--                $("#classId").append("<option value='"+cls.classId+"'>"+cls.className+"</option>")--%>
            <%--            }--%>

            <%--            //重新渲染下拉框--%>
            <%--            form.render('select')--%>
            <%--        }--%>
            <%--    })--%>
            <%--}--%>

            var stuFrmIndex;
            //定义函数弹出学生表单
            function  showStuFrm(){
                //页面层
                stuFrmIndex=layer.open({
                    type: 1,
                    area: ['600px',"400px"],
                    content: $('#goodsFrm')   //弹出页面元素
                });
            }

        })
    </script>
</body>
</html>

关键点注意：

1.日期显示格式：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.关联查询显示：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

返回的数据格式不规范：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118043.html

赞 (0)
seven_的头像seven_bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！