方法一:前端循环请求服务器端delete(id)方法

请问如何获得element-ui表格中的勾选项index,以实现批量删除功能

https://segmentfault.com/q/1010000012759131

方法二:传递 string类型字符串。例如: '1,2,3,4'

ids =[1,2,3,4]

url: '/investigator/submitAll/' + ids,
method: 'post'

服务器端接收到: string类型字符串 '1,2,3,4' ,然后string转int。

转换方法:

  1. var tstr = msgsnew.join(','); //数组转字符串
  2. console.log("tstr", tstr);
  3. var tstrtwo = msgsnew.toString(); //数组转字符串
  1. var tarra = tstr.split(','); //字符串转数组

方法三:直接传递数组类型(网上案例均尝试失败)

axios传递数组参数爬坑总结

https://www.jianshu.com/p/68d81da4e1ad

参数:ids=1&ids=2&ids=3

博客主的这个案例成功了,但不知为何,我没有尝试成功!

2 axios向后台传递数组作为参数

https://blog.csdn.net/u012317188/article/details/79752096

JSON.stringify(ids)

服务器端收到的是string类型的 ‘[1,2,3,4]’

综上我采用了 方法二。

(如果有人尝试直接传递数组成功了,请一定留言!)

实现 : elementUI  table 的 多选 :

http://element-cn.eleme.io/#/zh-CN/component/table

代码摘要:

  1. <el-button style="margin:0 0 0 20px;" type="primary" @click="toggleSelection(list)">反选</el-button>
  2. <el-button style="margin:0 0 0 20px;" type="primary" @click="submitAllSelection()">批量提交</el-button>
  3.  
  4. <el-table
  5. ref="multipleTable"
  6. @selection-change="handleSelectionChange">
  7. <el-table-column
  8. type="selection"
  9. width="55"/>
  10.  
  11. data() {
  12. return {
  13. multipleSelection: []
  14. }
  15. }
  16. methods: {
  17. toggleSelection(rows) {
  18. // console.log('rows', rows)
  19. // console.log('multipleTable-start', this.$refs.multipleTable) //table对象
  20. // this.$refs.multipleTable.toggleAllSelection(rows) //全选或全不选
  21. if (rows) {
  22. rows.forEach(row => {
  23. this.$refs.multipleTable.toggleRowSelection(row)// 反选
  24. })
  25. } else {
  26. // this.$refs.multipleTable.clearSelection() //清除选中
  27. }
  28. },
  29. handleSelectionChange(val) {
  30. this.multipleSelection = val //当前选中行的数据
  31. },
  32. submitAllSelection() {
  33. if (this.multipleSelection.length > 0) {
  34. this.$confirm('此操作将提交选中项, 是否继续?', '提示', {
  35. confirmButtonText: '确定',
  36. cancelButtonText: '取消',
  37. type: 'warning'
  38. }).then(() => {
  39. const idList = []
  40. for (const v of this.multipleSelection) {
  41. idList.push(v.DataSourceID)
  42. }
  43. this.submitAll(idList)
  44. }).catch(() => {
  45. this.$notify({
  46. title: '提示',
  47. message: '已取消批量提交',
  48. type: 'info',
  49. duration: 2000
  50. })
  51. })
  52. } else {
  53. this.$notify({
  54. title: '提示',
  55. message: '请勾选要提交的项!',
  56. type: 'warning',
  57. duration: 2000
  58. })
  59. }
  60. },
  61. submitAll(idList) {
  62. // const idList = JSON.stringify(ids)
  63. // console.log('idList', idList)
  64. submitAll(idList).then((response) => {
  65. if (response.success) {
  66. console.log('response', response.data)
  67. for (const v of this.multipleSelection) {
  68. const index = this.list.indexOf(v)
  69. this.list[index].HasSubmitted = true
  70. }
  71. this.$notify({
  72. title: '成功',
  73. message: '批量提交成功',
  74. type: 'success',
  75. duration: 2000
  76. })
  77. } else {
  78. this.$notify({
  79. title: '失败',
  80. message: '批量提交失败',
  81. type: 'danger',
  82. duration: 3000
  83. })
  84. }
  85. })
  86. }
  87. }
  88.  
  89. export function submitAll(idList) {
  90. return request({
  91. url: '/investigator/submitAll/' + idList,
  92. method: 'post'
  93. })
  94. }
  95.  
  96. 根据axios 封装出request 以简化请求。

  

C# webapi控制器

  1. /// <summary>
  2. /// 批量提交
  3. /// </summary>
  4. /// <param name="ids"></param>
  5. /// <returns></returns>
  6. [HttpPost]
  7. [Route("SubmitAll/{idList}")]
  8. public ApiResult SubmitAll(string idList)
  9. {
  10. var result = new ApiResult();
  11. result.success = false;
  12.  
  13. if (!String.IsNullOrEmpty(idList) && !String.IsNullOrEmpty(idList.Trim()))
  14. {
  15. string[] strArray = idList.Split(',');
  16. if (strArray.Length > 0)
  17. {
  18. int[] ids = new int[] { };
  19. ids = Array.ConvertAll<string, int>(strArray, s => int.Parse(s));
  20. var num = manage.SubmitAll(ids, User.Identity.GetUserId<int>());
  21. result.success = true;
  22. result.data = num;
  23. }
  24.  
  25. }
  26.  
  27. return result;
  28. }

  

