BootstrapTable——行内编辑踩坑

由于公司内部项目需要，后台管理系统用的BootstrapTable，但是需求是可以新增列表并且行内编辑，删除，最后做保存提交，网上搜了很多的教程，但是有很多的坑：
1.新增列表或者删除列表的时候会清空所有填过的数据，而且删除或多或少会有问题
2.很多教程都只有简单的ipnut，项目需求是有select选择框的

所以自己结合了网上的教程加上自己的实践，实现了这一效果，下面贴上自己的代码

1.HTML

<div class="table-box" style="margin: 20px;">
	<div>
		<button type="button" id="addRow" onclick="addRow()">
			添加
		</button>
	</div>
	<!--表格的区域-->
	<table id="dataTable">
	
	</table>
</div>

2.JS

$(function () {
		$("#dataTable").bootstrapTable({
			method: "GET",
			url: "",
			clickToSelect: true,
			cache: false,
			striped: true,
			pagination: false,
			pageSize: 10,
			pageNumber: 1,
			pageList: [10, 20, 30, 50],
			search: false,
			sidePagination: 'client',
			silent: true,
			singleSelect: true, // 单选checkbox
			undefinedText: '',
			columns: [{
				field: 'index',
				title: '序列',
				formatter: function (value, row, index) {
					return row.index = index + 1; //返回行号
				}
			},
			{ field: 'id', title: '序号', visible: false },
			{ field: 'name', title: '名字', align: 'center' },
			{ field: 'type', title: '选择', align: 'center', formatter: typeSelect },
			{
				field: 'operation',
				title: '操作',
				align: 'center',
				formatter: actionFormatter
			},
			],
			onDblClickCell: function (field, value, row, $element) {
				if (field == 'content') {
					let index = $element.parent().data('index');
					if (value) {
						$element[0].innerHTML = "<input id='inputCell' type='text' name='inputCell' value='" + value + "'>";
					} else {
						$element[0].innerHTML = "<input id='inputCell' type='text' name='inputCell' >";
					}
					$("#inputCell").blur(function () {
						var newValue = $("#inputCell").val();
						row[field] = newValue;
						$(this).remove();
						$('#dataTable').bootstrapTable('updateCell', {
							index: index,
							field: field,
							value: newValue
						});
					})
				}
				return;
				$element.attr('contenteditable', true);
				$element.blur(function () {
					let index = $element.parent().data('index');
					let tdValue = $element.html();
					$("#dataTable").bootstrapTable('updateCell', {
						index: index,       //行索引
						field: field,       //列名
						value: tdValue        //cell值
					})
				})
			}
		});
	});
	
	//新增
	function addRow() {
			$('#dataTable').bootstrapTable('insertRow', {
				index: 0,
				row: {
					'index': '',
					'id': '',
					'name': '',
					'type': ''
				}
			});
		}

	//删除
	function actionFormatter(value, row, index) {
			var result = "";
			result += '<a href="javascript: void( 0 );" class="btn btn-xs red" οnclick="removeData( \'' + index + '\' )">删除</a>';
			return result;
		}
	
	function removeData(index) {
		var length = $('#dataTable').bootstrapTable('getData').length;
		if (length > 1) {//保留一行数据
			console.log(index)
			$('#dataTable').bootstrapTable('remove', {
				field: 'index',
				values: [parseInt(index) + 1]
			})
		}
	}

	//选择
	function typeSelect (value, row, index) {
			var strHtml = "";
			var url =  "/list";
			$.ajax({
				type: "GET",
				dataType: "JSON",
				async: false,
				url: url,
				success: function (result) {
					strHtml += " <select οnchange='typeSelectChange(this.options[this.options.selectedIndex].value," + index + ")'>";
					strHtml += "<option value=''   >请选择</option>";
					var d = result.length;
					for (var i = 0; i < d; i++) {
						var code = result[i].code;
						var typeDesc = result[i].typeDesc ;
						if (value == code) {
							strHtml += "<option class='ss' value='" + code + "' selected>" + typeDesc + "</option>";
						} else {
							strHtml += "<option class='ss' value='" + code + "'>" + typeDesc + "</option>";
						}
					}
					strHtml += "</select>";
				}
			});
			return strHtml
	
		}
	
		function typeSelectChange(value, lineIdx) {
			console.log(value)
			// 判断哪个被选中
			$('#dataTable').bootstrapTable('updateCell', {
				index: lineIdx,
				field: 'type',
				value: value
			})
	
		};

这就可以实现BootstrapTable行内编辑了，如果还有什么问题，请留言给我，相互交流