一、前言
 
 
 
最近的项目中使用bootstrapTable进行列表的显示，需要对列表中的数据进行多行删除，在这简单记录下使用方法。
 
 
二、效果图
 
 
 
在这个无图不欢的时代，效果图当然是必须的。
 
 
 
 

 
 
 
三、完整实例
 
 
 
1、JSP中定义一个table
 
 
 
<span style="font-size:18px;">                    <div class="table-responsive">
                        <table id="pushAppletTable" >
                        </table>
                    </div>
</span>
 
 
 
 
2、JS中初始化列表
 
 
 
 
	<span style="font-size:14px;">$('#pushAppletTable').bootstrapTable({
		method : 'post',	//服务器数据的请求方式 get or post
		url : "query.htm",	//服务器数据的加载地址
		striped : true,		//设置为true会有隔行变色效果	
		dataType : "json",	//服务器返回的数据类型
		pagination : true,	//设置为true会在底部显示分页条
		queryParamsType : "limit",	//设置为limit则会发送符合RESTFull格式的参数
		singleSelect : false,		// 设置为true将禁止多选
		contentType : "application/x-www-form-urlencoded",	//发送到服务器的数据编码类型
		pageSize : 10,		//如果设置了分页，每页数据条数
		pageNumber : 1,		//如果设置了分布，首页页码
		search : false, // 是否显示搜索框
		showColumns : false, // 是否显示内容下拉框（选择显示的列）
		sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
		queryParams : queryParams,	//请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含
						//limit, offset, search, sort, order 否则, 需要包含: 
						//pageSize, pageNumber, searchText, sortName, sortOrder. 
						//返回false将会终止请求
		columns : [ {				//列配置项 数据类型，详细参数配置参见文档http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
			checkbox : true			//列表中显示复选框
		}, {
			field : 'seqNum',		//列字段名
			title : '序号'			//列标题
		}, {
			field : 'version',
			title : '应用版本'
		}, {
			field : 'appletSize',
			title : '应用大小'
		}, {
			field : 'statusVal',
			title : '版本状态'
		}, {
			field : 'smsAccess',
			title : '短信接入号'
		}, {
			field : 'onlineTime',
			title : '上线时间'
		}, {
			field : 'expireTime',
			title : '过期时间'
		}, {
			title : '操作',
			formatter : operateFormatter
		} ]
	});


/*查询参数格式化*/
function queryParams(params) {
    return {
        rows : params.limit,
        page : params.offset / params.limit + 1,
        version : $('#qAppletversion').val(),
        status : $('#qVersionStatus').val(),
        beginTime : $('#qBeginTime').val(),
        endTime : $('#qEndTime').val()
    };
}

/**
 * 列表操作栏格式化
 */
function operateFormatter(value, row, index) {
    var editDef = "&nbsp;&nbsp;<button class=\"btn btn-primary btn-xs\" οnclick=\"javascript:openEditPushApplet('"
            + row['id'] + "')\">编辑</button>";
    return editDef;
}
</span>
 
 
 
 
 
3、处理选择的数据，把ID的集合作为参数
 
 
 
 
<span style="font-size:14px;">function deletePushApplet() {
	var rows = $('#pushAppletTable').bootstrapTable('getSelections');    //返回所有选择的行，当没有选择的记录时，返回一个空数组
	if (rows.length == 0) {
		Modal.alert({
			msg : "请选择要删除的数据"
		});
		return;
	}
	/*封装的表单提示确认框*/
	Modal.confirm({
		msg : "确认要删除选中的'" + rows.length + "'条数据吗?"
	}).on(function(e) {
		if (!e)			//点击取消，直接返回
			return;
		var url = "batchDel.htm?time=" + new Date().getTime();
		var ids = new Array();
		//遍历所有选择的行数据，取每条数据对应的ID
		$.each(rows, function(i, row) {
			ids[i] = row['id'];
		});
		//定义ajax请求参数
		var param = {
			"ids" : ids
		};
		$.ajax({
			type : "post",
			url : url,
			data : param,
			datatype : "json",
			success : function(data) {
				if (data.status == "succ")
					Modal.alert({
						msg : "删除成功"
					});
				else
					Modal.alert({
						msg : "删除失败"
					});
				doQuery();
			},
			error : function() {
				Modal.alert({
					msg : "服务器没有返回数据，可能服务器忙，请重试"
				});
			}
		});
	});
}</span>
 
 
 
 
 
4、Controller中，接收数据ID集合，进行删除操作
 
 
 
 
<span style="font-size:14px;">/**
	 * 批量删除应用
	 */
	@ResponseBody
	@RequestMapping("/batchDel.htm")
	public JSONObject batchDel(@RequestParam(value = "ids[]") String[] ids) {	//@RequestParam  SpringMVC后台控制层获取参数
		JSONObject json = new JSONObject();
		try {
			List<String> list = Arrays.asList(ids);
			this.pushAppletService.batchDel(list);
			json.element("status", "succ");
		} catch (Exception e) {
			json.element("status", "fail");
			e.printStackTrace();
		}
		return json;
	}</span>
 
 
 
 
