RuoYi单体版Table行内编辑
第一步:标签中引入
<th:block th:include="include :: bootstrap-editable-css" />
第二步:
<th:block th:include="include :: bootstrap-table-editable-js" />
第三步:
<div class="col-sm-12 select-table table-striped"><table id="bootstrap-table"></table></div>
第四步:
<script th:inline="javascript">
$(function() {
var id = document.getElementById('id').value;
var options = {
url: prefix + "/forwardContainerData/"+id,
modalNameDel: "用箱明细",
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
onEditableSave: onEditableSave,//开启行内编辑功能
columns: [{
checkbox: true
},{
title: "序号",
formatter: function (value, row, index) {
return $.table.serialNumber(index);
}
},
{
field: 'containerNo',
title: '箱号',
align: "center",
sortable: true,
editable : {//设置可以编辑的列
type : 'text',//弹框类型 文本
title : '箱号',//弹框标题
emptytext : "箱号为空",//无值 提示文字
validate : function(value) {
if (value.length == 0) {
return '箱号不能为空';
}
},
}
},
{
field: 'containerNo',
title: 'XXXX',
align: "center"
},
{
field: 'containerNo',
title: 'XXXX',
align: "center"
},
{
field: 'containerNo',
title: 'XXXX',
align: "center"
},
]};
$.table.init(options);
});
//行内编辑 提交数据
function onEditableSave (field, row, oldValue, $el) {
var initValue = $el;
$.ajax({
type: "post",
url: prefix + "/editableSave",//ajax提交数据接口 data封装各参数
data: {
"oldValue": initValue,//表格列表显示的老数据值
"newValue": row[field]//行内编辑文本框内容
},
success: function (data, status) {
if (status == 'success') {
if(data =="SUCCESS"){
$.modal.msgSuccess("修改成功!");
}else{
if(data =="ERROR"){
$.modal.msgError("修改失败!");
}else{
$.modal.msgError(data);
}
$("#bootstrap-table").bootstrapTable('refresh');
}
}else{
$("#bootstrap-table").bootstrapTable('refresh');
$.modal.msgError("修改失败!");
}
},
error: function () {
$("#bootstrap-table").bootstrapTable('refresh');
return '编辑失败';
},
complete: function () {
}
});
}
第五步:
function submitHandler() {
if ($.validate.form()) {
//获取选中行数据
var rowsData = $('#bootstrap-table').bootstrapTable('getSelections');
var business = document.getElementById('business').value;
var forwarderNo = document.getElementById('forwarderNo').value;
var config = {
url: prefix + "/confirmForwardContainer",
type: "post",
dataType: "json",
data{"business":business,"forwarderNo":forwarderNo,"rowsData":JSON.stringify(rowsData)},
beforeSend: function () {
$.modal.loading("正在处理中,请稍后...");
$.modal.disable();
},
success: function(result) {
$.operate.successCallback(result);
}
};
$.ajax(config)
}
}
完整示例
<!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('选中用箱明细')"/>
<link href="/ajax/libs/select2/select2.min.css" rel="stylesheet"/>
<link href="/ajax/libs/select2/select2-bootstrap.css" rel="stylesheet"/>
<th:block th:include="include :: bootstrap-editable-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-forwarder-edit" th:object="${forwarder}">
<input name="id" type="hidden" th:field="*{id}"/>
<div class="form-group">
<label class="col-sm-3 control-label is-required">业务类型:</label>
<div class="col-sm-8 paddingZero">
<select class="form-control" name="business" id="business" required>
<option value="SOC正常用箱" th:field="*{business}">SOC正常用箱</option>
<option value="租箱" th:field="*{business}">租箱</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">小单号:</label>
<div class="col-sm-8 paddingZero">
<input class="form-control" type="text" name="forwarderNo" id="forwarderNo" th:field="*{forwarderNo}"
required>
</div>
</div>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
</form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-css"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-table-editable-js"/>
<script th:inline="javascript">
$(function () {
var id = document.getElementById('id').value;
var options = {
url: prefix + "/forwardContainerData/" + id,
modalNameDel: "用箱明细",
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
onEditableSave: onEditableSave,
columns: [{
checkbox: true
}, {
title: "序号",
formatter: function (value, row, index) {
return $.table.serialNumber(index);
}
},
{
field: 'containerNo',
title: '箱号',
align: "center",
sortable: true,
editable: {
type: 'text',//弹框类型 文本
title: '箱号',//弹框标题
emptytext: "箱号为空",//无值 提示文字
validate: function (value) {
if (value.length == 0) {
return '箱号不能为空';
}
},
}
},
{
field: 'containerNo',
title: 'XXXX',
align: "center"
},
{
field: 'containerNo',
title: 'XXXX',
align: "center"
},
{
field: 'containerNo',
title: 'XXXX',
align: "center"
},
]
};
$.table.init(options);
});
//行内编辑 提交数据
function onEditableSave(field, row, oldValue, $el) {
var initValue = $el;
$.ajax({
type: "post",
url: prefix + "/editableSave",//ajax提交数据接口 data封装各参数
data: {
"oldValue": initValue,//表格列表显示的老数据值
"newValue": row[field]//行内编辑文本框内容
},
success: function (data, status) {
if (status == 'success') {
if (data == "SUCCESS") {
$.modal.msgSuccess("修改成功!");
} else {
if (data == "ERROR") {
$.modal.msgError("修改失败!");
} else {
$.modal.msgError(data);
}
$("#bootstrap-table").bootstrapTable('refresh');
}
} else {
$("#bootstrap-table").bootstrapTable('refresh');
$.modal.msgError("修改失败!");
}
},
error: function () {
$("#bootstrap-table").bootstrapTable('refresh');
return '编辑失败';
},
complete: function () {
}
});
}
</script>
<script type="text/javascript">
var prefix = ctx + "business/forwarder";
layui.use(['laydate'], function () {
var laydate = layui.laydate;
laydate.render({
elem: '#boxdate',
type: 'date',
});
laydate.render({
elem: '#eta',
type: 'date',
});
laydate.render({
elem: '#etd',
type: 'date',
});
laydate.render({
elem: '#surrenderTime',
type: 'date',
trigger: 'click',
});
})
$("#form-forwarder-edit").validate({
focusCleanup: true
});
//弹窗确定提交
function submitHandler() {
if ($.validate.form()) {
//获取选中行数据
var rowsData = $('#bootstrap-table').bootstrapTable('getSelections');
var business = document.getElementById('business').value;
var forwarderNo = document.getElementById('forwarderNo').value;
var config = {
url: prefix + "/confirmForwardContainer",
type: "post",
dataType: "json",
data: {"business": business, "forwarderNo": forwarderNo, "rowsData": JSON.stringify(rowsData)},
beforeSend: function () {
$.modal.loading("正在处理中,请稍后...");
$.modal.disable();
},
success: function (result) {
$.operate.successCallback(result);
}
};
$.ajax(config)
}
}
</script>
</body>
</html>
<style>
.paddingZero {
padding-right: 0;
padding-left: 0;
}
</style>