1.表头与表体对齐
第一步:给table加 table-layout:fixed
.bootstrap-table .table{
table-layout:fixed;
}
第二部:给表的每一列加宽度
columns: [{
checkbox : true,
title : '复选框',
field : 'pkid1',
halign:'center',
align : 'center'
}, {
title : '序号',
field : 'pkid',
halign:'center',
align : 'center' ,
sortable:true,
width:80
}, {
title : '主键',
field : 'S_XSGL_ID',
halign:'center',
align : 'center' ,
visible:false,
width:80
}, {
title : '学校名称',
field : 'S_XSGL_XXMC',
halign:'center',
align : 'center',
width:200
},{
title : '项目名称',
field : 'S_XSGL_XMMC',
halign:'center',
align : 'center',
width:200
}, /*{
title : '修缮编号',
field : 'S_XSGL_BH',
halign:'center',
align : 'center',
width:120
}, */{
title : '预算执行年份',
field : 'S_XSGL_XMNF',
halign:'center',
align : 'center',
width:160
}, {
title : '校区',
field : 'S_XSGL_XQ',
halign:'center',
align : 'center',
width:100
}, {
title : '地址',
field : 'S_XSGL_DZ',
halign:'center',
align : 'center',
width:200
}, {
title : '总资金(万元)',
field : 'S_XSGL_ZZJ',
halign:'center',
align : 'center',
width:120
}]
2.bootstrap table固定表头(主要的步骤:给表格加固定高度)
function initTableall(){ //获取表格父元素的高度,以便于赋值给表格 var tableHeight = $('#dataTable').parent().height();
if(tableHeight<500){ tableHeight=500; } //先销毁表格 $('#dataTable').bootstrapTable('destroy'); //初始化表格,动态从服务器加载数据 $('#dataTable').bootstrapTable({ url: '/singb/school/getAllSchoolInfoByConditionPage', //请求后台的URL(*) height:tableHeight, //获取父元素的高度,也可以自定义高度,此处设置上如果效果不满意,可以通过媒体查询的方式设置body //的宽度来达到需要的效果,信息信息看下图 method: 'post', //请求方式(*) dataType: "json", //返回数据类型 toolbar: '#exampleToolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) locale:'zh-CN', pagination: true, //是否显示分页(*) ajaxOptions: {async: false, timeout: 10000}, sortOrder: "desc", //排序方式 clickToSelect : false, // 点击行即可选中单选/复选框 queryParams: function queryParams(params){ //传递参数(*) var temp = { 'pageSize' : params.pageSize, 'pageNum' : params.pageNumber, }; return temp; },
pageSize: 20, //页面大小 每页显示条数
pageNumber: 1, //初始化加载第一页,默认第一页
pageList:[20], //设置表格每页显示的记录
showToggle: false, //名片格式
showColumns: true, //显示隐藏列
showRefresh: false, //显示刷新按钮
singleSelect: false, //复选框只能选择一条记录
search: false, //是否显示右上角的搜索框
clickToSelect: true, //点击行即可选中单选/复选框
queryParamsType : "", //查询参数组织方式 ,参数格式,发送标准的RESTFul类型的参数请求
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
silent: true, //刷新事件必须设置
contentType : "application/json", //请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
responseHandler: function (e) {//配置公办表格接受返回的配置项
//判断是否有返回数据,有的话加载 没有加提示信息
if (e.data.data.records && e.data.data.records.length > 0) {
return { "rows": e.data.data.records, "total": e.data.data.total };
}
else {
return { "rows": [], "total": 0 };
}
},
onLoadError: function (data) {
$("#dataTable").bootstrapTable('removeAll');
//toastr["info"]("info", "没有找到匹配的记录");
},
onLoadSuccess: function(data){
//返回数据成功后的回调函数
},
columns: [{
title: '全选',
checkbox: true,
align: "center",//水平
valign: "middle"//垂直
},{
field: 'rowId',
title: '序号',
align:'center',
visible: true,
}, {
field: 'schByThree',
title: '学校编号',
align:'center',
cellStyle:formatTableUnit,
visible: true
},{
field: 'schoolNam',
title: '学校名称',
align:'center',
cellStyle:formatTableUnit,
visible: true
}
{
field: 'sfdb',
title: '是否达标',
align:'center',
visible: false,
formatter: function(value,row,inde){
var result = value;
if(value == "1"){
result = "是";
}else if(value == "0"){
result = "否";
}
return result;
}
}]
});
}