bootstrap-table 小试牛刀

因为修改项目，把bootstrap重新又拿起来做点东西。经典还是经典

做表格时候使用到大佬封装的bootstrap-table

直接代码说话
用到的知识点：
①自定义row样式，自定义事件
②分页处理
③动态控制table高度

 let tableListHeader =[
 {
 field: 'connDeviceType',
 title: '设备类型'
 }, {
 field: 'homeDeviceTypeName',
 title: '家电设备'
 },{
 field: 'countyName',
 title: '地市'
 },{
 field: 'cityName',
 title: '县区'
 },{
 field: 'userName',
 title: '用户名称'
 },{
 field: 'userAccount',
 title: '户号'
 },{
 field: 'onlineDays',
 title: '设备在线天数',
 events:operateEvents,
 formatter: function (value, row, index) {
   if(value){
     return  '<a href="#" id="jump" >'+value+'</a>'
   }
  }
 },{
 field: 'offlineDays',
 title: '设备离线天数'
 },
 ]

 //请求服务数据时所传参数
 function queryListParams(params){
   return{
     //每页多少条数据
     pageSize: params.limit,
     //请求第几页
     pageNo:params.offset/params.limit+1,
     timeType:timeType,   //自己后台接口需要的参数
     startTime:startTime,  //同上
     endTime:endTime,    //同上
   }
 }
 //请求成功方法   就是后返返回的json数据  根据具体情况进行解析
 function responseListHandler(res){
   let data = res.data;//在此做了错误代码的判断
   if(res.status != 0){
   alert("获取数据失败");
   return;
   }
 //如果没有错误则返回数据，渲染表格
   return {
     total : res.totalNum, //总页数,前面的key必须为"total"
     data : data.tableData //行数据，前面的key要与之前设置的dataField的值一致.
     }
 }

 function getEchartList() {

     $('#dialogList').height($("#myModal").height()-200+'px')  //根据 可见窗口，计算并给table容器赋高度
     $("#tableList").bootstrapTable('destroy');   //进行销毁，不然只会请求一次接口
     $('#tableList').bootstrapTable({
     method: 'post',
     contentType: "application/x-www-form-urlencoded",//必须要有！！！！
     url:"${ctx}/slms/zdDeviceStatus/onOffLineDaysDetail",//要请求的接口
     dataField: "data",   //根据后台给你返回的json数据
     pageNumber:1,
     pagination:true,//是否分页
     queryParams:queryListParams,//请求服务器时所传的参数
     sidePagination:'server',//指定服务器端分页
     pageSize:30,//单页记录数
     pageList:[10,20,30,50,100,200,500,1000],//分页步进值
     smartDisplay:false,
     responseHandler:responseListHandler,    //
     columns: tableListHeader,
     });

 }