先看列部分的代码
<script>
$(document).ready(function() {
//调用函数,初始化表格
var oTable = new TableInit();
oTable.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
// var sname11 = $("#sname1").val();
var urlStr = '/getMetriclog';
//console.log(urlStr);
$('#studentTable').bootstrapTable({
url: urlStr, //请求后台的URL(*)
method: 'post', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
showRefresh: true, //增加刷新
showColumns: true, //显示列名
minimumCountColumns: 4, //最少允许的列数
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
queryParams: oTableInit.queryParams,//传递参数(*)
toolbar: '#exampleTableEventsToolbar',// 可以在table上方显示的一条工具栏,
/* queryParams : {
sname1 : 'r',
UserId : 'admin'
}, */
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
strictSearch: true,
clickToSelect: true, //是否启用点击选中行
height: 520, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "LId", //每一行的唯一标识,一般为主键列
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox : true
},{
field: 'MW_Name',
title: '模块名称'
}, {
field: 'MW_Host',
title: '主机'
}, {
field: 'LId',
title: '随机ID'
}, {
field: 'Log_Time',
class:'Msize',
title: '日志时间',
formatter: function (value, row, index) {
return changeDateFormat(value)
}
}, {
field: 'Req_QueryId',
title: '查询ID'
} , {
field: 'UserId',
title: '用户ID'
} , {
field: 'Web_ModuleId',
title: 'WEB模块ID'
} , {
field: 'Web_Module_Name',
title: 'WEB模块名'
} , {
field: 'Log_Level',
title: '日志级别'
} , {
field: 'Log_Line',
title: '日志流程'
} , {
field: 'Log_Text',
title: '日志TEXT',
visible: false
} , {
field: 'Log_Error',
title: '错误日志',
visible: false
} , {
field: 'Log_Stack',
title: '错误栈',
visible: false
}
]
// ,data: users
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
starttime : $("#startTime").val(),
endtime : $("#endTime").val(),
userid : $("#userid").val(),
search:params.search //页面条件筛选
};
return temp;
};
return oTableInit;
};
</script>
函数是这样的
<script>
//修改——转换日期格式(时间戳转换为datetime格式)
function changeDateFormat(cellval) {
if (cellval != null) {
var date = new Date(parseInt(cellval));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hh24 = date.getHours();
var mi = date.getMinutes();
var ss = date.getSeconds();
return date.getFullYear() + "-" + month + "-" + currentDate+" "+ hh24 +":"+mi+":"+ss;
}
}
</script>
二, 如何搞定上面的列宽呢。
自定义样式和宽度
.Msize .th-inner{
width:160px !important;
}