bootstrap Table使用总结及遇到的问题

现在做的化销项目前端使用bootstrap框架，copy之前的页面也没啥大问题，然后业务提了一些优化的东西，结果一地鸡毛，做个记录，以便以后查询。

参考了别人翻译的bootstrap官方文档：https://blog.csdn.net/S_clifftop/article/details/77937356

bootstrap Table调用getSelections时获取行索引

• 前提：列表是一个可编辑的表格，但没用bootstrap Table的可编辑配置，是通过自己写input实现的。
• 需求：新增行时，希望复制选中行的数据
• 问题：$('#id').bootstrapTable('getSelections'),通过getSelections方法拿到的行数据，无法得到input输入框修改的值。
• 思路：发现可以通过$("#input"+index).val();得到输入框修改后的值，index是行索引。这导致了新的问题，保存数据时也遇到相同的问题：bootstrapTable的getData方法，对rows循环遍历时key和index是一一对应的，但getSelections则不是，它得到的行数据的数组是不带行索引的。
• 解决办法：重写bootstrap的onCheck和onCheckAll方法，把index手动添加行数据中。

var TableInit = function() {
	var oTableInit = new Object();
	oTableInit.InitConfigureList = function() {
		$('#tb_configure').bootstrapTable('destroy');
		$('#tb_configure').bootstrapTable({
			contentType : 'application/json',
			url :ctx + '/xxxxx/xxxx', // 请求后台的URL（*）
			method:'post',
			toolbar : '#toolbar', // 工具按钮用哪个容器
			toolbarAlign:'right',//工具按钮的位置
			queryParams : oTableInit.queryParams,// 传递参数（*）
			singleSelect : false,
			clickToSelect:true,
			uniqueId : "id", // 每一行的唯一标识，一般为主键列
			pagination : true, // 是否显示分页（*）
			sortable : false, // 是否启用排序
			sidePagination : "server", // 分页方式：client客户端分页，server服务端分页（*）
			pageNumber : 1, // 初始化加载第一页，默认第一页
			pageSize : 10, // 每页的记录行数（*）
			pageList : [5, 10, 20, 50, 100], // 可供选择的每页的行数（*）
			columns : [{
				field : '',
				align : 'left',
				formatter : function(value, row, index) {
					return index + 1;
				}
			},{
				field : 'checked',
				checkbox : true,
				class : 'st_checkbox'
			},{
				field : 'itemName',
				title : '物料名称',
				align : 'left',
				formatter:function(value, row, index){
					if (value == null || value == '') {
						value = '物料名称选择';
					}
					return '<a href="#" οnclick="reserve('+index+', '+row.id+', '+'\''+row.pickupDate+'\')">'+value+'</a>';
				}
			},{
				field : 'handlingCapacity',
				title : '装卸能力',
				align : 'left',
				formatter:function(value, row, index){
					return '<input placeholder="请输入..." type="text" class="st_kbjxlkug" id="handlingCapacity'+index+'" value="'+value+'" οninput="qtyLimit('+index+')"/><span id="errMsg1'+index+'"></span>';
					
				}
			},{
				field : 'handlingCar',
				title : '可装卸车辆',
				align : 'left',
				formatter:function(value, row, index){
					return '<input placeholder="请输入..." type="number" class="st_kbjxlkug" id="handlingCar'+index+'" value="'+value+'" οninput="carLimit('+index+')"/><span id="errMsg2'+index+'"></span>';
				}
			},{
				field : 'stockWarnVal',
				title : '库存预警值',
				align : 'left',
				formatter:function(value, row, index){
					return '<input placeholder="请输入..." type="number" class="st_kbjxlkug" id="stockWarnVal'+index+'" value="'+value+'" οninput="warnLimit('+index+')"/><span id="errMsg3'+index+'"></span>';
				}
			}],
		  
          onCheck:function(row,$element){
		//选中行时，把行索引赋值给row
        	  var index = $element.attr("data-index");
        	  row.thisIndex= index;
          },
          onCheckAll:function(rows){
		//选中行时，把行索引赋值给row
        	  $.each(rows, function(key, value){
        		  row.thisIndex= key;
        	  })
          }
		});
	};
}

新增行时的代码：

$("#rowAdd").click(function() {
	
	//提货时间初始化
	var timeVal = '';
	var startTime = '';
	var endTime = '';
	var handlingCapacity = '-1';
	var handlingCar = '-1';
	var confRow = $('#tb_configure').bootstrapTable('getSelections');
	if (confRow.length<=0) {
		timeVal = $("#time0").val();
		handlingCapacity = $("#handlingCapacity0").val();
		handlingCar = $("#handlingCar0").val();
	}else{
		**var rowNum = confRow[0].thisIndex;**
		if (rowNum == undefined){
			rowNum = 0;
		}
		timeVal = $("#time"+rowNum).val();
		handlingCapacity = $("#handlingCapacity"+rowNum).val();
		handlingCar = $("#handlingCar"+rowNum).val();
	}
	if (timeVal != undefined && timeVal != null) {
		var timeArr = timeVal.split('-');
	    startTime = timeArr[0].trim();
	    endTime = timeArr[1].trim();
	}else {
		timeVal = '';
	}

	id_++;
	$('#tb_configure').attr('disabled', 'disabled');
	$("#tb_configure").bootstrapTable('insertRow', {
		index:0,//指定新增行在第一行
		row: {
			id:id_,
			time:timeVal,
			startTime:startTime,
			endTime:endTime,
			handlingCapacity:handlingCapacity,
			handlingCar:handlingCar,
			stockWarnVal:300
		}
	});
})

2. 删除空行

$("#rowDelete").click(function() {
	var confRow = $('#tb_configure').bootstrapTable('getSelections');
	var confArrItem=[];
	var deleteRow = [];
	if(confRow.length > 0) {
		$.each(confRow, function(key, value){
			if (value.id <= id_){//id_是新增行数据的ID值，每加一条id_+1
				deleteRow.push(value.id);
			}else {

				var p={
					id : value.id,
					pickupDate:pickupDate
		    	    	};
				confArrItem.push(p);
			}
		});
	}else {
		printMsg("请先选择要删除的数据！");
		return;
	}
	if (confArrItem.length <= 0) {
		if(deleteRow.length <= 0) {
			printMsg(pickupDate+"还没有配置信息，请先保存数据！");
			return;
		}else{
			$('#tb_configure').bootstrapTable('remove', {
				field: 'id',
				values: deleteRow
			});
			return;
		}
	}
})