前端 layui实现批量删除

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

前端table代码如下：

	<div class="layui-form news_list">
	  	<table class="layui-table">
		    <colgroup>
				<col width="50" />
				<col />
				<col width="9%"/>
				<col width="9%"/>
				<col width="18%"/>
				<col width="12%"/>
		    </colgroup>
		    <thead>
				<tr>
					<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose" id="allChoose" /></th>
					<th style="text-align:left;">公告标题（点击查看）</th>
					<th>发布人</th>
					<th>发送部门</th>
					<th>发送时间</th>
					<th>操作</th>
				</tr>
		    </thead>
		    <tbody>
				<tr th:each="noticeVo:${noticeVos}">
					<td class="news_content"><input type="checkbox" name="noiddel" lay-skin="primary" lay-filter="itemChoose" th:value="${noticeVo.noId}"/></td>
					<td style="text-align:left;"><a th:text="${noticeVo.noTitle}" th:onclick="'javascript:noticeInfo('+ ${noticeVo.noId} + ')'" href="javascript:;"></a></td>
					<td th:text="${noticeVo.empName}"></td>
					<td th:text="${noticeVo.deName}"></td>
					<td th:text="${noticeVo.dataString}"></td>
					<td><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" th:onclick="'javascript:nodel(this,'+ ${noticeVo.noId} + ')'" href="javascript:;"><i class="layui-icon"></i>删除</a></td>
				</tr>
			</tbody>
		</table>
	</div>

对于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;
}