function initTable(tb) {
tb.bootstrapTable({
height: getHeight(),//設(shè)置高度
url: '', //請(qǐng)求后臺(tái)的URL（*）
toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存仆邓，默認(rèn)為true纵诞，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
showToggle: true, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
showExport: true,
detailView: false,
detailFormatter: false,
pageSize: 10,
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
showFooter: false,
minimumCountColumns: 2, //最少允許的列數(shù)
showPaginationSwitch: true,
pagination: true, //是否顯示分頁（*）
uniqueId: "id", //每一行的唯一標(biāo)識(shí)绘闷，一般為主鍵列
sidePagination: "server", //分頁方式：client客戶端分頁忆肾，server服務(wù)端分頁（*）
responseHandler: responseHandler,
queryParams: queryParams,
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
sortName: "id",
search: false, //是否顯示表格搜索，此搜索是客戶端搜索戏仓，不會(huì)進(jìn)服務(wù)端疚宇，所以，個(gè)人感覺意義不大
strictSearch: true,
showRefresh: true, //是否顯示刷新按鈕
clickToSelect: true, //是否啟用點(diǎn)擊選中行
cardView: false, //是否顯示詳細(xì)視圖
detailView: false, //是否顯示父子表
contentType: 'application/x-www-form-urlencoded',
columns: [{
checkbox:true
},{
field: 'state',
sortable: true,
title: '狀態(tài)',
formatter:function (value, row,index) {
color1 = "<span style='color:red;font-weight:bold'>未執(zhí)行計(jì)劃</span>";
color2 = "<span style='color:red;font-weight:bold'>計(jì)劃中斷中</span>";
color3 = "<span style='color:green;font-weight:bold'>運(yùn)行中</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
}]
});
};
//得到查詢的參數(shù)
function queryParams(params) {
//搜索欄
var val = $('#search_id').val();
//后臺(tái)獲取的查詢數(shù)據(jù)格式如下：
var search = '{"search_name1":"' + val + '","search_name2": "' + val + '" }';
var order = '{"' + params.sort + '":"' + params.order + '"}'
var temp = { //這里的鍵的名字和控制器的變量名必須一直赏殃，這邊改動(dòng)敷待，控制器也需要改成一樣的
pageSize: params.limit, //頁面大小
curPage: params.offset / params.limit + 1, //頁碼
search: search,
order: order,
};
return temp;
}
//把接口返回?cái)?shù)據(jù)格式改為正確的
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"
}
};
}
]
//可以在初始化表格時(shí)固定表格高度: height:100，固定表格高度很不友好仁热，需要根據(jù)表格內(nèi)容調(diào)整表格高度讼撒，使用下面的函數(shù)
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("確認(rèn)提交股耽？")){
$.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>'
};
