JS表格组件神器bootstrap table使用指南详解(3)

表格的初始化也很简单,定义相关的参数即可。上面一些博主觉得重要的参数都加了注释,如果你的表格也有太多的页面需求,直接用必须的参数就能解决。

同样,在columns参数里面其实也有很多的参数需要设置,比如列的排序,对齐,宽度等等。这些博主觉得比较简单,不会涉及表格的功能,看看API就能搞定。

3.3、页面效果图展示:

JS表格组件神器bootstrap table使用指南详解

JS表格组件神器bootstrap table使用指南详解

4、其他常用且高级功能

4.1、实现表格奇偶行,背景颜色隔行显示;

单一的表格数据显示,看上去有些单调。通过设置表格奇偶行背景颜色隔行显示,会让表格更加生动。实际应用中经常会遇到。实现方法通过添加列方法,如图:

JS表格组件神器bootstrap table使用指南详解

var rowStyle = function (row, index) { var classes = ['success', 'info']; if (index % 2 === 0) {//偶数行 return { classes: classes[0]}; } else {//奇数行 return {classes: classes[1]}; } }

效果如图:

JS表格组件神器bootstrap table使用指南详解

4.2、实现表格行列合并;

表格的行列合并功能不用引用其他的js文件,只需要在html页面使用table的colspan和rowspan即可实现。

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

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