bootstraptable 汇总_bootstrap-table使用总结

1、下载：

https://github.com/wenzhixin/bootstrap-table

2、文档：

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

3、引用：

4、基本用法：

js里：

1 $('#table').bootstrapTable({2 columns: [{3 field: 'id',4 title: 'Item ID'5 }, {6 field: 'name',7 title: 'Item Name'8 }, {9 field: 'price',10 title: 'Item Price'11 }],12 data: [{13 id: 1,14 name: 'Item 1',15 price: '$1'16 }, {17 id: 2,18 name: 'Item 2',19 price: '$2'20 }]21 });

这个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类型”，双击进去，在右边菜单点击“添加”，分别添加以下类型：

1 .woff2 application/x-font-woff3

4 .woff25 application/x-font-woff

再刷新页面就可以加载fonts里面这些文件了。

6、定制组件

1 (function () {2 function init(table,url,params,titles,hasCheckbox,toolbar) {3 $(table).bootstrapTable({4 url: url, //请求后台的URL(*)5 method: 'post', //请求方式(*)6 toolbar: toolbar, //工具按钮用哪个容器7 striped: true, //是否显示行间隔色8 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性(*)

idField: "ProductId",   //标识哪个字段为id主键9 pagination: true, //是否显示分页(*)10 sortable: false, //是否启用排序11 sortOrder: "asc", //排序方式12 queryParams: queryParams, //传递参数(*)，这里应该返回一个object，即形如{param1:val1,param2:val2}13 sidePagination: "server", //分页方式：client客户端分页，server服务端分页(*)14 pageNumber:1, //初始化加载第一页，默认第一页15 pageSize: 20, //每页的记录行数(*)16 pageList: [20, 50, 100], //可供选择的每页的行数(*)17 search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大18 strictSearch: true,19 showColumns: true, //是否显示所有的列20 showRefresh: true, //是否显示刷新按钮21 minimumCountColumns: 2, //最少允许的列数22 clickToSelect: true, //是否启用点击选中行23 //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度24 uniqueId: "ID", //每一行的唯一标识，一般为主键列 showToggle: false,   //名片格式

cardView: false,//设置为True时显示名片(card)布局

25 showTo