bootstrapTable下拉框
需求:
bootstrapTable的某一列,代表该笔订单的状态,状态只有3种,做成下拉框的格式,可以选择修改,点击保存按钮时可以将修改后的数据同步至数据库
列元素
columns:
{
width: '40px',
align: 'center',
field: 'status',
title: '退款状态',
cellStyle: function (value, row, index) {
return {
css: {
"color": "blue",
"font-weight": "bold",
"font-style": "italic",
"background": "#a7efe2",
"white-space": "nowrap"
}
}
},
formatter:
function (value, row, index) {
var seclect='';
if(value=="0"){
seclect="<select class='ss'><option id='"+row.id+"' value='0' selected='selected'>待退款</option><option id='"+row.id+"' value='1'>退款成功</option><option id='"+row.id+"' value='2'>退款失败</option></select>";
}else if(value=='1'){
seclect="<select class='ss'><option id='"+row.id+"' value='0' >待退款</option><option id='"+row.id+"' value='1' selected='selected'>退款成功</option><option id='"+row.id+"' value='2'>退款失败</option></select>";
}else {
seclect="<select class='ss'><option id='"+row.id+"' value='0' >待退款</option><option id='"+row.id+"' value='1'>退款成功</option><option id='"+row.id+"' value='2' selected='selected'>退款失败</option></select>";
}
return seclect;
}
},
点击保存按钮的操作
$("#saveRecord").click(function () {
var rows = $('#dataTable').bootstrapTable("getSelections");
if (rows.length <= 0) {
layer.msg("请选择要保存的记录");
return
}
//页面数据保存
var $dataTable = $($("#dataTable tr:gt(0)"));
var totalData = [];
var data = {};
for (var i = 0; i < $dataTable.length; i++) {
var find = $($dataTable).find("input:checkbox")[i];
if ($(find).is(":checked")) {
var perModi = $($($($dataTable)[i]).find("select option:selected"));
if (perModi) {
var perInput = $(perModi).length;
for (var k = 0; k < perInput; k++) {
data.id=$($($(perModi))[k]).attr('id');
data.status=$($($(perModi))[k]).val();
}
totalData.push(data);
}
}
}
$.ajax({
url: "/controller/modifyData",
data: {'easyServe': JSON.stringify(totalData)},
type: 'post',
dataType: 'json',
success: function (data) {
$("#dataTable").bootstrapTable("refresh");
}
})
})
});
后台controller收到数据后,同步至数据库即可
这个方法比较low,总体上可以实现需求,各位如有好的方法欢迎讨论