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=$( ...
随机推荐
- 动态规划-LIS
https://vjudge.net/contest/297216?tdsourcetag=s_pctim_aiomsg#problem/E #include<bits/stdc++.h> ...
- let和const
ES6新增了let取代var,let主要有以下特点. 1 只在代码块内有效,代码块外不能使用let声明的变量.let很适合声明循环体的变量. 它可以解决一些闭包的问题存在的问题比如: var a = ...
- RSA算法加解密
package org.thcic.ejw.util.encrypt; import java.io.ByteArrayOutputStream; import java.security.Key; ...
- Java实现递增数组的二分查找
package com.algorithm; import java.util.ArrayList;import java.util.List; /** * 类功能描述: * * @author Ba ...
- Python爬虫4-URLError与HTTPError
GitHub代码练习地址:URLError:https://github.com/Neo-ML/PythonPractice/blob/master/SpiderPrac06_URLError.py ...
- ansible基础-roles
一 简介 注:本文demo使用ansible2.7稳定版 在我看来,role是task文件.变量文件.handlers文件的集合体,这个集合体的显著特点是:可移植性和可重复执行性. 实践中,通常我们以 ...
- Python面试真题第三节
51.正则匹配,匹配日期2018-03-20 url='https://sycm.taobao.com/bda/tradinganaly/overview/get_summary.json?dateR ...
- 1. VIM 系列 - 简单入门,拾起兴趣
目录 1. 认识模式 1.1 正常模式 1.2 插入模式 1.3 命令模式 1.4 可视模式 2. 常用快捷键 1. 认识模式 vim 一共有四种模: 1. 正常模式 2. 插入模式 3. 命令模式 ...
- 互联网最新kafka技术面试题含答案
1.Kafka 的设计时什么样的呢? Kafka 将消息以 topic 为单位进行归纳 将向 Kafka topic 发布消息的程序成为 producers. 将预订 topics 并消费消息的程序成 ...
- mybatis-generator XML Parser Error on line 38: 必须为元素类型 "table" 声明属性 "enableInsertByPrimaryKey"。
1. 解决方法 在 table 元素中删除属性 enableInsertByPrimaryKey 即可.就是这么神奇... 2. 情景重现 使用 mybatis-generator 插件生成代码时报错 ...