参考：
https://www.cnblogs.com/zhuyeshen/p/11430605.html
引入相关文件
<link th:href="/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.css" rel="stylesheet"/>
-------------------
html body
-------------------
-------------------
jquery
-------------------
<script th:src="/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.min.js"></script>
<script th:src="/ajax/libs/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
-------------------
其他js
-------------------行内编辑 数据验证：
{
field : 'exponent',
title : '指数',
sortable: true,
editable : {
type : 'text',//弹框类型 文本
title : '指数',//弹框标题
emptytext : "【指数】为空",//无值 提示文字
validate : function(value) {
//validate 弹框内容验证
//value 文本框内容
if (value.length == 0) {
return '指数不能为空';
}
if (value.length > 10) {
return "指数不能超过10个字符！";
}
//自定义isInteger() 对数值进行验证
if(isInteger(value,true) == false){
return "请填入正确的整数值！";
}
}
}
}数据提交 返回编辑结果 提交出错后页面显示内容回滚：
//行内编辑 提交数据
function onEditableSave (field, row, oldValue, $el) {
//这里不使用oldValue，而是取文内容 是因为：多次修改同一个元素值的话，oldValue会默认保存并使用上一次的值，所以，还是直接用元素文本比较保守(不适用于被简化的长文本)
var initValue = $el.html();
$.ajax({
type: "post",
url: "system/test/editableSave",//ajax提交数据接口 data封装各参数
data: {
"keyValue": row.talentId,//row方式获取当前行对应的数据对象，点属性的方式获取对象属性值
"field": field,//当前被修改字段
"oldValue": initValue,//表格列表显示的老数据值
"newValue": row[field]//行内编辑文本框内容
},
success: function (data, status) {
//成功返回数据，status状态为 success 200
if (status == 'success') {
//返回的数据 后台用字符串返回数据，这里直接判断字符串值
if(data =="success"){
$.modal.msgSuccess("修改成功！");
}else{
if(data =="error"){
$.modal.msgError("修改失败！");
}else{
$.modal.msgError(data);
}
$el.text(initValue);//修改失败，还原当前元素的初始值
}
}else{
$.modal.msgError("修改失败！");
$el.text(initValue);//修改失败，还原当前元素的初始值 修改标签文本
}
},
error: function () {
return '编辑失败';//$.modal.msgError("修改失败！");
},
complete: function () {
}
});
}后台Controller：
/**
* 行内编辑 个字段值修改
*/
@PostMapping("/editableSave")
@ResponseBody
public String editableSave(@Param("keyValue") Long keyValue,@Param("field") String field,@Param("oldValue") Integer oldValue,@Param("newValue") Integer newValue)
{
return "ERROR";//SUCCESS 成功 ；ERROR 失败；其他字符串，则直接弹出字符串内容
}HTML 整体代码
<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head>
<th:block th:include="include :: header" />
<th:block th:include="include :: bootstrap-editable-css" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-table-editable-js" />
<script th:inline="javascript">
$(function() {
var options = {
url: "system/test/list",
uniqueId: "testId",
modalName: "达人",
search: false,
showPageGo: true,
detailView:true,
detailFormatter:detailFormatter,
onEditableSave: onEditableSave,//行内编辑数据提交
columns: [
{
field : 'talentName',
title : '达人',
sortable: true,
width : 120
},
{
field : 'exponent',
title : '指数',
sortable: true,
editable : {
type : 'text',//弹框类型 文本
title : '指数',//弹框标题
emptytext : "【指数】为空",//无值 提示文字
validate : function(value) {
//validate 弹框内容验证
//value 文本框内容
if (value.length == 0) {
return '指数不能为空';
}
if (value.length > 10) {
return "指数不能超过10个字符！";
}
//自定义isInteger() 对数值进行验证
if(isInteger(value,true) == false){
return "请填入正确的整数值！";
}
}
}
}]
};
$.table.init(options);
});
//行内编辑 提交数据
function onEditableSave (field, row, oldValue, $el) {
//这里不使用oldValue，而是取文内容 是因为：多次修改同一个元素值的话，oldValue会默认保存并使用上一次的值，所以，还是直接用元素文本比较保守(不适用于被简化的长文本)
var initValue = $el.html();
$.ajax({
type: "post",
url: "system/test/editableSave",//ajax提交数据接口 data封装各参数
data: {
"keyValue": row.talentId,//row方式获取当前行对应的数据对象，点属性的方式获取对象属性值
"field": field,//当前被修改字段
"oldValue": initValue,//表格列表显示的老数据值
"newValue": row[field]//行内编辑文本框内容
},
success: function (data, status) {
//成功返回数据，status状态为 success 200
if (status == 'success') {
//返回的数据 后台用字符串返回数据，这里直接判断字符串值
if(data =="SUCCESS"){
$.modal.msgSuccess("修改成功！");
}else{
if(data =="ERROR"){
$.modal.msgError("修改失败！");
}else{
$.modal.msgError(data);//直接弹出返回内容
}
$el.text(initValue);//修改失败，还原当前元素的初始值
}
}else{
$.modal.msgError("修改失败！");
$el.text(initValue);//修改失败，还原当前元素的初始值 修改标签文本
}
},
error: function () {
return '编辑失败';//$.modal.msgError("修改失败！");
},
complete: function () {
}
});
}
</script>
</body>
</html>