bootstrap table动态表格配置详解

  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,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,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){    //删除每行数据
}