layui中删除与批量删除，调用同一个接口

已于 2022-05-26 15:53:20 修改
阅读量4.4k 收藏 13
点赞数 2
分类专栏： java java学习 文章标签： layui
于 2018-08-27 08:25:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QYHuiiQ/article/details/82080745
版权

页面展示：

前端jsp：

删除单个：

批量删除：data是一个数组，将其拼接成ids（list）

后端，封装一个专门接收前端传过来的id列表的工具类：

controller：

service层：

mapper：

QYHuiiQ
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Layui表格行添加编辑删除操作和保存数据代码
06-11
Layui是一个流行的JavaScript框架，它提供了丰富的组件和API，使得这些操作变得简单易行。本示例将详细介绍如何使用Layui实现表格行的添加、编辑、删除操作，并且在编辑后如何保存数据。 首先，我们需要了解Layui的...
前后端能不能这样约定接口
hezheqiang的专栏
08-28 1338
现在开发的项目，尤其是管理后台的项目，CURD操作是非常频繁的，如果接口约定的不好，后端就需要开发各种Api，前端人员也需要在Api文件中添加多个Api，开发成本不知不觉就增加了。 所以，针对比较普遍的CURD操作，前后端在接口上就需要制定一些约定。 一、添加和修改 1.添加操作和修改操作约定成一个接口。 添加一般情况下是没有ID的，修改一般情况下是有ID的。两个操作的其他字段其实都是一样的...
商品信息单个删除和批量删除
weixin_47267628的博客
05-31 764
商品信息删除 1.根据ID发送ajax请求删除商品信息 button按钮 <button type="button" onclick="deleteProd(${p.pId})" class="btn btn-default">删除</button> 按钮单击事件 <%-- 使用ajax发送删除商品信息 --%> function deleteProd(pId) { alert(pId); $.ajax({ url:"${pageC
apiFox如何批量删除接口？
最新发布
Deng_Xian_Sheng的博客
04-17 398
本项目通过Python脚本实现了自动化控制鼠标的功能。包括自动获取鼠标坐标和在特定坐标上执行点击操作。这些脚本可以用于自动化测试、游戏作弊、自动化办公等场景。
增加+删除+批量删除+修改+查询+排序+全选
blgktlp的博客
11-22 430
table tr:nth-child(even){                 background-color: gainsboro;             }             table tr:nth-child(odd){                 background-color: darkgrey;             }              
列表批量删除和单个删除共用一个方法传递集合到Controller
weixin_30335575的博客
08-10 652
前台方法（前台部分用的bootstrap）： 后台Controller： 这里的id实际就是前台传过来的集合，这种方式，后台的 集合接收变量名称可以随意起名，因为前台传过来的就是一个集合，本身就没有名字，所以这里可以用 “id” 前台传送的参数形式： 转载于:https://www.cnblogs.com/libin6505/p/9455...
单条删除和批量删除的思路和实现
weixin_51625266的博客
08-14 1381
单条删除和批量删除 5.1 目标 前端的“单条删除”和“批量删除”在后端合并为同一套操作。合并的依据是：单 条删除时 id 也放在数组中，后端完全根据 id 的数组进行删除 5.2 思路 点击总删除和单个删除按钮，弹出模态框，显示你要删除的角色姓名，将其封装为一个数组，然后用户确认，发送ajax请求，后台进行删除 代码（后端） RoleHandler @ResponseBody @RequestMapping("/role/remove/by/role/id/array.json") public Resu
layui-Excel.rar
05-18
本资源“layui-Excel.rar”提供了一个集成layui功能的示例，主要涉及图片上传、Excel数据处理以及与数据库的交互，尤其适用于需要进行批量数据导入和管理的场景。 1. layui框架介绍： layui是一款基于前端模块化...
基于SSM+Layui的图书管理系统+controller.zip
12-01
3. **MyBatis**：是一个持久层框架，它简化了SQL与Java代码的交互，通过XML或注解的方式配置和映射原生信息，将接口和Java的POJOs(Plain Old Java Objects，普通的Java对象)映射成数据库中的记录。MyBatis在图书管理...
AliossUploader：layui 阿里云OSS上传插件
06-09
AliossUploader是一款轻量级的JavaScript插件，它利用layui的模块化设计，为开发者提供了与阿里云OSS交互的API接口，支持文件的上传、删除等操作。这款插件特别适用于需要实现文件上传功能的Web应用程序，如内容...
基于SpringBoot+Mybatis+layui(学生成绩管理系统，包含数据库脚本文件).zip
06-01
这是一个基于SpringBoot、Mybatis和layui技术栈的学生成绩管理系统源码，旨在提供一个毕业设计的参考项目。下面将详细介绍这个系统的核心知识点和技术要点。 1. **SpringBoot**: SpringBoot是Spring框架的一个扩展...
layui之数据表格--与后台交互获取数据的方法
10-16
今天小编就为大家分享一篇layui之数据表格--与后台交互获取数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
单条删除与批量删除
weixin_44512123的博客
04-26 1796
单条删除与批量删除 除了新增和修改功能就是删除功能了，很多时候都是同时出现的，删除就是把一些不要的数据删除掉，单条删除就是一条一条的删除一次只能删除一条，批量删除就是多条数据同时一起删除。如果需要几十条数据甚至上百条数据时候，用单条删除就要一条条地删除这样会很麻...
Layui调用接口使用心得
weixin_47035997的博客
08-01 2668
Layui使用过程中出现的部分问题
Java MyBatis根据id来删除数据库数据（单个删除&批量删除）
阿博的博客
07-22 8029
Java MyBatis根据id来删除数据库数据（单个删除&批量删除）
lay ui的用法，后台管理，调取后端接口
weixin_43118088的博客
06-29 9794
-学习框架最好的办法是就是看官方文档，如果看不懂。。。。 那就百度一下，看看别人怎么写的， 自己一开始也是被这个折磨的欲仙欲死，最后没办法死啃文档才弄懂了 一部分； 言归正传： 需求，后台管理，分页，跳转… 第一步下载layui.js，并引用(废话) table模块快速使用 <只需这样一句就好> ...
使用Layui调用API的详细步骤与实例
奇妙的Bug之旅
12-19 927
使用Layui调用API的详细步骤与实例在Web开发中，我们经常需要调用后端的API来获取数据或者执行一些操作。Layui是一个前端UI框架，它提供了一些方便的方法来调用API。本文将详细介绍如何使用Layui来调用API，并提供相关的实例。
fastadmin引入layui,并调用layui接口
Harry Blog
04-21 852
fastadmin 引入layui,并调用layui接口
关于LayUIAdminPro使用table.render分页时，另外调用接口查询数据的数量的方法（LayUI踩坑篇四）
小楊同学的笔记本
07-01 1771
如果我们的项目中，查询数量需要另外调用的接口时，例如，我们项目中使用到find来查询数据，count方法来查询数量。那么，我们需要在table.render中再而外的发起一次请求来查询数量的总数。
layui的table怎么调用两个接口
06-03
在 layui 的 table 中，可以通过配置 `url` 参数来指定数据接口。如果需要调用两个接口来获取数据，可以使用 layui 的异步数据表格功能，即使用 `data` 函数来获取数据，如下所示： ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '', // 这里先不指定 url，后面再通过 data 函数获取数据 cols: [[ {field:'id', title:'ID', width:80}, {field:'username', title:'用户名', width:120}, {field:'sex', title:'性别', width:80, sort:true}, {field:'city', title:'城市', width:100}, {field:'sign', title:'签名', width:200}, {field:'experience', title:'积分', width:80, sort:true}, {field:'score', title:'评分', width:80, sort:true}, {field:'classify', title:'职业', width:100}, {field:'wealth', title:'财富', width:135, sort:true}, ]], page: true, data: function (params) { // 这里通过 params 中的 page 和 limit 参数来获取数据 var page = params.page || 1; var limit = params.limit || 10; // 调用第一个接口获取数据 return $.ajax({ url: '/api/list1', data: { page: page, limit: limit }, dataType: 'json' }).then(function (res) { // 如果第一个接口返回的数据不足一页，则调用第二个接口获取剩余数据 if (res.data.length < limit) { var remaining = limit - res.data.length; return $.ajax({ url: '/api/list2', data: { page: 1, limit: remaining }, dataType: 'json' }).then(function (res2) { // 将第二个接口返回的数据合并到第一个接口返回的数据中 var data = res.data.concat(res2.data); return { code: 0, msg: '', count: res.count + res2.count, data: data }; }); } return res; }); }, }); }); ``` 在上面的代码中，我们通过 `data` 函数来获取数据。在 `data` 函数中，我们首先获取当前页面和每页显示的数据量，然后调用第一个接口 `/api/list1` 来获取数据。如果第一个接口返回的数据不足一页，我们会调用第二个接口 `/api/list2` 来获取剩余数据，并将它们合并到第一个接口返回的数据中。最后将合并后的数据返回给表格组件。 需要注意的是，通过 `data` 函数来获取数据时，需要手动处理分页功能，即根据当前页和每页显示的数据量来获取数据，然后将数据返回给表格组件。因此，需要在表格组件的配置项中将 `url` 参数设置为空，否则会覆盖 `data` 函数的设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

QYHuiiQ

听说打赏的人工资翻倍~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值