jsp循环生成div模块并自动绑定相应事件(附源码)

示例：

先看效果:

 

 

 

 

 

前端代码

为每个button赋予不同的id  id="yuyue<%out.print(""+i);%>"

 <% List<PhysicalExamination> list = (List<PhysicalExamination>) request.getSession().getAttribute("physicalExaminations");
                        %>
                        <div id="tjjk">
                            <%
                                if (list != null) {
                                    for (int i = 0; i < list.size(); i++) {
                            %>
                            <div style="width: 30%;height: 200px;display:inline-block;margin-top: 10px;margin-left: 25px">
                                <div class="layui-card" style="border: 1px black double;height: 200px">
                                    <div class="layui-card-header">
                                        <h3 style="color: #E6A23C"><%
                                            out.print(list.get(i).getTjname().toString());%></h3></div>
                                    <div class="layui-card-body">
                                        <div class="gdt"
                                             style="overflow-x:auto;white-space: nowrap;height: 60px;">
                 项目描述:<%out.print(list.get(i).getMs().toString());%></div>
                 <p>检查地址:<%out.print(list.get(i).getAdress().toString());%></p>
                 <p>价格:<%out.print(list.get(i).getMoney());%></p>
                                    
//button触发相应事件  ，id="yuyue<%out.print(""+i);%>"
    <button id="yuyue<%out.print(""+i);%>" data-method="offset" data-type="auto"
                                                value="<%out.print(list.get(i).getTjname().toString());%>"
                                                class="yuyue layui-btn layui-btn-normal" style="margin-left: 80%">预约
                                        </button>

                                    </div>
                                </div>

script：  这里使用了layui，layui官网

MSG消息体请看这篇文章，附带源码    layui中数据表格的详细使用用法 table.render

  layui.use(['layer'], function () {
        var layer = layui.layer;
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
        })

        //触发事件
        $(document).on('click', "#tjjk button", function (e) {
            <%
            if(session.getAttribute("user")!=null){
            %>
            var id = this.getAttribute('id');
            var ids = "#" + id + "";
            var yuyue = $(ids).val();//获取指定预约的id

            layer.open({
                type: 1,
                title: '预约时间',
                area: ['13%', '20%'],//弹框大小  屏幕宽度的80%，高度的80%；//可以使用$('#id,.class')这种方式来指定模板，可以将其理解为指定一个组件，当然也是可以自己去写的,像'<div>我是一个内容</div>'
                // 打开弹窗的回调函数，用于回显页面数据
                content: $('#biaodan'),  //弹窗内容
                cancel: function () {//当弹窗关闭或点击btn内容后执行
                    //隐藏biaodan，使其不显示在循环框中，只有点击才会弹出
                    $("#biaodan").css({"display": "none"})
                },
                btn: ['确定', '取消'],
                yes: function (index) {  //点击确定事件执行
                    var date = $("#test1").val();//获取用户选择的日期
                    $.ajax({//异步请求后端
                        type: "post",
                        url: "${pageContext.request.contextPath}/health/upyuyue",
                        data: {
                            "id":${sessionScope.user.id.toString()},
                            "yuyue": yuyue,
                            "date0": date
                        },
                        dataType: 'json',            //数据格式
                        success: function (MSG) {
                            if (MSG.code == 20000) {
                                layer.msg('预约成功');
                            }
                        }
                    });
                    parent.layer.close(index)
                    // 关闭指定弹窗(当前)
                },
            });
            <%}else {%>
            layer.msg('请登录后操作');
            <%}%>
        })
    })

后端代码：

Control层

 @PostMapping("/upyuyue")
    public MSG upyuyue(Long id,String yuyue, String date0){
        Date date=new Date();
        try {//将前端传会的date的String形式转为Date格式存储到数据库
           date = new SimpleDateFormat("yyyy-MM-dd").parse(date0);
        } catch (ParseException e) {
            //LOGGER.error("时间转换错误, string = {}", s, e);
        }

        boolean issuccess= healthService.upyuyue(id,yuyue,date);
        if(issuccess){
        return MSG.success();
    }
        return MSG.error();

    }

ServiceImpl层

@Override
    public boolean upyuyue(Long id,String yuyue, Date date) {
        Shequjiankang shequjiankang=new Shequjiankang();
        shequjiankang.setId(id);
        shequjiankang.setDate(date);
        shequjiankang.setYuyue(yuyue);
       int r= healthMapper.updateById(shequjiankang);
        if(r==1){
            return true;
        }
        return false;
    }