用layui编写刷新和删除按钮的功能

用layui编写刷新和删除按钮的功能

学习目标：

用layui来编写刷新和删除按钮的功能，用layui编写前端，用springboot编写后端。

学习产出：

对于数据表格的展示可以参考以下地址：

**layui结合springboot实现前端数据表格的动态展示点击链接

**刷新按钮功能：**每点一次按钮，该页面就刷新一次
**删除按钮功能：**当点击删除按钮的时候，会弹出以下页面，点击确认选中的数据会被删除，同时可以删除多条记录，同时同步到数据库。

学习内容：

html：

 <div class="layui-row" style="margin-top: 20px;">
            <script type="text/html" id="headerbar">
        <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button>
        <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
         <button class="layui-btn layui-btn-sm" lay-event="detail">详情</button>
            </script>
   </div>

js：

//监听行工具，拿到前端选中的行的信息，可以是多行。
 table.on('toolbar(req-list)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        data=checkStatus.data;
        var arr = new Array();
        // console.log(checkStatus);
        //关于删除方面的方法
        function getRowFexId(value){
            for (var i = 0; i < data.length; i++) {
                arr.push(data[i][value]);
            }
            return arr;
        };
        //关于删除方面的方法
        function del(){
            getRowFexId("demandId");
            // console.log(getRowFexId(demandId));
        };
       switch(obj.event) {
            case 'refresh':
                //refresh
                window.location.reload();
                break;
           
            case 'del':
                layer.confirm('确认删除吗？', function (index) {
                    //删除处理
                    var ids;
                    del();
                    console.log(arr.join(","));
                    $.ajax({
                    //这里的url是贞洁关联后端的
                        url:'http://localhost:8092/demand/DeleteDemandByIds',
                        type:'get',
                        data:{'ids':arr.join(",")},//向服务器端发送要删除的id
                        success:function(res){
                            if(res.code== '200') {
                                layer.msg(res.msg, {icon: 6});
                                //刷新当前页
                                table.reload('req-list', {
                                    page: {
                                        curr: $(".layui-laypage-em").next().html()
                                    }
                                });
                            }
                            else{
                                layer.msg(res.msg,{icon:5});
                                // window.location.reload();
                                //刷新当前页
                                table.reload('req-list',{
                                    page:{
                                        curr: $(".layui-laypage-em").next().html()
                                    }
                                });
                            }

                        }
                    });
                    layer.close(index);
                });
                break;
  
    });

controller：

@GetMapping("/DeleteDemandByIds")
    public ResultReturn DeleteDemandById(@RequestParam(value = "ids", required = true) String ids){
        System.out.println(ids);
        return demandService.DeleteDemandById(ids);
    }

service：

public ResultReturn DeleteDemandById(String ids);

serciceImpl：

 public ResultReturn DeleteDemandById(String ids) {

        if(ids == null){
            return ResultReturnUtil.fail(MsgConstant.MSG_OPERATION_FAILED);
//            return 0;
        }
            String[] ArrayIds=ids.split(",");
            int[] result = new int[ArrayIds.length];
        List<Integer> list=new ArrayList<>(ArrayIds.length);
            for (int i = 0; i < result.length; i++) {
                result[i] = Integer.valueOf(ArrayIds[i]);
                list.add(result[i]);
                System.out.println(result[i]);
            }
        System.out.println(list);
        demandMapper.DeleteDemandById(list);
//        return demandMapper.DeleteDemandById(list);
        return ResultReturnUtil.success(MsgConstant.MSG_OPERATION_SUCCESS);
    }

mapper：

``Integer DeleteDemandById(List<Integer> ids);

mapper.xml

<!--    根据id进行删除操作-->
    <delete id="DeleteDemandById">
            delete from demand_basic_info where demand_id in
        <foreach item="id" index="index" collection="list"
                 open="(" separator="," close=")">
            #{id}
        </foreach>
    </delete>

这里的ResultReturn实体类，请看点击链接