bootstrapTable详解（排序，格式化时间，悬浮）

下面介绍一下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;

}