bootstrap-table插件配置

最新推荐文章于 2025-07-21 14:46:28 发布

zbailing

最新推荐文章于 2025-07-21 14:46:28 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/zbailing/article/details/93845931

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍Bootstrap Table插件的高级配置选项，包括表格模式切换、列显示控制、复选框设置等。通过实例展示了如何使用columns属性自定义表格内容和表头，以及如何通过formatter函数美化状态显示。

工具栏

<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 示例：