行内编辑
table插件实现行内编辑，主要是借助两个方法 onClickCell()方法和saveData()方法，详细请看博客 /dizuncainiao/article/details/81742971
非空验证
这里做验证的值是直接从onClickCell()方法中的参数拿到的，验证过后不符合要求应该把之前的数据放回去，这里使用的也是从onClickCell()方法参数中的js对象将之前的值放回去。
onClickCell: function(field, value, row, $element) {$element.attr('contenteditable', true);$element.blur(function() {let index = $element.parent().data('index');let tdValue = $element.html();if(tdValue.replace(/(^\s*)|(\s*$)/g, "")==='' || tdValue === null){alert("值不能为空或空格！");$element.html(value); }else{saveData(index, field, tdValue);}})}
这里有一个小坑，如果你没有把之前的值放回去，弹窗会弹出两次，原因可能是验证后这个方法又被调用一次进行了重复验证，我之前的解决方法是定义一个变量，第一次弹窗后就改变变量的值，每次弹窗提醒时都做判断去验证是否是第一次弹窗，后来发现效果可以实现，但是完全时没有必要的操作，只要把原先的数据值放回去就不会出现重复验证不通过的问题。
删除行
删除行使用的方法是table插件API中的removeByUniqueId()方法，根据删行的uniqueid删除行。在这个地方踩了几个小坑。
1.使用这个方法时发现找不到uniqueid，解决方法是在table初始化是加上一个属uniqueId:“id”,
$table.bootstrapTable({url: '',data: datas,toolbar: '#toolbar',uniqueId: "id",
2.uniqueId没有办法正常获取，uniqueId生成后在html元素中的属性名不是uniqueId，而是data-uniqueId,关于这点的问题请看博客/notejs/article/details/17251245
所以获取方式有所不同。
$delect.click(function() {var list = $('input[name="btSelectItem"]:checked').parent().parent();for(var i=0; i<list.length; i++){$table.bootstrapTable('removeByUniqueId',list[i].getAttribute("data-uniqueid"));} })
3.还有一个问题没有解决，删除行或插入行后，排序的序号应该自动变化，但是还没有实现，如果有实现的或者有好的思路的朋友请告诉我。
下面是所有代码
<html><head><link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css" /><script src="jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script><script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script><script src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="table-box" style="margin: 20px;"><div id="toolbar"><button id="button" class="btn btn-default">insertRow</button><button id="getTableData" class="btn btn-default">getTableData</button><button id="delect" class="btn btn-default">delect</button></div><table id="table"></table></div></body><script>let datas = [{ id: 1, name: '张三',Item :'1', price: '￥1' },{ id: 2, name: '李四',Item :'2', price: '￥2' },{ id: 3, name: '王五',Item :'3', price: '￥3' }]$(function() {let $table = $('#table');let $button = $('#button');let $getTableData = $('#getTableData');let $delect = $('#delect')$button.click(function() { $table.bootstrapTable('insertRow', {index: 0,row: {id: '0',name: '',price: ''}});var list = new Array();var list = $("table tr td:nth-child(2)").html();alert(list);});$table.bootstrapTable({url: '',data: datas,toolbar: '#toolbar',uniqueId: "id",clickEdit: true,showToggle: true,pagination: true, //显示分页条showColumns: true,showPaginationSwitch: true,//显示切换分页按钮showRefresh: true,//显示刷新按钮clickToSelect: true, //点击row选中radio或CheckBoxcolumns: [{checkbox: true}, {field: 'id',title: 'Item ID'}, {field: 'name',title: 'Item Name'}, {field: 'price',title: 'Item Price'}, ],onClickCell: function(field, value, row, $element) {$element.attr('contenteditable', true);$element.blur(function() {let index = $element.parent().data('index');let tdValue = $element.html();if(tdValue.replace(/(^\s*)|(\s*$)/g, "")==='' || tdValue === null){alert("值不能为空或空格！");$element.html(value); }else{saveData(index, field, tdValue);}})}});$getTableData.click(function() {alert(JSON.stringify($table.bootstrapTable('getData')));});function saveData(index, field, value) {$table.bootstrapTable('updateCell', {index: index, //行索引field: field, //列名value: value //cell值})}$delect.click(function() {var list = $('input[name="btSelectItem"]:checked').parent().parent();for(var i=0; i<list.length; i++){$table.bootstrapTable('removeByUniqueId',list[i].getAttribute("data-uniqueid"));}});}); </script></html>
![[转]Laravel与bootstrap-editable实现table的行内编辑](https://700zi.400zi.cn/uploadfile/img/14/855/2314c53232f4560ee9a3711644a1b68f.jpg)