5、项目使用了Mybatis框架。关于mybtis的使用再这不提及。直接贴映射文件
 
 
 
 
<span style="font-size:14px;"><delete id="batchDel" parameterType="List" >
		<![CDATA[
			delete from PUSH_APPLE where id in 
		]]>
		<foreach collection="list" index="i" open="(" separator="," close=")" item="item"  > 
			#{item}
		</foreach>
	</delete></span>
 
 
 
 
 
 
 

 
 
 

 
 
 

 
 
 

 
 
 
 

 
 
 
 

 

<template>
  <div>
      <div v-for="obj of a" @click="sel(obj)">
          {{obj.name}} <span v-if="!obj.select">+</span><span v-else>-</span>
      </div>
      <hr>
      <div>
          <div v-for="(obj,index) in temp" @click="cel(obj,index)">{{obj}}</div>
      </div>
  </div>
</template>

 
<script>
export default {
    methods: {
        sel(obj){
            obj.select = !obj.select
            if(obj.select){
                this.temp.push(obj)
            }else{
                obj.select = !obj.select
            }            
        },
        cel(obj,index){
            obj.select = !obj.select;
            console.log(index)
            this.temp.splice(index,1);            
        }
    },
  data(){
      return {
          temp:[],
          a:[{
            "code": "1",
            "name": "1",
            "cityId": 8,
            "regionId": null,
            "blockId": null,
            "cityName": null,
            "regionName": null,
            "blockName": null,
            "address": "刀茅巷216号",
            "buildingNum": null,
            "unitNum": null,
            "houseNum": null,
            "completeTime": null,
            "developer": null,
            "id": null,
            "pinYin": null,
            "pinYinFirst": null,
            "pinYinShort": null,
            select:false
        },{
            select:false,
            "code": "2",
            "name": "2",
            "cityId": 8,
            "regionId": null,
            "blockId": null,
            "cityName": null,
            "regionName": null,
            "blockName": null,
            "address": "刀茅巷216号",
            "buildingNum": null,
            "unitNum": null,
            "houseNum": null,
            "completeTime": null,
            "developer": null,
            "id": null,
            "pinYin": null,
            "pinYinFirst": null,
            "pinYinShort": null
        },{
            select:false,
            "code": "3",
            "name": "3",
            "cityId": 8,
            "regionId": null,
            "blockId": null,
            "cityName": null,
            "regionName": null,
            "blockName": null,
            "address": "刀茅巷216号",
            "buildingNum": null,
            "unitNum": null,
            "houseNum": null,
            "completeTime": null,
            "developer": null,
            "id": null,
            "pinYin": null,
            "pinYinFirst": null,
            "pinYinShort": null
        }],
      }
  }
}
</script>

删除指定数据(按值删除)
 
利用.remove()方法按值删除
 
list1 = [1, 2, 3, 4, 5, 6]
list1.remove(1)
print(list1)
 
输出结果
 
[2, 3, 4, 5, 6]
 
 
 
删除指定位置数据(按下表删除)
 
方法一
 
利用.pop()方法，删除指定位置数据，并返回所删除的数据
 
list1 = [1, 2, 3, 4, 5, 6]
data = list1.pop(0)
print(list1)
print(data)
 
输出结果
 
[2, 3, 4, 5, 6]
1
 
方法二
 
利用del()函数
 
list1 = [1, 2, 3, 4, 5, 6]
del(list1[0])
print(list1)
 
输出结果
 
[2, 3, 4, 5, 6]

1.代码
 
/**
 * 删除评论
 */
deleteorder:function(e) {
	//当前这条列表数据所在的页码
	var pageindex = e.currentTarget.dataset.pageindex;
	//当前这条数据所在当前页的第几条
	var orderindex = e.currentTarget.dataset.orderindex;
	//获取当前二维数组数据（需要删除的这条数据）
	var info = that.data.listarr[pageindex]['list'][orderindex];
	//获取当前页的数据
	var oldpagelist = that.data.listarr[pageindex];

	wx.showModal({
		title: '',
		content: '确定删除吗？？',
		success: function(res) {
			if(res.confirm) {
				var param = {
					sac_id: info.id
				};
				wx.showLoading({
					title: '删除中',
					mask: true
				})
				var data_key = "listarr[" + pageindex + "]";
				//执行删除操作
				common.getData(common.config.deleteUlrl, param, 'get', function(res) {
					//删除成功后把页面中的这天展示数据剔除
					oldpagelist['list'].splice(orderindex, 1);
					that.setData({
						[data_key]: oldpagelist,
					});
					wx.hideLoading()
				});
			} else if(res.cancel) {
				console.log("用户不删除")
			}
		}
	})
}
 
2.说明
 
（1）在小程序中，假设你有10页数据，你删除第5页的第10条，当你删除成功后，你只需要第5页的第10的展示效果剔除，页面整体无需刷新也无需重新请求第5页的数据；
 
（2）取出第5页的数据，通过splice去除最后一条即可；
 
（3）其它点赞之类的原理类似；