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 showToggle:true, //是否显示详细视图和列表视图的切换按钮26 cardView: false, //是否显示详细视图27 detailView: false, //是否显示父子表

formatLoadingMessage: function () {

return "请稍等，正在加载中...";

},

formatNoMatches: function () { //没有匹配的结果

return '无符合条件的记录';

},

onLoadError: function (data) {

$('#reportTable').bootstrapTable('removeAll');

},

onClickRow: function (row) {

window.location.href = "/qStock/qProInfo/" + row.ProductId;

},

28

29 columns: createCols(params,titles,hasCheckbox),30 data: [{31 id: 1,32 name: 'Item 1',33 price: '$1'34 }, {35 id: 2,36 name: 'Item 2',37 price: '$2'38 }]39 });40 }41 function createCols(params,titles,hasCheckbox) {42 if(params.length!=titles.length)43 return null;44 var arr = [];45 if(hasCheckbox)46 {47 var objc = {};48 objc.checkbox = true;49 arr.push(objc);50 }51 for(var i = 0;ipageSize,offset->pageNumber,search->searchText,sort->sortName(字段),order->sortOrder('asc'或'desc')61 function queryParams(params) {62 return { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的63 limit: params.limit, //页面大小64 offset: params.offset //页码65 //name: $("#txt_name").val()//关键字查询66 };67 }68 // 传'#table'69 createBootstrapTable = function (table,url,params,titles,hasCheckbox,toolbar) {70 init(table,url,params,titles,hasCheckbox,toolbar);71 }72

73 })();

1、调用：

1 createBootstrapTable('#table','',['id','name','price'],['Item ID','Item Name!','Item Price!'],true,'#toolbar');

2、模块：

注意，这些只要添加上一行代码就会自动显示的：

pagination 显示分页

search 搜索功能

showColumns 控制显示哪些列的按钮

showRefresh 刷新按钮

showToggle 详细视图和列表视图切换按钮

但是这个不会：

toolbar

这个toolbar会关联到我们填的一个元素，但是他并不会自动创建所有菜单，而是我们要创建好菜单，他只不过把这个菜单放到合适的位置，实现这些菜单的功能还需要我们自己去做。toolbar如下：

新增

修改

删除

3、sidePagination

这个是选择服务端或者客户端分页，客户端则填'client'，服务端则填'server'，他们的数据结构是不同的。

这是客户端分页的数据结构：

1 [2 {3 "id": 0,4 "name": "Item 0",5 "price": "$0"

6 },7 {8 "id": 1,9 "name": "Item 1",10 "price": "$1"

11 },12 {13 "id": 2,14 "name": "Item 2",15 "price": "$2"

16 }17 ]

这是服务端分页的数据结构：

1 {2 "total": 200,3 "rows": [4 {5 "id": 0,6 "name": "Item 0",7 "price": "$0"

8 },9 {10 "id": 1,11 "name": "Item 1",12 "price": "$1"

13 },14 {15 "id": 2,16 "name": "Item 2",17 "price": "$2"

18 }19 ]20 }

这是因为客户端来分页的话，他直接根据数据总量进行判断要分成多少页，而服务端的话就需要返回一个total给他，因为服务端返回给的数据是一个片段，他没办法根据这个片段来计算多少页。

注意：这里可以看到，服务端分页和客户端分页数据结构的层次是不同的。他接受哪种数据结构，取决于是否加这个参数：

sidePagination:'server'

特别是做子表的时候，因为觉得没有做分页的必要，就没了这句话，结果就是数据过去了死活不显示，排查很久才发现是这个问题。

4、参数上传

我们知道，当我们对table设置一个url的时候，他不仅是请求这个url，他还会带一些参数上来，他到底带来了什么参数？

我们来一个最简单的测试一下：

$('#table').bootstrapTable({

striped:true,

pagination:true,

sidePagination:'server',

url:'/xx/yy',

columns: [{

field:'id',

title:'Item ID'}, {

field:'name',

title:'Item Name'}, {

field:'price',

title:'Item Price'}]

});

这里我们简单的初始化了一个bootstrap-table，数据来源我们指定了url，有个参数叫method，默认是'get'，也可以设为'post'，如果实际上线最好设为'post'，但是这里我们就用默认的好了，可以直接在浏览器的控制台看到他请求的参数。

我们可以看到带了一些参数上来

(1)order=asc表示排序是升序排序，这个我们可以在参数里面设置：sortOrder: "asc/desc"(两种选一种)

(2)offset=0表示从数据从哪个row开始，简单的说从第几行数据开始

(3)limit=10表示选取多少个数据，也就是一页有多少条数据

2,3跟参数pageNumber和pageSize是紧密关联的。

pageSize对应的就是limit，因此改变pageSize就改变了limit；

pageNumber结合pageSize可以算出offset。

比如pageNumber=1,pageSize=30，那么offset=0，limit=30；

比如pageNumber=2,pageSize=30，那么offset=30，limit=30。

他不传第几页上来，而是传从第几行开始，选取多少行，这样一个数据。

注意：pageNumber从1开始而非从0开始，但是offset是从0开始的。

如果我尝试设置pageNumber:0,pageSize:30我们会发现offset=-30,limit=30，这是不对的。

5、参数的查看、修改

那么我们可以直接查看这些参数以及修改吗？答案是可以的。

有个原始参数就是用来配置这个:

queryParams:testQParams

创建函数：

functiontestQParams(params) {

alert('params.limit='+params.limit+' params.offset='+params.offset);//我们可以这样查看这些要上传的参数

}

我们当然可以修改或者添加参数：

1 functiontestQParams(params) {2 return{3 limit:params.limit,4 offset:params.offset,5 order:params.order,6 abc:123,7 def:456

8 }9 }

有几点要注意：

1、我们当然可以修改limit、offset这些参数，但是不建议在这里改，我们可以用上面这种方式还给他赋值；

2、虽然没有改动他，我们也不要丢了，如果在这里没写参数就丢了，传递的参数会以这里的为准；

3、我们可以增加新的参数。

7、显示图片

字段通常是一个地址，那么我们要显示图片应该使用formatter：

1 {2 field: 'thumb_img',3 title: '主图',4 align: 'center',5 formatter:function(value,row,index) {6 return '';7 }8 }

可以直接定义宽度，图片会自动进行缩放。

8、行内编辑功能

<1>bootstrap-editable

需要一个bootstrap插件叫做bootstrap-editable，现在改名叫做x-editable了，可以适用不同的框架。

地址：https://github.com/vitalets/x-editable

下载下来之后，找到dist/bootstrap3-editable里面的3个文件夹css,js,img都拷贝到我们的网站目录下。

<2>bootstrap-table-editable

这是一个bootstrap-table的插件(插件的插件)，这个插件呢就在我们下载的bootstrap-table包里，路径是dist/extensions/editable

把他拷到我们的对应目录下即可

<3>引入

1

2

3

注意他们跟jquery、bootstrap、bootstrap-table的依赖关系，所以要放在他们的后面。

<4>使用1：

在列定义里面加上editable:true，比如：

1 field:'addr',2 title:'地址',3 editable:true,

就会变成可编辑状态了

<5>使用2：

编辑完成我们要添加一个回调

在bootstrapTable顶级的属性定义里面，添加一个回调函数：

1 onEditableSave:function(field,row,oldValue,$el) {2 //alert('保存addr='+row.addr+' id='+row.itemid);

3 }

这里我们可以看到当编辑完保存的时候就会调用到这个函数，在row里面有所有当前行的信息，那么我们可以通过把这个信息用ajax传递到服务器保存起来。

编辑功能完成。

<6>保存验证+ajax保存确认+取消保存

我们在实际开发当中，经常需要这样的功能：

(1)验证用户的输入是否正确；

(2)如果用户输入不正确，就不要在页面上显示了，直接显示保存不了；

(3)如果用户输入正确，通过ajax请求保存到后台；

(4)如果保存到后台失败，应该返回前端失败的消息，前端的内容回退到保存前的状态；

(5)如果保存成功，前端也做相应的显示样式调整及状态确定。

在上面“使用1”及“使用2”当中，当点击保存的时候，在save函数里验证不起作用，你再验证他也保存进去了。所以验证另有地方。

应该这样做：

(1)把editable:true改为：

1 validate:function(value) {2 value =$.trim(value);3 if (!value)4 {5 return '必须填入一个网址，不能放空！';6 }7 if (!checkUrl(value))8 {9 return '输入的不是一个合法的网址！';10 }11

另外，在这个函数里，要取的row数据可以这样：

1 var data = $('#table').bootstrapTable('getData');2 var index = $(this).parents('tr').data('index');3 console.log(data[index]);

这是因为这个$(this)可以指向这个当前单元格

这样输入就有验证功能，return一个字符串他会自动不保存进去，而显示这个字符串的提示。

注意，验证的保存规则：

如果return '';  则会保存空字符串；

如果return 'xxx';  则不会保存这个字符串，而是作为提示显示出来；

如果不return，则按照原value保存。

(2)把onEditableSave改为：

1 onEditableSave:function(field,row,oldValue,$el) {2 //测试证明oldValue取到的是undefined

3 $.post('xxx/yyy')4 .done(function(result) {5 //在这里解析result

6 if(保存成功)7 {8 //页面提示保存成功

9 }else

10 {11 //页面提示保存失败

12 //buy_addr_bak这个字段是从服务端传过来与buy_addr等值的一个字段，就是为了在必要的时候恢复数据

13 $el.text(row.buy_addr_bak);14 }15 //不管保存成功还是失败，已经不是编辑状态，把加粗去掉

16 $el.removeClass('editable-unsaved');17 });18 }

另外，在这个函数里，如果要取到row数据可以这样(虽然这里没有必要，参数里已经有了)：

1 var data = $('#table').bootstrapTable('getData');2 var index = $el.parent().parents('tr').data('index');//注意这里一个是parent,一个是parents

3 console.log(data[index]);

9、自动换行

在给table加上样式：

1 style="word-break:break-all; word-wrap:break-all;"

10、父子表

功能：点击行首的加号，下拉展开一个子表

<1>在父表的属性里添加

1 detailView:true

<2>添加回调函数

1 onExpandRow:function(index,row,$detail) {2 initSubTable(index,row,$detail);3 }

当点击行首的加号，将会触发这个回调函数，这个回调函数会再去调用执行函数。

<3>执行函数

1 functioninitSubTable(index,row,$detail) {2 var parentid =row.MENU_ID;3 var cur_table = $detail.html('

').find('table');//注意这个'table'不是一个id，他在任何情况下不需要改变

4 $(cur_table).bootstrapTable({5 url:'',6 method:'post',7 queryParams:{strParentID:parentid},8 ajaxOptions:{strParentID:parentid},9 clickToSelect:true,10 detailView:true,11 uniqueId:"MENU_ID",12 pageSize:10,13 pageList:[10,25],14 columns:[15 {16 filed:'from',17 title:'from'

18 },19 {20 field:'url',21 title:'url'

22 },23 {24 field:'to',25 title:'to'

26 }27 ],28 onExpandRow:function(index,row,$Subdetail) {29 initSubTable(index,row,$Subdetail);30 }31 });32 }

注意，这里做了一个递归，即子表里面还可以展开孙表，我们也可以不需要，去掉就可以了。

参考文章：

http://www.cnblogs.com/landeanfen/p/4976838.html