|
首先是简单的页面形式，大家可以按照平常画表格的方式来创建html表格，然后通过js控制特殊的样式等操作（优点是表格更加直观，方便调整表格样式等，速度快）
当然，也可以只在页面上放一个table标签，之后的所有数据和样式都通过js控制也是可以的，后面会说（优点方便控制修改数据，尤其是ajax方式获取的json格式，但是调整样式比较麻烦）
ps：这个是插件的官网，里面有英文api和例子：
还有，使用前请引入bootstrap的相关css，js，jQuery，以及bootstrap-table的css，js至少这5个基本文件
一，html表格方式
例一：需求，简单的表格数据呈现，表头是两行，还有一个上下浮的箭头
分析：很简单，只需要html就可以实现，按照常规的表格来画，添加上bootstrap-table独有的自定义属性即可，注意如果不使用js请在最开始的table标签中加上data-toggle
html代码：
|
|
|
|
|
|
|
|
|
|
|
|
0.310.211.134.212.212.944.211.454.352.750.743.450.310.211.134.212.212.944.351.232.320.052.212.940.310.211.134.212.212.940.310.211.134.212.212.940.310.211.134.212.212.940.310.211.134.212.212.940.310.211.134.212.212.940.310.211.134.212.212.94
例二：需求，第二个表格后面有个显示进度的自定义单元格，并且第一行要求是做一个合计的统计展示，这两个功能需要用js来设定自定义行列
html代码：
|
|
|
|
|
|
|
|
|
|
js代码：
"+value+" "
}
//计算合计数值的方法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i
分析：自定义行列需要添加data-formatter=‘方法名'，其中progress（）方法中的参数row，会在表格生成行的时候每生成一行就执行一次并将该行的对象传进来。
二：js方式
通过这种方法，可以很方便的为表格设置参数，处理数据方面十分便捷，尤其是设置请求方式和地址时，不过这个项目暂时只是静态页面，有关数据的以后接触在写上来
例一：同上例一
html：
js：
"+value
}
//表格插件一结束
分析：$('#tableL01').bootstrapTable（{}）是插件开始的标志，在其中添加表格的参数，然后在data：是表格的数据，而columns中则是设置列参数以及表格数据的地方，其中这个项目有代表性的是表头分为两部分，因此需要在columns中加两个数组【{}】，【{}】。之前都写在一个数组里，而源代码遍历的是columns的length
例二：
html相同都是只需要一个带id的table标签即可
js：
"+value+" "
}
//计算合计数值的方法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i
这个其实和第一种方式差别不大，只不过把自定义列放在数据中设置罢了。比较好理解。而关于其他参数可以参考官网，数据是动态的如何添加网上也有不少例子，只要都放在.bootstrapTable（{}）中就可以了
以上所述是小编给大家介绍的BootStrap table表格插件自适应固定表头(超好用)。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
| 