下面介绍一下bootstrapTable的用法，先贴一段代码：
//初始化设备信息列表
function initEqpmtPage(){
var viewUrl=$basePath+"system/surveystationproperty/selEqpmt.do";
$("#eqpmtList").bootstrapTable({
url : viewUrl, // 请求后台的URL（*）
method : 'post', // 请求方式（*）
toolbar : "#toolbar", // 工具按钮用哪个容器
striped : true, // 是否显示行间隔色
contentType : "application/json", // 请求体类型定义。
//height : 480, // 行高，如果没有设置height属性，表格自动根据记录条数设置表格高度
pageSize : _ioms_pageSize, // 每页的记录行数（*）
pageList : _ioms_pageList, // 可供选择的每页的行数（*）
pagination : true, // 是否显示分页（*）
singleSelect : true, // 只能单选
sidePagination : "server", // 分页方式：client客户端分页，server服务端分页（*）
queryParams : RequestParams,// 传递参数（*）
strictSearch : true, // 设置为 true启用 全匹配搜索，否则为模糊搜索
clickToSelect : true, // 是否启用点击选中行
// minimumCountColumns: 2, //最少允许的列数
uniqueId : "overseeid", // 每一行的唯一标识，一般为主键列
dataType : "json", // 从服务端接收数据类型定义。
responseHandler: ioms_responseHandler,//加载服务器数据之前的处理程序，可以用来格式化数据。
columns : [{
field : '',
align : 'center',
title : '序号',
formatter: function (value, row, index) {
return index+1;
}
},{
field : 'eqnm',
align : 'center',
title : '设备名称'
},{
field : 'typenm',
align : 'center',
title : '设备类型'
},{
field : 'typenmb',
align : 'center',
title : '所属分类'
},{
field : 'cmpnm',
align : 'center',
title : '设备厂商',
width : '20%',
cellStyle:formatTableUnit,
formatter: operateOpinionFormatter
},{
field : 'pctmd',
align : 'center',
title : '产品型号'
},{
field : 'tmstp',
align : 'center',
title : '投入运行时间',
formatter:operateTMSRPFormatter
}],
onPageChange : onPageChange,
onLoadError: function () {
deletWin('提示','数据加载失败！','确定',function(){}).showModal();
}
});
}
下面就几个函数做一下介绍：
一：RequestParams是传递参数用的，具体用下如下：
function RequestParams (params) {
//var parameter={};
var omoid=$("#omoidid").val();
parameter.omoid=omoid;
//点击单位列表，将单位id传到后台根据单位id将对应的用户列表显示
var temp = {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageNumber: this.pageNumber, //页码
pageSize: this.pageSize ,//页面条数
ParameterObject:parameter
};
return temp;
};
二：设备厂商这列，由于字数太多在表格中显示不下，需要做一个超过字数就悬浮的操作。
operateOpinionFormatter函数是判断超过的字数的，当字数超过5就会用...代替，formatTableUnit这个函数是设置悬浮的。
//设备厂商当字数超过5,悬浮
function operateOpinionFormatter(value, row, index){
if(value.length>5){
return "<span title='"+value+"'>"+value.substring(0,5)+"..."+"</span>";
}else{
return "<span title='"+value+"'>"+value.substring(0,value.length)+"</span>";
}
}
//设备厂商悬浮
function formatTableUnit(value, row, index) {
// var front_color = 'red';
// var bg_color = 'white';
return {
css: {
// "color":'red',
// "background-color": bg_color,
"overflow": 'hidden',
"text-overflow":'ellipsis',
"white-space":'nowrap'
}
};
}
三：在投入运行时间这块因为只需要显示到分，所以做一个截取。
//格式化时间
function operateTMSRPFormatter(value, row, index){
//设备信息列表格式化时间
var html =('<span>'+row.tmstp.substr(0,10)+'</span>');
return html;
}