layui的单个删除和批量删除

12 篇文章 0 订阅

最近需要批量删除的功能,其实和单个删除差不多,只不过批量删除需要将id集合分散,,因为我用的是spring的jpa,所以不需要写sql,只需要调用相应的接口就行,代码如下

1.接口:

public void del(String id);

2.接口实现:

public void del(String id) {
        this.delete(TestDel.class, id);
    }

3.Controller:

单个删除:

@RequestMapping("/delSingle")
    @ResponseBody
    public Layui deleSingle(HttpServletRequest request){
        try {
            String id = request.getParameter("id");
            service.delete(TestDel.class, id);
            return Layui.data("删除成功");
        } catch (Exception e) {
            return Layui.data("删除失败");
        }
    }

批量删除:

@RequestMapping("/delAll")
    @ResponseBody
    public Layui removes(String isStr){
        if (isStr!=null &&!isStr.equals("")) {
            String[] ids = isStr.split(",");
            for (String id : ids) {
                if(id!=null &&!id.equals("")){
                    service.del(id);
                }
            }
        }
        return Layui.data("删除成功");
    }

4.前端页面

5.js:

layui.use(['table','layer','laytpl'],function(){
        var table = layui.table;
        var layer = layui.layer;        
        
        //单个删除
        table.on('tool(resume)', function(obj){
            var tableData = obj.data;
            var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'del'){
                layer.confirm('真的删除此行数据么', function(index){
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                         url: "${base}/testDel/delSingle.htm" ,
                          data:{"id":tableData.id},
                           success: function (data) {
                            if(data.code==0){
                                obj.del();
                                table.reload();
                             }
                             layer.msg(data.msg);
                          }
                    });
                });
            }    
        });
        
        //批量删除
        $("#datadel").on('click',function(){
            //获取选中状态            
            var checkStatus = table.checkStatus('tab');
            //获取选中数量
            var selectCount = checkStatus.data.length;
            if(selectCount == 0){
                layer.msg('批量删除至少选中一项数据',function(){});
                return false;
            }
            layer.confirm('真的要删除选中的项吗?',function(index){
                layer.close(index);
                index = layer.load(1, {shade: [0.1,'#fff']});
                
                   var isStr="";
                for(var i=0; i<selectCount; i++){
                    isStr = isStr + "," + checkStatus.data[i].id;
                }
                     $.ajax({
                    type:'post',
                    data:{"isStr":isStr},
                    url:'${base}/testDel/delAll.htm',
                    success:function(data){
                        if(data.code==0){
                            $('#seach').click();
                          }
                        layer.close(index);
                        layer.msg(data.msg);
                    },error:function(code){   
                        parent.layer.msg('操作失败!',{icon: 5,time:1000});  
                    }
                });
            })
        });               
});

  • 6
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
Layui中,可以通过laydate组件实现单个输入框选择多个时间的功能。具体实现方法如下: 1. 在HTML页面中引入Layui和laydate组件的相关文件: ```html <!-- 引入Layui的核心文件 --> <script src="layui/layui.js"></script> <link rel="stylesheet" href="layui/css/layui.css"> <!-- 引入laydate组件的文件 --> <script src="layui/laydate/laydate.js"></script> ``` 2. 在HTML页面中添加一个输入框,并为其设置一个唯一的ID: ```html <input type="text" class="layui-input" id="test" placeholder="请选择时间"> ``` 3. 在JavaScript中初始化laydate组件,并设置其类型为“日期时间范围”: ```javascript // 初始化laydate组件 laydate.render({ // 绑定输入框的ID elem: '#test', // 设置类型为日期时间范围 type: 'datetime', // 设置范围选择模式 range: '~' }); ``` 4. 运行页面,单击输入框即可在弹出的日期时间选择器中选择多个时间范围。 完整的HTML和JavaScript代码如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui实现单个输入框选择多个时间</title> <!-- 引入Layui的核心文件 --> <script src="layui/layui.js"></script> <<link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md12"> <input type="text" class="layui-input" id="test" placeholder="请选择时间"> </div> </div> </div> <!-- 引入laydate组件的文件 --> <script src="layui/laydate/laydate.js"></script> <script> // 初始化laydate组件 laydate.render({ // 绑定输入框的ID elem: '#test', // 设置类型为日期时间范围 type: 'datetime', // 设置范围选择模式 range: '~' }); </script> </body> </html> ```
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值