// 数据库访问层

  1. public int SubmitAll(int[] idList, int userId)
  2. {
  3. int num = 0;
  4. using (var pmdb = new ProjectEntities())
  5. {
  6. using (var tran = pmdb.Database.BeginTransaction())
  7. {
  8. try
  9. {
  10. var list = pmdb.T_Investigator.Where(d => idList.Contains(d.InvestigatorID) && d.CreateUserID == userId && d.HasSubmitted == false).ToList();
  11. if (list.Count > 0)
  12. {
  13. foreach (var item in list)
  14. {
  15. item.HasSubmitted = true;
  16. }
  17. num = pmdb.SaveChanges();
  18. tran.Commit();
  19. }
  20. }
  21. catch (Exception ex)
  22. {
  23. tran.Rollback();//回滚
  24. throw ex;
  25. }
  26. }
  27. }
  28.  
  29. return num;
  30. }

  

vue axios 批量删除 数组参数的更多相关文章

  1. vue+axios通过formdata提交参数和上传文件

    demo.vue 文件 <template> <div class="demo"> <input v-model="importForm.m ...

  2. vue.js 批量删除跟全选,反选效果

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  3. ajax 传递数组参数

    一.ajax 传递数组参数 需要添加: traditional: true, let typeIDArr = [,,,,,]; var that = this; var url = '@Url.Act ...

  4. springMVC 接收数组参数,mybatis 接收数组参数,mybatis批量插入/批量删除案例

    案例是给一个用户赋予多个权限,多个权限用其对应的主键 id 为参数,组成了 一个id数组,传给springMVC,然后springMVC传给mybatis,然后mybatis批量插入.其实类似的场景还 ...

  5. springmvc使用数组接收页面商品列表批量删除传过来的参数,并完成批量删除的操作。

    1.1 需求 在商品列表页面选中多个商品,然后删除. 1.2 需求分析 此功能要求商品列表页面中的每个商品前有一个checkbox,选中多个商品后点击删除按钮把商品id传给controller,根据商 ...

  6. Mybatis 插入与批量插入以及多参数批量删除

    实体类: import java.io.Serializable; public class AttachmentTable implements Serializable { private sta ...

  7. Vue小案例 之 商品管理------批量删除与商品数量的调整

    通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...

  8. Mybatis 针对ORACLE和MYSQL的批量插入与多参数批量删除

    今天利用Mybatis的<for each>标签做oracle的批量插入数据时,发现和MySQL数据库有区别.在此记录下,以防之后再踩坑. 一.批量插入: 1.controller: /* ...

  9. Servlet 获取 数组id进行批量删除

    把获取的复选框选中的 id(一般来说都是根据id 进行批量删除的) 从jsp页面 传值到Servlet中 jsp点击事件中: var array=[];  //先声明一个数组变量 var ids=$( ...

随机推荐

  1. Linux系统下如何运行.sh文件

    在Linux系统下运行.sh文件有两种方法,比如我在root目录下有个datelog.sh文件 第一种(这种办法需要用chmod使得文件具备执行条件(x): chmod u+x datelog.sh) ...

  2. react基础篇 整理(一)

    备注不知道为啥不能到出图片,详细知识自己百度一下就可以了,很简单的.画这个是为了更好的梳理知识,公司有个App项目,项目可控,所以尝试一下用React-native去做一下试试.

  3. 我的IT学习资源宝典

    1.关于idea的详细学习博客知识网站:https://blog.csdn.net/column/details/15222.html?&page=1 2.关于Web的详细学习博客知识网站:h ...

  4. 回顾4180天在腾讯使用C#的历程,开启新的征途

    今天是2018年8月8日,已经和腾讯解除劳动关系,我的公司正式开始运营,虽然还有很多事情需要理清,公司官网也没有做,接下来什么事情都需要自己去完成了,需要一步一个脚印去完善,开启一个新的征途,我将在博 ...

  5. Java面试大纲-java面试该做哪些准备,java开发达到这样的水平可以涨工资

    Java培训结束,面临的就是毕业找工作.在找工作时,就要针对性地做充分的面试准备.准备不充分的面试,完全是浪费时间,更是对自己的不负责. 上海尚学堂Java培训整理出Java面试大纲,其中大部分都是面 ...

  6. [Swift]LeetCode810. 黑板异或游戏 | Chalkboard XOR Game

    We are given non-negative integers nums[i] which are written on a chalkboard.  Alice and Bob take tu ...

  7. [Swift]LeetCode854. 相似度为 K 的字符串 | K-Similar Strings

    Strings A and B are K-similar (for some non-negative integer K) if we can swap the positions of two ...

  8. [Swift]LeetCode984. 不含 AAA 或 BBB 的字符串 | String Without AAA or BBB

    Given two integers A and B, return any string S such that: S has length A + B and contains exactly A ...

  9. Java部署项目命令学习小结

    前言: 暂无 零:java -h 和很多linux命令一样,我们第一步先通过“java -h”命令查看java命令的使用语法,其输出如下 [root@wxapp203 basesoft]# java ...

  10. Docker基础命令和时区问题

    Docker 命令 1. 安装Docker # ubuntu系统安装 $ sudo apt install docker-ce # 启动docker $ sudo systemctl start do ...