前端 layui实现批量删除

本文讲解layui批量删除前端操作。

前端table代码如下：

	

	  	

		    
				
				
				
				
				
				
		    
		    

				

					

					
公告标题（点击查看）
					
发布人
					
发送部门
					
发送时间
					
操作
				
		    
		    

				

					

					

					

					

					

					
删除
				
			
		
	

对于thead标题来说，点击input框应当使每行数据都选中，而对于每一列来说，所有列input都选中时thead的input也自动被选中，因此这一块js代码如下：

            form.on('checkbox(allChoose)', function (data) {
                var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
                child.each(function (index, item) {
                    item.checked = data.elem.checked;
                });
                form.render('checkbox');
            });
            form.on('checkbox(itemChoose)', function (data) {
                var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length;
                var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length;
                if (sib == total) {
                    $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked", true);
                    form.render();
                } else {
                    $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked", false);
                    form.render();
                }
            });

由此，批量删除js代码如下所示，由于layui使用变量前要先进行统一注册：

$('.batchDel').click(function () {
                var noList = new Array();
                $("input:checkbox[name='noiddel']:checked").each(function () {
                    noList.push($(this).val());
                });

                if (noList.length == 0) {
                    layer.open({
                        title: '提示',
                        content: '请选择删除信息'
                    });
                    return false;
                }
                layer.confirm('确定要全部删除吗？', {
                    time: 20000, //20s后自动关闭
                    btn: ['确定', '取消'],
                    yes: function (index) {
                        layer.close(index);

                        $.ajax({
                            type: 'POST',
                            url: '/notice/noticeDeleteAll',
                            data: {'noList': noList},
                            dataType: 'json',
                            success: function (data) {
                                if (data.state == "1") {
                                    layer.msg('已删除!', {
                                        icon: 1, time: 1000, end: function () {
                                            window.location.reload();
                                        }
                                    });
                                } else {
                                    layer.msg('删除失败', {
                                        icon: 1, time: 1000, end: function () {
                                            window.location.reload();
                                        }
                                    });
                                }
                            }
                        });
                    }
                });

            });

由于layui的js变量在使用前要先统一注册，因此记得开始前使用下述代码把上述所有js代码包在里面。

layui.use(['layer','jquery','table','form'], function() {
$ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
}