很多时候使用行内编辑会该操作者带来更清爽的体验
实现bootstrapTable行内编辑：
首先导入相关依赖：
<!--引用BootStrap的JavaScript插件--> <script src="#(basePath)/page/js/jquery.min.js"></script> <script src="#(basePath)/page/js/bootstrap.min.js"></script> <script src="#(basePath)/page/js/bootstrap-table.js"></script> <script src="#(basePath)/page/js/bootstrap-table-zh-CN.js"></script> <!-- 行内编辑 --> <script src="#(basePath)/page/js/bootstrap-editable.js"></script> <script src="#(basePath)/page/js/bootstrap-table-editable.js"></script>
HTML部分：
<table class="table table-hover table-bordered" id="tb_user"> </table>
js部分：
//初始化表格
function initTable() {
//先销毁表格
$('#tb_user').bootstrapTable('destroy');
//初始化表格,动态从服务器加载数据
$("#tb_user").bootstrapTable({
url : '#(basePath)/admin/manageUser', //请求后台的URL（*）
method : 'post', //请求方式（*）
contentType: "application/x-www-form-urlencoded",//一种编码。好像在post请求的时候需要用到。这里用的get请求，注释掉这句话也能拿到数据
striped : true, //是否显示行间隔色
dataField: "rows",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行
cache : true, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination : true, //是否显示分页（*）
sortable : true, //是否启用排序
sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber : 1, //初始化加载第一页，默认第一页
pageSize : 50, //每页的记录行数（*）
pageList : [ 50, 100 ], //可供选择的每页的行数（*）
search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch : false,
paginationPreText:'上一页',
paginationNextText:'下一页',
//showColumns : true, //是否显示所有的列
//showRefresh : true, //是否显示刷新按钮
minimumCountColumns : 2, //最少允许的列数
clickToSelect : true, //是否启用点击选中行
uniqueId : "user_id", //每一行的唯一标识，一般为主键列
//showToggle : true, //是否显示详细视图和列表视图的切换按钮
cardView : false, //是否显示详细视图
detailView : false, //是否显示父子表
queryParams:queryParams,//请求服务器时所传的参数
responseHandler:responseHandler,//请求数据成功后，渲染表格前的方法
rowStyle: function (row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass;
if (row.integral_num < 150) {
strclass = 'danger';
}else if (row.integral_num > 400) {
strclass = 'info';
}
else {
strclass = '';
}
return { classes: strclass }
},
onEditableSave: function (field, row, oldValue, $el) {
layer.msg(row.integral_num);
$.ajax({
type: "post",
url: "#(basePath)/admin/giftIntegral",
data: {
userId:row.user_id,
integral:row.integral_num
},
success: function (data, status) {
if (status == "success") {
layer.msg("编辑成功");
}
},
error: function () {
layer.msg("Error");
},
complete: function () {
layer.msg("完成")
}
});
},
columns : [
{
field : 'user_id',
align : 'center',
title : '编号',
valign: 'middle'
},{
field : 'tel',
align : 'center',
title : '电话',
valign: 'middle'
},
{
field : 'user_name',
align : 'center',
title : '用户名',
valign: 'middle'
},{
field : 'integral_num',
align : 'center',
title : '积分',
valign: 'middle',
editable: {
type: 'text',
title: '年龄',
validate: function (v) {
if (isNaN(v)) return '年龄必须是数字';
var age = parseInt(v);
if (age <= 0) return '年龄必须是正整数';
}
}
},{
field : 'register_time',
align : 'center',
title : '注册时间',
valign: 'middle'
},{
title : '操作',
field : 'user_id',
align : 'center',
formatter : function(value, row, index) {
var e = '<button class="btn btn-default" onclick="edit(\''+ index + '\')">奖励积分</button>';
return e ;
},
valign: 'middle'
} ],
formatLoadingMessage: function () {
return "请稍等，正在加载中...";
},
formatNoMatches: function () { //没有匹配的结果
return '<img style="width:100px" src="#(basePath)/page/img/noContent.png">';
},
onLoadError: function (data) {
$('#tb_user').bootstrapTable('removeAll');
},
});
}
//请求服务数据时所传参数
function queryParams(params){
return {
pageSize : params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
pageIndex : params.offset/params.limit+1, //当前页面,默认是上面设置的1(pageNumber)
condition : $("#condition").val(),//条件输入框的条件
//param : "Your Param" //这里是其他的参数，根据自己的需求定义，可以是多个
}
}
//请求成功方法
function responseHandler(result){
//如果没有错误则返回数据，渲染表格
return {
total : result.totalRow, //总页数,前面的key必须为"total"
rows : result.list //行数据，前面的key要与之前设置的dataField的值一致.
};
}