1、下载:
https://github.com/wenzhixin/bootstrap-table
2、文档:
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
3、引用:
注意:最后一个是一些提醒文字,如果有引用这个js则会以中文提示,如果没有则以英文提示。
4、基本用法:
html里:
js里:
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
这个data也可以换成url:
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
注意:url和data的区别是:url是异步请求远程数据;data是直接把数据赋值给他。在主表和子表都一样可以这样使用。
5、引入fonts:
一些图标需要用到bootstrap里面的文件,要从下载的bootstrap包里面拷贝过来放到对应的目录(看错误提醒)。
但是只放进去是访问不了的,因为他不是普通的文件,所以要设置。
进入iis管理器,找到“MIME类型”,双击进去,在右边菜单点击“添加”,分别添加以下类型:
.woff
application/x-font-woff
.woff2
application/x-font-woff
再刷新页面就可以加载fonts里面这些文件了。
6、定制组件
(function (){
function init(table,url,params,titles,hasCheckbox,toolbar){
$(table).bootstrapTable({
url: url, //请求后台的URL(*)
method: 'post', //请求方式(*)
toolbar: toolbar, //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: queryParams, //传递参数(*),这里应该返回一个object,即形如{param1:val1,param2:val2}
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 20, //每页的记录行数(*)
pageList: [20, 50, 100], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度