function initTable(tb) {
tb.bootstrapTable({
height: getHeight(),//设置高度
url: '', //请求后台的URL（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
showToggle: true, //是否显示详细视图和列表视图的切换按钮
showExport: true,
detailView: false,
detailFormatter: false,
pageSize: 10,
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
showFooter: false,
minimumCountColumns: 2, //最少允许的列数
showPaginationSwitch: true,
pagination: true, //是否显示分页（*）
uniqueId: "id", //每一行的唯一标识，一般为主键列
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
responseHandler: responseHandler,
queryParams: queryParams,
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sortName: "id",
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showRefresh: true, //是否显示刷新按钮
clickToSelect: true, //是否启用点击选中行
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
contentType: 'application/x-www-form-urlencoded',
columns: [{
checkbox:true
},{
field: 'state',
sortable: true,
title: '状态',
formatter:function (value, row,index) {
color1 = "<span style='color:red;font-weight:bold'>未执行计划</span>";
color2 = "<span style='color:red;font-weight:bold'>计划中断中</span>";
color3 = "<span style='color:green;font-weight:bold'>运行中</span>";
color4 = "<span style='color:green;font-weight:bold'>已完成</span>";
if (value == 3) {
return color1;
} else if (value == 4) {
return color2;
} else if (value == 5) {
return color3;
}else{
return color4;
}
}
}, {
field: 'operate',
title: '操作',
align: 'center',
width : 300,
events: operateEvents,
formatter: operateFormatter
}]
});
};
//得到查询的参数
function queryParams(params) {
//搜索栏
var val = $('#search_id').val();
//后台获取的查询数据格式如下：
var search = '{"search_name1":"' + val + '","search_name2": "' + val + '" }';
var order = '{"' + params.sort + '":"' + params.order + '"}'
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageSize: params.limit, //页面大小
curPage: params.offset / params.limit + 1, //页码
search: search,
order: order,
};
return temp;
}
//把接口返回数据格式改为正确的
function responseHandler(res) {
//dosomething
//如field: 'state'的 formatter:function (value, row,index){}也可以挪到这里
}
$('#table_id').bootstrapTable('refresh');
columns: [
field: 'column1',
sortable: true,
title: 'column1_title',
cellStyle : function cellStyle(value, row, index) {
return {
css : {
"text-align" : "center"
}
};
}
]
//可以在初始化表格时固定表格高度: height:100，固定表格高度很不友好，需要根据表格内容调整表格高度，使用下面的函数
function getHeight() {
return $(window).height() - $('h1').outerHeight(true);
}
-
表格列中添加button按钮及事件
如初始化表格最后一列 field: 'operate'，其中 window.operateEvents需要放在初始化表格前面
window.operateEvents = {
'click .aaa': function (e, value,row, index) {
var formData=[]
formData.push({
name:"name1",
value:value1
});
formData.push({
name:"name2",
value:"value2"
});
// console.log(formData)
if(confirm("确认提交？")){
$.ajax({
url:"",
type: 'GET',
dataType: 'json',
data: formData,
headers: {
"Cache-Control" : "no-cache, no-store, must-revalidate",
"Pragma": "no-cache",
"Expires": "0"
},
// contentType: 'application/x-www-form-urlencoded',
success:function(data){
// var data = JSON.parse(data);
// alert(data.msg)
$('#table_id').bootstrapTable('refresh');
},
error:function(XMLResponse,XMLHttpRequest, textStatus, errorThrown){
// alert(XMLHttpRequest.status);
// alert(XMLHttpRequest.readyState);
// alert(textStatus);
// alert(XMLResponse)
$('#table_id').bootstrapTable('refresh');
// alert(XMLResponse.responseText)
},
// complete: function(XMLHttpRequest, textStatus) {
// alert(XMLHttpRequest.status);
// alert(XMLHttpRequest.readyState);
// alert(textStatus);
// }
})
}
else{
return
}
}
, 'click .bbb': function (e,value,row, index) {
//dosomething
}
};
function operateFormatter(value, row, index) {
return [
'<button type="button" id="aaa" class="btn btn-info aaa" style="margin-right: 10px;margin-left: 15px"><i class="fa fa-send " aria-hidden="true" ></i>aaa</button>'
,'<button type="button" id="bbb" class="btn btn-success bbb" style="margin-top: 10px;margin-right: 10px;margin-left: 15px"><i class="fa fa-play-circle-o " aria-hidden="true"></i>bbb</button>'
};
