Bootstrap-table的使用小结

简介

Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。目前在github上已经有2600多个Star，可见其受欢迎程度。其官方网站地址 为：http://bootstrap-table.wenzhixin.net.cn/。

如何引入

两个js，一个css，我用的webjars管理的，写法如下

<link href="/webjars/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<script src="/webjars/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/webjars/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

pom 文件增加依赖

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap-table</artifactId>
    <version>1.9.1</version>
</dependency>

如何使用

html

在需要使用table的位置插入

<table id="table1" data-mobile-responsive="true" data-click-to-select="true">
    <thead>
        <tr>
            <th data-field="selectItem" data-checkbox="true"></th>
        </tr>
    </thead>
</table>

js

在页面下面添加js

<script type="text/javascript">
$('#table1').bootstrapTable({  
    columns: [  
        { field: 'id', title: 'ID' },  
        { field: 'title', title: '标题' },  
        { field: 'content', title: '内容' },  
    ] 
    ,
    url: '/list',
    showRefresh: true,     		//是否显示刷新按钮
    search: true,      		//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
    strictSearch: false,			//设置为 true启用 全匹配搜索，否则为模糊搜索
    pagination: true,			//是否显示分页条
    icons: {
        refresh: 'glyphicon-repeat',
        toggle: 'glyphicon-list-alt',
        columns: 'glyphicon-list'
    },
    
pagination: true,     		//是否显示分页（*）
clickToSelect: true,    	//是否启用点击选中行
//showToggle:true,                    //是否显示详细视图和列表视图
showColumns: true,                  //是否显示所有的列
});
</script>

参考

• 表格组件神器：bootstrap table详细使用指南
• bootstrap-table-examples