BootStrap table表格插件自适应固定表头(超好用)(2)

例二:需求,第二个表格后面有个显示进度的自定义单元格,并且第一行要求是做一个合计的统计展示,这两个功能需要用js来设定自定义行列

html代码:

<div> <table data-toggle="table" data-height="268"> <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代码:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfxsd.html