bootstrap-table插件 配置

工具栏 

<table id="teacher_table" data-toggle="table"
                          data-toolbar="#toolbar"
                          data-sortable="true"
                          data-show-toggle="true"
                          data-show-columns="true"
                          data-reorderable-columns="true"
                          data-page-size="5">
</table>

data-show-toggle="true" 控制表格模式切换。

data-show-columns="true" 控制表格列显示。

columns属性

field：表格的主体内容，值为行记录数据中的字段
title：表格的表头内容
formatter：function(value, row, index){}，设置formatter会使field失效
events：function(value, row, index){}

• value：字段值
• row：行记录数据
• index：行索引

columns: [
                    {
                        field: 'username',
                        title: '用户'
                    },{
                        field: 'status', //表格主体内容
                        title: '状态', //表格表头内容
                        formatter: function(value,row,index){
                            if(row.status){
                                if(row.status == 'OPEN'){
                                    return '<i class="green">open</i>';
                                }
                                if(row.status == 'LOCK'){
                                    return '<i class="red">lock</i>';
                                }else {
                                    return '<i class="grey">'+row.status+'</i>';
                                }
                            }
                        }
                    }
]

行记录数据 row 示例：

---

原文链接：

https://www.jianshu.com/p/524a205e71e7

---

相关链接：

bootstrap-table表格插件的复选框设置

bootstrap-table插件配置参数、属性、事件列表