直接在列表页面进行编辑,编辑完成批量保存
html里面就是个table加button
<table id="exampleTable" data-mobile-responsive="true"></table>
<button type="button" id="butSave" class="btn btn-primary col-sm-1 col-sm-offset-5" onclick="save()">保存</button>
js里面,给要编辑的字段列拼个input进去
{
field : 'gift',
title : '礼品',
align : 'center',
width : '28%',
formatter: function (value,row,index,field) {
if(row.gift == "" || row.gift == null){
value = "";
}else{
value = row.gift;
}
return '<input class="form-control" value="'+value+'" name="gift" type="text" onblur="editRow(\''+index+'\',\'gift\',this.value,'+objTostr(row)+')">';
}
},
每编辑完一个就把行编辑数据更新到table中
然后保存
//对象转json字符串
function objTostr(obj){
if( typeof(obj)!=='object' ){return obj;}
var temp=Object.assign({},obj);
return JSON.stringify( temp).replace(/"/g, '"');
}
//行编辑数据更新到table中
function editRow(index,field,value,row){
var rows = {
index : index, //更新列所在行的索引
field : field, //要更新列的field
value : value //要更新列的数据
};//更新表格数据
$("#exampleTable").bootstrapTable("updateCell",rows);
}
function save(){
var allTableData = $('#exampleTable').bootstrapTable('getData');//获取表格的所有内容行
var params = JSON.stringify(allTableData);
$.ajax({
url : '/activity/invite/update',
type : 'POST',
data : params,
contentType:'application/json;charset=utf-8',
dataType:'JSON',
cache : false,
success : function(data) {
layer.msg(data.msg);
}
});
}
页面完整代码如下
html:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:replace="include :: header(~{::title},~{::link})">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
<div class="col-sm-12">
<div class="ibox">
<div class="ibox-body">
<table id="exampleTable" data-mobile-responsive="true"></table>
<button type="button" id="butSave" class="btn btn-primary col-sm-1 col-sm-offset-5" onclick="save()">保存</button>
</div>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript" src="/js/appjs/activity/inProgress/invite.js"></script>
</body>
</html>
js:
var prefix = "/activity/invite"
$(function() {
load();
});
function load() {
$('#exampleTable')
.bootstrapTable(
{
method : 'get', // 服务器数据的请求方式 get or post
url : prefix + "/list", // 服务器数据的加载地址
// showRefresh : true,
// showToggle : true,
// showColumns : true,
iconSize : 'outline',
toolbar : '#exampleToolbar',
striped : true, // 设置为true会有隔行变色效果
dataType : "json", // 服务器返回的数据类型
pagination : true, // 设置为true会在底部显示分页条
// queryParamsType : "limit",
// //设置为limit则会发送符合RESTFull格式的参数
singleSelect : false, // 设置为true将禁止多选
// contentType : "application/x-www-form-urlencoded",
// //发送到服务器的数据编码类型
pageSize : 10, // 如果设置了分页，每页数据条数
pageNumber : 1, // 如果设置了分布，首页页码
//search : true, // 是否显示搜索框
showColumns : false, // 是否显示内容下拉框（选择显示的列）
sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
queryParams : function(params) {
return {
//说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
limit: params.limit,
offset:params.offset,
sort : null==params.sort?null:params.sort.replace(/([A-Z])/g,"_$1").toLowerCase(), //驼峰转下划线
order : params.order,
activityId : $('#activityId').val()
// username:$('#searchName').val()
};
},
// //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
// queryParamsType = 'limit' ,返回参数必须包含
// limit, offset, search, sort, order 否则, 需要包含:
// pageSize, pageNumber, searchText, sortName,
// sortOrder.
// 返回false将会终止请求
columns : [
{
checkbox : true
},
{
field : 'customerName',
title : '客户姓名'
},
{
field : 'idCard',
title : '身份证号'
},
{
field : 'starttime',
title : '开始时间'
},
{
field : 'participate',
title : '是否参加',
align : 'center',
width : '8%',
formatter: function (value,row,index,field) {
if(row.participate == "" || row.participate == null){
value = "";
}else{
value = row.participate;
}
return '<input class="form-control" value="'+value+'" name="participate" type="text" onblur="editRow(\''+index+'\',\'participate\',this.value,'+objTostr(row)+')">';
}
},
{
field : 'gift',
title : '礼品',
align : 'center',
width : '28%',
formatter: function (value,row,index,field) {
if(row.gift == "" || row.gift == null){
value = "";
}else{
value = row.gift;
}
return '<input class="form-control" value="'+value+'" name="gift" type="text" onblur="editRow(\''+index+'\',\'gift\',this.value,'+objTostr(row)+')">';
}
},
{
field : 'receiveTime',
title : '领取时间',
align : 'center',
width : '10%',
formatter: function (value,row,index,field) {
if(row.receiveTime == "" || row.receiveTime == null){
value = "";
}else{
value = row.receiveTime;
}
return '<input class="form-control" value="'+value+'" name="receiveTime" type="text" onblur="editRow(\''+index+'\',\'receiveTime\',this.value,'+objTostr(row)+')">';
}
},
{
field : 'dealer',
title : '经办人',
align : 'center',
width : '10%',
formatter: function (value,row,index,field) {
if(row.dealer == "" || row.dealer == null){
value = "";
}else{
value = row.dealer;
}
return '<input class="form-control" value="'+value+'" name="dealer" type="text" onblur="editRow(\''+index+'\',\'dealer\',this.value,'+objTostr(row)+')">';
}
}
// {
// title : '操作',
// field : 'id',
// align : 'center',
// formatter : function(value, row, index) {
// var e = '<a class="btn btn-primary btn-sm '+s_edit_h+'" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" mce_href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="编辑" onclick="edit(\''
// + row.inviteId
// + '\')"><i class="fa fa-edit"></i></a> ';
// var d = '<a class="btn btn-warning btn-sm '+s_remove_h+'" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="删除" mce_href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="remove(\''
// + row.inviteId
// + '\')"><i class="fa fa-remove"></i></a> ';
// var f = '<a class="btn btn-success btn-sm" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="备用" mce_href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="resetPwd(\''
// + row.inviteId
// + '\')"><i class="fa fa-key"></i></a> ';
// return e + d ;
// }
// }
]
});
}
function reLoad() {
$('#exampleTable').bootstrapTable('refresh');
$('#exampleTable').bootstrapTable('selectPage',1);
}
function add() {
layer.open({
type : 2,
title : '增加',
maxmin : true,
shadeClose : false, // 点击遮罩关闭层
area : [ '100%', '100%' ],
content : prefix + '/add' // iframe的url
});
}
function edit(id) {
layer.open({
type : 2,
title : '编辑',
maxmin : true,
shadeClose : false, // 点击遮罩关闭层
area : [ '100%', '100%' ],
content : prefix + '/edit/' + id // iframe的url
});
}
function remove(id) {
layer.confirm('确定要删除选中的记录？', {
btn : [ '确定', '取消' ]
}, function() {
$.ajax({
url : prefix+"/remove",
type : "post",
data : {
'inviteId' : id
},
success : function(r) {
if (r.code==0) {
layer.msg(r.msg);
reLoad();
}else{
layer.msg(r.msg);
}
}
});
})
}
function resetPwd(id) {
}
function batchRemove() {
var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
if (rows.length == 0) {
layer.msg("请选择要删除的数据");
return;
}
layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", {
btn : [ '确定', '取消' ]
// 按钮
}, function() {
var ids = new Array();
// 遍历所有选择的行数据，取每条数据对应的ID
$.each(rows, function(i, row) {
ids[i] = row['inviteId'];
});
$.ajax({
type : 'POST',
data : {
"ids" : ids
},
url : prefix + '/batchRemove',
success : function(r) {
if (r.code == 0) {
layer.msg(r.msg);
reLoad();
} else {
layer.msg(r.msg);
}
}
});
}, function() {
});
}
//对象转json字符串
function objTostr(obj){
if( typeof(obj)!=='object' ){return obj;}
var temp=Object.assign({},obj);
return JSON.stringify( temp).replace(/"/g, '"');
}
//行编辑数据更新到table中
function editRow(index,field,value,row){
var rows = {
index : index, //更新列所在行的索引
field : field, //要更新列的field
value : value //要更新列的数据
};//更新表格数据
$("#exampleTable").bootstrapTable("updateCell",rows);
}
function save(){
var allTableData = $('#exampleTable').bootstrapTable('getData');//获取表格的所有内容行
var params = JSON.stringify(allTableData);
$.ajax({
url : '/activity/invite/update',
type : 'POST',
data : params,
contentType:'application/json;charset=utf-8',
dataType:'JSON',
cache : false,
success : function(data) {
layer.msg(data.msg);
}
});
}
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)