前端 layui实现批量删除

最新推荐文章于 2025-05-27 12:34:47 发布

西郊巷外

最新推荐文章于 2025-05-27 12:34:47 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui 前端批量删除

本文链接：https://blog.youkuaiyun.com/weixin_42259631/article/details/81010432

该博客介绍了如何使用layui框架在前端实现批量删除的功能。文章详细讲解了前端table的设置，包括thead标题的交互逻辑，以及当所有列input选中时thead input自动选中的JavaScript代码实现。此外，还提到了在layui中进行批量删除操作的JS代码实现，强调了在使用layui变量前需要进行统一注册。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文讲解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-