列表数据多行删除

一、前言

最近的项目中使用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>