bootstrap table动态表格配置详解

一、html部分  （只需要一个带ID的table即可）

<table id="tb_departments"></table>

二、主要部分（js动态渲染配置）

window.onload = function () {

   

  1 $('#tb_departments').bootstrapTable({
  2     sortOrder: "asc", //排序方式
  3     height: tableHeight(), // 动态配置表格高度
  4     pageNumber: 1, //初始化加载第一页，默认第一页
  5     pagination: true, //分页
  6     pageSize: 10000, //每页的记录行数（*）
  7     minimumCountColumns: 2, //最少允许的列数
  8     cardView: false, //是否显示详细视图
  9     showExport: false, //是否显示导出
 10     exportDataType: "basic", //basic', 'all', 'selected'.
 11     align: 'center',
 12     columns: [{
 13             field: 'cardId',
 14             visible: true, //是否显示
 15             align: 'center',
 16             valign: 'middle',  //垂直居中
 17             title: '序号'
 18         },
 19         {
 20             field: 'id',
 21             visible: false, //是否显示
 22             
 23         }, 
 24         {
 25             field: 'groupname',
 26             align: 'center',
 27             title: '所属中队',
 28             class: 'colStyle',  //动态添加每一列样式
 29             valign: 'middle',
 30         }, 
 31         {
 32             field: 'address',
 33             align: 'center',
 34             title: '打卡地点',
 35             valign: 'middle',    
 36             class: 'colStyle',
 37             formatter:paramsMatter,   //通过formatter方法为当前列动态添加一个回调函数
 38         },
 39         {
 40             field: 'workType',
 41             align: 'center',
 42             valign: 'middle',
 43             valign: 'middle', //设置表头列居中对齐
 44             class: 'colStyle',
 45             title: '白/夜班',
 46             
 47             
 48         },
 49         {
 50             field: 'classType',
 51             align: 'center',
 52             valign: 'middle',
 53             class: 'colStyle',
 54             title: '班次',
 55             
 56         },
 57         {
 58             field: 'startEarliestTime',
 59             align: 'center',
 60             class: 'colStyle',
 61             valign: 'middle',
 62             title: '上班开始打卡时间',
 63             
 64         },
 65 
 66         {
 67             field: 'startLatestTime',
 68             align: 'center',
 69             class: 'colStyle',
 70             valign: 'middle',
 71             title: '上班时间',
 72             
 73         },
 74         {
 75             field: 'middleTime',
 76             align: 'center',
 77             class: 'colStyle',
 78             valign: 'middle',
 79             title: '上班时间分割点',
 80         },
 81         {
 82             field: 'endEarliestTime',
 83             align: 'center',
 84             valign: 'middle',
 85             class: 'colStyle',
 86             title: '下班时间',
 87             
 88 
 89         },
 90         {
 91             field: 'endLatestTime',
 92             align: 'center',
 93             valign: 'middle',
 94             class: 'colStyle',
 95             title: '下班结束打卡时间',
 96             
 97         },
 98         {
 99             field: 'tonightFlag',
100             align: 'center',
101             valign: 'middle',
102             title: '跨天',
103             
104         },
105         {
106             field: 'username',
107             align: 'center',
108             title: '人员',
109             class: 'colStyle',
110             valign: 'middle',
111             formatter:paramsMatter1,
112             
113         },
114         {
115             field: 'distanceRange',
116             align: 'center',
117             valign: 'middle',
118             visible: false, //是否显示
119             title: '打卡范围(米)',
120             
121         },
122         {
123             field: 'click',
124             align: 'center',
125             class: 'colStyle',
126             valign: 'middle',
127             title: '操作',    
128             align: 'center',
129             formatter: function(value, row, index) {
130                 //console.log(row)
131                 var value = value;
132                 var index = index;
133                 var rowStr = row.id;
134                 //console.log(path);        
135                 var html =
136                     '<button type="button"  class="btn btn-primary btn-xs btndo" onclick="Edit(\'' +
137                     rowStr + '\')">修改</button>'
138                 html +=
139                     '<button type="button"  class="btn btn-primary btn-xs btndo" onclick="Delete(\'' +
140                     rowStr + '\')" >删除</button>'
141                 return html;
142             }
143         }
144     ],
145     formatNoMatches: function() {
146         return "暂无数据";
147     },
148   
153 });
      arr = [
             {
              "username":"张三"
             }
            ]
154  $("#tb_departments").bootstrapTable('load', arr);   //实例化完成后渲染表格数据
155  
    //下面是表格相关的回调函数
156 function paramsMatter(value, row, index) {    //对该列数据进行二次处理   比如过长显示“...”
157     var values = row.address.replace("浙江省杭州市","");//获取当前字段的值
158     if(values.length>6){     
159          return "<span title="+values+">"+values.slice(0,6)+"...</span>"
160     }else{
161          return "<span title="+values+">"+values+"</span>"
162     }
163    
168 }
169 function paramsMatter1(value, row, index) {
170     var values = row.username;//获取当前字段的值
171     var str = values.substring(0, values.lastIndexOf(','));
172     if(values.length>6){        
173          return "<span title="+str+">"+str.slice(0,6)+"...</span>"
174     }else{
175          return "<span title="+str+">"+str+"</span>"
176     }
177 
178 }
179 function tableHeight() {
180     //可以根据自己页面情况进行调整
181     return $(window).height() - 160;
182 }
    function Edit(data){    //对每行数据编辑
}
 function Delete(data){    //删除每行数据
}
三、注意（想修改表格样式的话小提示）
修改表头样式   在bootstraptable.css中搜   “.fixed-table-container thead th .th-inner”
修稿body中的td 搜 “.bootstrap-table .table:not(.table-condensed) > tfoot > tr > td”

 

}

 

posted @ 2019-06-20 15:36  tomofagain  阅读(7688)  评论(0)  编辑  收藏  举报