1、首先，先上全部配置：
$tomcatBootstrapTable = $("#connectionInstances").bootstrapTable({ // 对应table标签的id
url: "dfc/getDFC", // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
striped: true, //表格显示条纹，默认为false
pagination: true, // 在表格底部显示分页组件，默认false
pageList: [10, 20], // 设置页面可以显示的数据条数
pageSize: 10, // 页面数据条数
pageNumber: 1, // 首页页码
idField: "id", //标识哪个字段为id主键
showColumns: true, // 显示列多选功能
showRefresh: true, //显示刷新按钮
silent: true, //刷新事件必须设置
clickToSelect: true,//点击行即可选中单选/复选框
toolbar: "#toolbar", //设置工具栏的Id或者class
search: true,//是否显示搜索
// strictSearch: true ,//Enable the strict search.
sortable: true, //是否启用排序
sortName: 'id', // 要排序的字段
sortOrder: 'desc', // 排序规则
sidePagination: 'server', // 设置为服务器端分页
editable:true,//开启编辑模式
queryParamsType : "undefined",
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
// console.log(params)
return {
pageNumber : params.pageNumber,
pageSize : params.pageSize,
searchText:params.searchText,
sortName:params.sortName, // 要排序的字段
sortOrder:params.sortOrder // 排序规则
}
},
columns: [
{
checkbox: true, // 显示一个勾选框
align: 'center', // 居中显示
valign: 'middle' // 上下居中
}, {
field: 'name', // 返回json数据中的name
title: '实例名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
sortable:true
}, {
field: 'db_name',
title: '数据库名',
align: 'center',
valign: 'middle',
sortable:true,
editable: {
type: 'text',
title: '数据库名',
mode: "inline",
validate: function (v) {
if (!v) return '数据库名不能为空';
}
}
}, {
field: 'db_type',
title: '数据库类型',
align: 'center',
valign: 'middle',
formatter: function (value, row, index){ // 单元格格式化函数
if (value == 1) {
return "Mysql";
} else if (value == 2) {
return "Oracle";
}
}
}, {
field: 'create_time',
title: '创建时间',
align: 'center',
valign: 'middle',
sortable:true,
formatter: function (value, row, index) {
return formatDate(value);
}
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 160, // 定义列的宽度，单位为像素px
formatter: function (value, row, index) {
// console.log(value, row , index);
// 根据 state来设置 启动 / 关闭
let state = row.state;
let btn = state === 0 ? '<button class="btn btn-info btn-sm" onclick="index.bootstrapTomcat(' + row.id + ',' + row.state + ')">启动</button>'
: '<button class="btn btn-warning btn-sm" onclick="index.bootstrapTomcat(' + row.id + ',' + row.state + ')">关闭</button>';
return '<button class="btn btn-danger btn-sm" onclick="index.del(\'' + row.id + '\',0)">删除</button> ' + btn;
}
}
],
formatLoadingMessage: function () {
return "请稍等，正在加载中...";
},
formatNoMatches: function () { //没有匹配的结果
return '无符合条件的记录';
},
onLoadSuccess: function(){ //加载成功时执行
console.info("加载成功");
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
},
onEditableSave: function (field, row, oldValue, $el) {
console.log(row);
$.ajax({
type: "post",
url: "assignment_update.do",
data: row,
dataType: 'JSON',
success: function (data, status) {
/*if (status == "success") {
alert('提交数据成功');
}*/
//alert('提交数据成功');
},
error: function () {
//alert('编辑失败');
},
complete: function () {
}
});
}
});2、在页面上引入这些必要文件：
<!--table-->
<link rel="stylesheet" href="common/css/bootstrap-editable.css">
<link rel="stylesheet" href="common/css/bootstrap-table.min.css">
<script src="common/js/bootstrap-table.min.js"></script>
<script src="common/js/bootstrap-table-zh-CN.min.js"></script>
<!--启用编辑-->
<script src="common/js/bootstrap-editable.min.js"></script>
<script src="common/js/bootstrap-table-editable.js"></script>
<script src="common/js/bootstrap-table-export.js"></script>3、以下是依赖的文件