vue axios 批量删除 数组参数
方法一:前端循环请求服务器端delete(id)方法
请问如何获得element-ui表格中的勾选项index,以实现批量删除功能
https://segmentfault.com/q/1010000012759131
方法二:传递 string类型字符串。例如: '1,2,3,4'
ids =[1,2,3,4]
服务器端接收到: string类型字符串 '1,2,3,4' ,然后string转int。
转换方法:
- var tstr = msgsnew.join(','); //数组转字符串
- console.log("tstr", tstr);
- var tstrtwo = msgsnew.toString(); //数组转字符串
- var tarra = tstr.split(','); //字符串转数组
方法三:直接传递数组类型(网上案例均尝试失败)
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
代码摘要:
- <el-button style="margin:0 0 0 20px;" type="primary" @click="toggleSelection(list)">反选</el-button>
- <el-button style="margin:0 0 0 20px;" type="primary" @click="submitAllSelection()">批量提交</el-button>
- <el-table
- ref="multipleTable"
- @selection-change="handleSelectionChange">
- <el-table-column
- type="selection"
- width="55"/>
- data() {
- return {
- multipleSelection: []
- }
- }
- methods: {
- toggleSelection(rows) {
- // console.log('rows', rows)
- // console.log('multipleTable-start', this.$refs.multipleTable) //table对象
- // this.$refs.multipleTable.toggleAllSelection(rows) //全选或全不选
- if (rows) {
- rows.forEach(row => {
- this.$refs.multipleTable.toggleRowSelection(row)// 反选
- })
- } else {
- // this.$refs.multipleTable.clearSelection() //清除选中
- }
- },
- handleSelectionChange(val) {
- this.multipleSelection = val //当前选中行的数据
- },
- submitAllSelection() {
- if (this.multipleSelection.length > 0) {
- this.$confirm('此操作将提交选中项, 是否继续?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- const idList = []
- for (const v of this.multipleSelection) {
- idList.push(v.DataSourceID)
- }
- this.submitAll(idList)
- }).catch(() => {
- this.$notify({
- title: '提示',
- message: '已取消批量提交',
- type: 'info',
- duration: 2000
- })
- })
- } else {
- this.$notify({
- title: '提示',
- message: '请勾选要提交的项!',
- type: 'warning',
- duration: 2000
- })
- }
- },
- submitAll(idList) {
- // const idList = JSON.stringify(ids)
- // console.log('idList', idList)
- submitAll(idList).then((response) => {
- if (response.success) {
- console.log('response', response.data)
- for (const v of this.multipleSelection) {
- const index = this.list.indexOf(v)
- this.list[index].HasSubmitted = true
- }
- this.$notify({
- title: '成功',
- message: '批量提交成功',
- type: 'success',
- duration: 2000
- })
- } else {
- this.$notify({
- title: '失败',
- message: '批量提交失败',
- type: 'danger',
- duration: 3000
- })
- }
- })
- }
- }
- export function submitAll(idList) {
- return request({
- url: '/investigator/submitAll/' + idList,
- method: 'post'
- })
- }
- 根据axios 封装出request 以简化请求。
C# webapi控制器
- /// <summary>
- /// 批量提交
- /// </summary>
- /// <param name="ids"></param>
- /// <returns></returns>
- [HttpPost]
- [Route("SubmitAll/{idList}")]
- public ApiResult SubmitAll(string idList)
- {
- var result = new ApiResult();
- result.success = false;
- if (!String.IsNullOrEmpty(idList) && !String.IsNullOrEmpty(idList.Trim()))
- {
- string[] strArray = idList.Split(',');
- if (strArray.Length > 0)
- {
- int[] ids = new int[] { };
- ids = Array.ConvertAll<string, int>(strArray, s => int.Parse(s));
- var num = manage.SubmitAll(ids, User.Identity.GetUserId<int>());
- result.success = true;
- result.data = num;
- }
- }
- return result;
- }
// 数据库访问层
- public int SubmitAll(int[] idList, int userId)
- {
- int num = 0;
- using (var pmdb = new ProjectEntities())
- {
- using (var tran = pmdb.Database.BeginTransaction())
- {
- try
- {
- var list = pmdb.T_Investigator.Where(d => idList.Contains(d.InvestigatorID) && d.CreateUserID == userId && d.HasSubmitted == false).ToList();
- if (list.Count > 0)
- {
- foreach (var item in list)
- {
- item.HasSubmitted = true;
- }
- num = pmdb.SaveChanges();
- tran.Commit();
- }
- }
- catch (Exception ex)
- {
- tran.Rollback();//回滚
- throw ex;
- }
- }
- }
- return num;
- }
vue axios 批量删除 数组参数的更多相关文章
- vue+axios通过formdata提交参数和上传文件
demo.vue 文件 <template> <div class="demo"> <input v-model="importForm.m ...
- vue.js 批量删除跟全选,反选效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- ajax 传递数组参数
一.ajax 传递数组参数 需要添加: traditional: true, let typeIDArr = [,,,,,]; var that = this; var url = '@Url.Act ...
- springMVC 接收数组参数,mybatis 接收数组参数,mybatis批量插入/批量删除案例
案例是给一个用户赋予多个权限,多个权限用其对应的主键 id 为参数,组成了 一个id数组,传给springMVC,然后springMVC传给mybatis,然后mybatis批量插入.其实类似的场景还 ...
- springmvc使用数组接收页面商品列表批量删除传过来的参数,并完成批量删除的操作。
1.1 需求 在商品列表页面选中多个商品,然后删除. 1.2 需求分析 此功能要求商品列表页面中的每个商品前有一个checkbox,选中多个商品后点击删除按钮把商品id传给controller,根据商 ...
- Mybatis 插入与批量插入以及多参数批量删除
实体类: import java.io.Serializable; public class AttachmentTable implements Serializable { private sta ...
- Vue小案例 之 商品管理------批量删除与商品数量的调整
通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...
- Mybatis 针对ORACLE和MYSQL的批量插入与多参数批量删除
今天利用Mybatis的<for each>标签做oracle的批量插入数据时,发现和MySQL数据库有区别.在此记录下,以防之后再踩坑. 一.批量插入: 1.controller: /* ...
- Servlet 获取 数组id进行批量删除
把获取的复选框选中的 id(一般来说都是根据id 进行批量删除的) 从jsp页面 传值到Servlet中 jsp点击事件中: var array=[]; //先声明一个数组变量 var ids=$( ...
随机推荐
- 2.10linux学习(2)
2019-2-10 19:34:27 跟着超哥学Linux 发现蛮好玩的!适合开发,Windows适合娱乐! 可以跟着超哥学Linux 参考:https://www.cnblogs.com/pyyu/ ...
- 30、vue 过滤器(filters)
filter Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 Ja ...
- ABP入门系列(1)——通过模板创建MAP版本项目
ABP入门系列目录--学习Abp框架之实操演练 一.从官网创建模板项目 进入官网下载模板项目 依次按下图选择: 输入验证码开始下载 下载提示: 二.启动项目 使用VS2015打开项目,还原Nuget包 ...
- JQuery实现 图片上传
用到的文件,我都已经打包好了,自行下载: https://files.cnblogs.com/files/lguow/lib.rar 核心代码如下: <input type="hidd ...
- Javascript高级编程学习笔记(89)—— Canvas(6) 变换
变换 通过上下文的变化,可以对图像进行处理后再将其绘制到画布上 当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制. 而当我们为上下文应用变换时,会导致使用不同的 ...
- 安装部署jumpserver3.0
1.安装依赖包yum -y install git readline-devel automake autoconf2.下载 jumpservergit clone https://github.co ...
- 【TOGAF】总体认知
TOGAF是什么 TOGAF(The Open Group Architecture Framework)是当前最为流行的企业架构框架理论之一,它为一个企业或组织对于企业架构的接受.创建.使用和维护提 ...
- spark System memory must be at least
运行 ScalaSpark 程序的时候出现错误: System memory * must be at least *.Please increase heap size using the --dr ...
- Linux suse 11 sp1 安装教程
在 VMware Workstation Pro 中打开 iso 文件,进入主界面,选择 installation : 语言选择 简体中文,键盘选择 美国US ,选择下一步,点击继续: 选择 全部安装 ...
- Hive篇---Hive使用优化
一.前述 本节主要描述Hive的优化使用,Hive的优化着重强调一个 把Hive SQL 当做Mapreduce程序去优化 二.主要优化点 1.Hive运行方式:本地模式集群模式 本地模式开启本地模式 ...