这里有新鲜出炉的 Bootstrap v3 教程,程序狗速度看过来!
Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范,它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎,一直是 GitHub 上的热门开源项目,包括 NASA 的 MSNBC(微软全国广播公司)的 Breaking News 都使用了该项目。
这篇文章主要介绍了 BootStrap table 表格插件自适应固定表头 (超好用) 的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
首先是简单的页面形式,大家可以按照平常画表格的方式来创建 html 表格,然后通过 js 控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快)
当然,也可以只在页面上放一个 table 标签,之后的所有数据和样式都通过 js 控制也是可以的,后面会说(优点方便控制修改数据,尤其是 ajax 方式获取的 json 格式,但是调整样式比较麻烦)
ps:这个是插件的官网,里面有英文 api 和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/
还有,使用前请引入 bootstrap 的相关 css,js,jQuery,以及 bootstrap-table 的 css,js 至少这 5 个基本文件
一,html 表格方式
例一:需求,简单的表格数据呈现,表头是两行,还有一个上下浮的箭头
分析:很简单,只需要 html 就可以实现,按照常规的表格来画,添加上 bootstrap-table 独有的自定义属性即可,注意如果不使用 js 请在最开始的 table 标签中加上 data-toggle
html 代码:
- <div>
- <table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover"
- id="tableL01">
- <thead>
- <tr>
- <th data-field="lhc" data-rowspan="2" data-align="center" data-valign="middle">
- 来耗存
- </th>
- <th data-field="dr" data-colspan="3" data-align="center" data-valign="middle">
- 当日
- </th>
- <th data-field="bz" data-colspan="3" data-align="center" data-valign="middle">
- 本周
- </th>
- <th data-field="by" data-colspan="3" data-align="center" data-valign="middle">
- 本月
- </th>
- </tr>
- <tr>
- <th data-field="drbq" data-align="center" data-valign="middle">
- 本期
- </th>
- <th data-field="drtb" data-align="center" data-valign="middle">
- 同比
- </th>
- <th data-field="drhb" data-align="center" data-valign="middle">
- 环比
- </th>
- <th data-field="bzbq" data-align="center" data-valign="middle">
- 本期
- </th>
- <th data-field="bztb" data-align="center" data-valign="middle">
- 同比
- </th>
- <th data-field="bzhb" data-align="center" data-valign="middle">
- 环比
- </th>
- <th data-field="bybq" data-align="center" data-valign="middle">
- 本期
- </th>
- <th data-field="bytb" data-align="center" data-valign="middle">
- 同比
- </th>
- <th data-field="byhb" data-align="center" data-valign="middle">
- 环比
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 来煤量
- </td>
- <td>
- 21341
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 0.31
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 0.21
- </td>
- <td>
- 334322
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 1.13
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 4.21
- </td>
- <td>
- 3125113
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 2.21
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 2.94
- </td>
- </tr>
- <tr>
- <td>
- 来煤量
- </td>
- <td>
- 76573
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 4.21
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 1.45
- </td>
- <td>
- 234534
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 4.35
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 2.75
- </td>
- <td>
- 44225
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 0.74
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 3.45
- </td>
- </tr>
- <tr>
- <td>
- 耗煤量
- </td>
- <td>
- 43363
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 0.31
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 0.21
- </td>
- <td>
- 32422
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 1.13
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 4.21
- </td>
- <td>
- 13345
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 2.21
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 2.94
- </td>
- </tr>
- <tr>
- <td>
- 来煤量
- </td>
- <td>
- 34624
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 4.35
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 1.23
- </td>
- <td>
- 452346
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 2.32
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 0.05
- </td>
- <td>
- 94524
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 2.21
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 2.94
- </td>
- </tr>
- <tr>
- <td>
- 耗煤量
- </td>
- <td>
- 21341
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 0.31
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 0.21
- </td>
- <td>
- 334322
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 1.13
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 4.21
- </td>
- <td>
- 3125113
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 2.21
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 2.94
- </td>
- </tr>
- <tr>
- <td>
- 耗煤量
- </td>
- <td>
- 21341
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 0.31
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 0.21
- </td>
- <td>
- 334322
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 1.13
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 4.21
- </td>
- <td>
- 3125113
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 2.21
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 2.94
- </td>
- </tr>
- <tr>
- <td>
- 耗煤量
- </td>
- <td>
- 21341
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 0.31
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 0.21
- </td>
- <td>
- 334322
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 1.13
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 4.21
- </td>
- <td>
- 3125113
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 2.21
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 2.94
- </td>
- </tr>
- <tr>
- <td>
- 耗煤量
- </td>
- <td>
- 21341
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 0.31
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 0.21
- </td>
- <td>
- 334322
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 1.13
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 4.21
- </td>
- <td>
- 3125113
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 2.21
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 2.94
- </td>
- </tr>
- <tr>
- <td>
- 耗煤量
- </td>
- <td>
- 21341
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 0.31
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 0.21
- </td>
- <td>
- 334322
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 1.13
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 4.21
- </td>
- <td>
- 3125113
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 2.21
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 2.94
- </td>
- </tr>
- <tr>
- <td>
- 耗煤量
- </td>
- <td>
- 21341
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 0.31
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 0.21
- </td>
- <td>
- 334322
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 1.13
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 4.21
- </td>
- <td>
- 3125113
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-down'>
- </i>
- 2.21
- </td>
- <td>
- <i class='glyphicon glyphicon-arrow-up'>
- </i>
- 2.94
- </td>
- </tr>
- </tbody>
- </table>
- </div>
例二:需求,第二个表格后面有个显示进度的自定义单元格,并且第一行要求是做一个合计的统计展示,这两个功能需要用 js 来设定自定义行列
html 代码:
- <div>
- <table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover"
- id="tableL02">
- <thead>
- <tr>
- <th data-field="id" data-align="center" data-valign="middle">
- 序号
- </th>
- <th data-field="gys" data-align="center" data-valign="middle">
- 供应商
- </th>
- <th data-field="pz" data-align="center" data-valign="middle">
- 品种
- </th>
- <th data-field="rz" data-align="center" data-valign="middle">
- 热值
- </th>
- <th data-field="mj" data-align="center" data-valign="middle">
- 煤价
- </th>
- <th data-field="bmdj" data-align="center" data-valign="middle">
- 标煤单价
- </th>
- <th data-field="drlm" data-align="center" data-valign="middle">
- 当日来煤
- </th>
- <th data-field="ljlm" data-align="center" data-valign="middle">
- 累计来煤
- </th>
- <th data-field="yjhl" data-align="center" data-valign="middle">
- 月计划量
- </th>
- <th data-field="yjhjd" data-align="center" data-valign="middle" data-formatter="progress">
- 月计划完成进度
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 2
- </td>
- <td>
- 双欣矿业
- </td>
- <td>
- 低硫煤
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- 6686.08
- </td>
- <td>
- 30000
- </td>
- <td>
- 22%
- </td>
- </tr>
- <tr>
- <td>
- 3
- </td>
- <td>
- 伊泰股份
- </td>
- <td>
- 工程煤
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- 51888.72
- </td>
- <td>
- 70000
- </td>
- <td>
- 74%
- </td>
- </tr>
- <tr>
- <td>
- 4
- </td>
- <td>
- 嘉远公司
- </td>
- <td>
- 中高硫煤
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- 20041.86
- </td>
- <td>
- 90000
- </td>
- <td>
- 100%
- </td>
- </tr>
- <tr>
- <td>
- 5
- </td>
- <td>
- 爱地能源
- </td>
- <td>
- 低硫煤
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- 5191.08
- </td>
- <td>
- 30000
- </td>
- <td>
- 0%
- </td>
- </tr>
- <tr>
- <td>
- 6
- </td>
- <td>
- 恒泰煤炭
- </td>
- <td>
- 中高硫煤
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- 18265.56
- </td>
- <td>
- 0
- </td>
- <td>
- 22%
- </td>
- </tr>
- <tr>
- <td>
- 7
- </td>
- <td>
- 双欣矿业
- </td>
- <td>
- 低硫煤
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- 6686.08
- </td>
- <td>
- 30000
- </td>
- <td>
- 22%
- </td>
- </tr>
- <tr>
- <td>
- 8
- </td>
- <td>
- 双欣矿业
- </td>
- <td>
- 低硫煤
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- 6686.08
- </td>
- <td>
- 30000
- </td>
- <td>
- 22%
- </td>
- </tr>
- <tr>
- <td>
- 9
- </td>
- <td>
- 双欣矿业
- </td>
- <td>
- 低硫煤
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- 6686.08
- </td>
- <td>
- 30000
- </td>
- <td>
- 22%
- </td>
- </tr>
- </tbody>
- </table>
- </div>
js 代码:
- //声明用来统计合计(累计来煤,月计划)的变量
- var yjhArr=[];
- var ljlmArr=[];
- //显示进度条的自定义列
- function progress (value,row){
- var width=parseInt(row.yjhjd);
- var red='#e63737';
- var blue='#b6ccf4';
- yjhArr.push(row.yjhl);
- ljlmArr.push(row.ljlm);
- return "<div style='height:20px;border:1px solid #b6ccf4;'><span style='display:block;float:left;width:"+width+"%;height:100%;background-color:"+<br>(width>=100?red:blue)+";'>"+value+"</span></div>"
- }
- //计算合计数值的方法
- function yjhTotal(){
- var subyjh=0;
- var subljlm=0;
- var row=[];
- for(var i=0;i<yjhArr.length;i++){
- if(yjhArr[i]==""){
- yjhArr[i]=0;
- }
- subyjh+=parseFloat(yjhArr[i]);
- }
- for(var j=0;j<ljlmArr.length;j++){
- if(ljlmArr[j]==""){
- ljlmArr[j]=0;
- }
- subljlm+=parseFloat(ljlmArr[j]);
- }
- row.push({
- id:1,
- gys:'合计',
- pz:'',
- rz:'',
- mj:'',
- bmdj:'',
- drlm:'',
- ljlm:subljlm.toFixed(2),
- yjhl:subyjh,
- yjhjd:'107%'
- });
- return row
- }
分析:自定义行列需要添加 data-formatter='方法名',其中 progress()方法中的参数 row,会在表格生成行的时候每生成一行就执行一次并将该行的对象传进来。
二:js 方式
通过这种方法,可以很方便的为表格设置参数,处理数据方面十分便捷,尤其是设置请求方式和地址时,不过这个项目暂时只是静态页面,有关数据的以后接触在写上来
例一:同上例一
html:
- <div>
- <table class="table table-striped table-bordered table-hover" id="tableL01">
- </table>
- </div>
js:
- //表格插件(表一)开始
- $('#tableL01').bootstrapTable({
- height: 268,
- //模拟数据
- columns: [[{
- align: 'center',
- valign: 'middle',
- field: 'lhc',
- title: '来耗存',
- rowspan: 2
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'dr',
- title: '当日',
- colspan: 3
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'bz',
- title: '本周',
- colspan: 3
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'by',
- title: '本月',
- colspan: 3
- }], [{
- align: 'center',
- valign: 'middle',
- field: 'drbq',
- title: '本期'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'drtb',
- title: '同比',
- formatter: trend
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'drhb',
- title: '环比',
- formatter: trend
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'bzbq',
- title: '本期'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'bztb',
- title: '同比',
- formatter: trend
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'bzhb',
- title: '环比',
- formatter: trend
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'bybq',
- title: '本期'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'bytb',
- title: '同比',
- formatter: trend
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'byhb',
- title: '环比',
- formatter: trend
- }]],
- data: [{
- id: 1,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 2,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 3,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 4,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 5,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 6,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 7,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 8,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 9,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 10,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 11,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- },
- {
- id: 12,
- lhc: '来存量',
- drbq: '21341',
- drtb: '0.21',
- drhb: '0.33',
- bzbq: '35624',
- bztb: '1.62',
- bzhb: '3.16',
- bybq: '42613',
- bytb: '2.78',
- byhb: '1.59'
- }]
- });
- //模拟数据结束
- //上下浮动箭头样式添加
- function trend(value, row) {
- var trendIcon = row.id % 2 === 0 ? 'glyphicon glyphicon-arrow-down': 'glyphicon glyphicon-arrow-up';
- return "<i class='" + trendIcon + "'></ i>" + value
- }
- //表格插件一结束
分析:$('#tableL01').bootstrapTable({})是插件开始的标志,在其中添加表格的参数,然后在 data:是表格的数据,而 columns 中则是设置列参数以及表格数据的地方,其中这个项目有代表性的是表头分为两部分,因此需要在 columns 中加两个数组【{}】,【{}】。之前都写在一个数组里,而源代码遍历的是 columns 的 length
例二:
html 相同都是只需要一个带 id 的 table 标签即可
js:
- //表格插件(表二)开始
- //声明用来统计合计(累计来煤,月计划)的变量
- var yjhArr = [];
- var ljlmArr = [];
- $('#tableL02').bootstrapTable({
- height: 268,
- //模拟数据
- columns: [{
- align: 'center',
- valign: 'middle',
- field: 'id',
- title: '序号'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'gys',
- title: '供应商'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'pz',
- title: '品种'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'rz',
- title: '热值'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'mj',
- title: '煤价'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'bmdj',
- title: '标煤单价'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'drlm',
- title: '当日来煤'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'ljlm',
- title: '累计来煤'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'yjhl',
- title: '月计划量'
- },
- {
- align: 'center',
- valign: 'middle',
- field: 'yjhjd',
- title: '月计划完成进度',
- formatter: progress
- }],
- data: [{
- id: 2,
- gys: '双欣矿业',
- pz: '低硫煤',
- rz: '',
- mj: '',
- bmdj: '',
- drlm: '',
- ljlm: '6686.08',
- yjhl: '30000',
- yjhjd: '22%'
- },
- {
- id: 3,
- gys: '伊泰股份',
- pz: '工程煤',
- rz: '',
- mj: '',
- bmdj: '',
- drlm: '',
- ljlm: '51888.72',
- yjhl: '70000',
- yjhjd: '74%'
- },
- {
- id: 4,
- gys: '嘉远公司',
- pz: '中高硫煤',
- rz: '',
- mj: '',
- bmdj: '',
- drlm: '',
- ljlm: '20041.86',
- yjhl: '90000',
- yjhjd: '100%'
- },
- {
- id: 5,
- gys: '爱地能源',
- pz: '低硫煤',
- rz: '',
- mj: '',
- bmdj: '',
- drlm: '',
- ljlm: '5191.08',
- yjhl: '',
- yjhjd: '0%'
- },
- {
- id: 6,
- gys: '恒泰煤炭',
- pz: '中高硫煤',
- rz: '',
- mj: '',
- bmdj: '',
- drlm: '',
- ljlm: '18265.56',
- yjhl: '',
- yjhjd: '0%'
- },
- {
- id: 6,
- gys: '恒泰煤炭',
- pz: '中高硫煤',
- rz: '',
- mj: '',
- bmdj: '',
- drlm: '',
- ljlm: '18265.56',
- yjhl: '',
- yjhjd: '0%'
- },
- {
- id: 6,
- gys: '恒泰煤炭',
- pz: '中高硫煤',
- rz: '',
- mj: '',
- bmdj: '',
- drlm: '',
- ljlm: '18265.56',
- yjhl: '',
- yjhjd: '0%'
- }]
- });
- //模拟数据结束
- //显示进度条的自定义列
- function progress(value, row) {
- var width = parseInt(row.yjhjd);
- var red = '#e63737';
- var blue = '#b6ccf4';
- yjhArr.push(row.yjhl);
- ljlmArr.push(row.ljlm);
- return "<div style='height:20px;border:1px solid #b6ccf4;'><span style='display:block;float:left;width:" + width + "%;height:100%;background-color:" + (width >= 100 ? red: blue) + ";'>" + value + "</span></div>"
- }
- //计算合计数值的方法
- function yjhTotal() {
- var subyjh = 0;
- var subljlm = 0;
- var row = [];
- for (var i = 0; i < yjhArr.length; i++) {
- if (yjhArr[i] == "") {
- yjhArr[i] = 0;
- }
- subyjh += parseFloat(yjhArr[i]);
- }
- for (var j = 0; j < ljlmArr.length; j++) {
- if (ljlmArr[j] == "") {
- ljlmArr[j] = 0;
- }
- subljlm += parseFloat(ljlmArr[j]);
- }
- row.push({
- id: 1,
- gys: '合计',
- pz: '',
- rz: '',
- mj: '',
- bmdj: '',
- drlm: '',
- ljlm: subljlm,
- yjhl: subyjh,
- yjhjd: '107%'
- });
- return row
- }
这个其实和第一种方式差别不大,只不过把自定义列放在数据中设置罢了。比较好理解。而关于其他参数可以参考官网,数据是动态的如何添加网上也有不少例子,只要都放在. bootstrapTable({})中就可以了
以上所述是小编给大家介绍的 BootStrap table 表格插件自适应固定表头 (超好用),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0528/332369.html