bootstrap小知识

整理的bootstrap小知识：

欢迎学习’

1、  如果让一个元素在pc端显示而在手机端隐藏，下列选项正确的是（b）。

A、 visible-xs-8  hidden-md

B、 visible-md-8 hidden-xs

C、 visible-md-8 hidden-sm

D、 visible-sm-8 hidden-md

　　详解：

　　a、 超小屏幕（<768px）显示，中屏（>=992px）隐藏，所以错误

　　b、 中屏（>=992px）显示，超小屏幕（<768px）隐藏，所以正确

　　c、 中屏（>=992px）显示，小屏幕（>=768px）隐藏，所以错误

　　d、 小屏幕（>=768px）显示，中屏（>=992px）隐藏，所以错误

 

2、 在bootstrap中，下列的类（c）可以使一个元素在打印使隐藏。

　　A、visible-print-block

　　B、 visible-print-inline

　　C、 hidden-print

　　D、   print-hidden

　　详解：

　　　　a、 浏览器：隐藏。打印机：可见。

　　　　b、 浏览器：隐藏。打印机：可见。

　　　　c、 浏览器：可见。打印机：隐藏。

　　　　d、 Bootstrap的打印类里面没有这个类。

 

3、 在bootstrap中，栅格系统的标准用法（c）是错误的。

　　A、<div class="container"><div class="row"></div></div>

　　B、 <div class="row"><div class="col-md-1"></div></div>

　　C、 <div class="row"><div class="container"></div></div>

　　D、   <div class="col-md-1"><div class="row"></div></div>

　　详解：

　　　　a、 .row的行必须包含在.container的容器中，所以正确。

　　　　b、 在.row的行中可以添加.column的列，所以正确

　　　　c、 .row的行必须包含在.container的容器中，所以错误。

　　　　d、 在.column的列中可以嵌套.row的行，所以正确。

 

4、 下列（d）不是正确的辅助类。

　　A、.text-muted。

　　B、 .text-danger。

　　C、 .tex-success。

　　D、   .text-title。

　　详解：正确的辅助类有：

　　　　a、  text-muted/text-primary/text-success/text-info/text-warning/text-danger

　　　　b、  text-muted/text-primary/text-success/text-info/text-warning/text-danger

　　　　c、  text-muted/text-primary/text-success/text-info/text-warning/text-danger

　　　　d、  text-muted/text-primary/text-success/text-info/text-warning/text-danger

 

5、 在bootstrap中，关于弹性布局的属性错误的是（d）。

A、flex

B、 flex-direction

C、 justify-content

D、   flex-container

　　详解：

　　　　a、 flex：伸缩性

　　　　b、 flex-direction：伸缩流动性

　　　　c、 justify-content：主轴对齐

　　　　d、 flex-wrap：伸缩换行，不是flex-container，没有这个方法

 

6、 在bootstrap中，关于flex-direction属性值错误的是（a）。

A、col

B、 row

C、 row-reverse

D、   column-reverse

　　详解：

　　　　a、 应该是：column（元素从上到下排列）。所以错误。

　　　　b、 row：默认值，元素从左到右排列。正确。

　　　　c、 row-reverse：元素从右到左排列。正确。

　　　　d、 column-reverse：元素从下到上排列。正确。

 

7、 在bootstrap中，关于flex-wrap属性值错误的是（b）。

A、nowrap

B、colwrap

C、wrap

D、wrap-reverse

　　详解：

　　　　a、nowrap：默认值，伸缩容器单行显示，伸缩项目不会换行。所以正确

　　　　b、没有这个属性值，所以错误。

　　　　c、wrap：伸缩容器多行显示，伸缩项目会换行。所以显示正确。

　　　　d、wrap-reverse：伸缩容器多行显示，伸缩项目会换行，且颠倒行顺序。正确。

 

8、 在bootstrap中，关于justify-content属性值错误的是（c）。

A、flex-start

B、flex-end

C、middle

D、space-between

　　详解：

　　　　a、flex-start：向一行的起始位置靠齐，所以正确。

　　　　b、flex-end：向一行的结束位置靠齐，所以正确。

　　　　c、应该是center：向一行的中间位置靠齐，所以错误。

　　　　d、space-between：平均分布在行内，第一个伸缩项目在一行的最开始。最后一个伸缩项目在一行的最终点，所以正确。

 

9、 在bootstrap中，关于align-items属性值错误的是（d）。

A、flex-start

B、flex-end

C、center

D、underline

　　详解：

　　　　a、flex-start：在侧轴起点的外边距紧靠该行在侧轴起始边，所以正确。

　　　　b、flex-end：在侧轴终点边的外边距紧靠该行在侧轴终点边，所以正确。

　　　　c、center：外边距盒在该行的侧轴上居中放置，所以正确。

　　　　d、应该是baseline：根据第一行文字的基线对齐，所以错误。

 

10、 在bootstrap中，（b）不是媒体查询类型的值。

A、all

B、speed

C、handheld

D、print

　　详解：

　　　　a、所有设备，所以正确。

　　　　b、不是媒体查询类型的值，所以错误。

　　　　c、便携设备，所以正确。

　　　　d、打印用纸或打印预览视图，所以正确。

 

11、 在bootstrap中，（）不是媒体特性的属性。

A、device-width

B、width

C、background

D、orientation

　　详解：

　　a、device-width：设置屏幕的输出宽度，所以正确。

　　b、width：渲染界面的宽度，所以正确。

　　c、应该是color：设置每种色彩的字节数，所以错误。

　　d、orientation：设置是是横屏或者竖屏，所以正确。

 

12、 在bootstrap中，（c）是错误的媒体查询的写法。

A、@media all and (min-width:1024px) { };

B、@media all and (min-width:640px) and (max-width:1023px) { };

C、@media all and (min-width:320px) or (max-width:639px) { };

D、@media screen and (min-width:320px) and (max-width:639px) { };

　　详解：

　　　　a、屏幕分辨率大于1024px，所以正确。

　　　　b、屏幕介于640px和1023px之间，所以正确。

　　　　c、Bootstrap的媒体查询中没有or关键词，所以错误。

　　　　d、屏幕介于320px和639px之间，所以正确。

 

13、 在bootstrap中，（b）不属于栅格系统的实现原理。

A、自定义容器的大小。平均分为12份

B、基于JavaScript开发的组件

C、结合媒体查询

D、调整内外边距

　　详解：

　　　　a) 可以自定义，分了12份。俗称12栅格系统，所以正确。

　　　　b) 基于jQuery开发的组件，所以错误。

　　　　c) 是实现流式布局的关键所在，所以正确。

　　　　d) Margin-left/margin-right： 15px；所以正确。

 

14、 在bootstrap中，关于响应式栅格系统（a）的描述是错误的。

A、.col-sx-：超小屏幕（<768px）。

B、.col-sm-：小屏幕、平板（>=768px）。

C、.col-md-：中等屏幕（>=992px）。

D、.col-lg-：大屏幕（>=1200px）。

　　详解：

　　　　a) col-xs-：超小屏幕，所以错误。

　　　　b) small，所以正确。

　　　　c) middle，所以正确。

　　　　d) large，所以正确。

 

15、 在bootstrap中，以下的（b）不是文本对其的方式。

A、.text-left

B、.text-middle

C、.text-right

D、text-justify

　　详解：

　　　　a) 左对齐用text-left，所以正确

　　　　b) 居中用text-center，所以错误

　　　　c) 右对齐用text-right，所以正确

　　　　d) 两端对齐用text-justify，所以正确

 

16、 在bootstrap中，下列（c）不属于验证提示状态的类。

A、.has-warning

B、.has-error

C、.has-danger

D、.has-success

　　详情：

　　　　a) .has-warning：警告（黄色）。所以正确。

　　　　b) .has-error：错误（红色）。所以正确。

　　　　c) 验证提示状态没有这个类。所以错误。

　　　　d) .has-success：成功（绿色）。所以正确。

 

17、 在bootstrap中，（d）不属于媒体查询的关键词。

A、and

B、not

C、only

D、or

　　详解：

　　　　a) and：同时满足这两者时生效，到达限定范围，所以正确。

　　　　b) not：排除某种指定的媒体类型，即排除符合表达式的设备，所以正确。

　　　　c) only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器，所以正确。

　　　　d) or：不是媒体查询的关键字，所以正确。

 

18、 在bootstrap中，下列（b）不属于按钮尺寸。

A、.btn-lg

B、.btn- md

C、.btn-sm

D、.btn-xs

　　详情：

　　　　a) .btn-lg：大按钮，所以正确

　　　　b) .btn-default：默认尺寸，所以错误

　　　　c) .btn-sm：小按钮，所以正确

　　　　d) .btn-xs：超小按钮，所以正确

 

19、 在bootstrap中，下列（b）类不属于button的预定义样式。

A、.btn-success

B、.btn-warp

C、.btn-info

D、.btn-link

　　详情：

　　　　a) .btn-success：成功信息，所以正确。

　　　　b) Bootstrap中的button预定义样式没有这个类，所以错误。

　　　　c) .btn-info：一般信息，所以正确。

　　　　d) .btn-link：链接信息，所以正确。

 

20、 在bootstrap中，下列（）不属于图片处理的类。

A、.img-rounded

B、.img-circle

C、.img-thumbnail

D、.img-radius

　　详情：

　　　　a) .img-rounded，border-radius：6px；正确

　　　　b) .img-circle，border-radius：50%；正确

　　　　c) .img-thumbnail，border-radius：4px, border: 1px solid #ddd;正确

　　　　d) Bootstrap中的图片没有这个类。错误

1、下载：

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

2、文档：

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

3、引用：

[html]  view plain  copy

1. <link rel="stylesheet" href="bootstrap.min.css">  
2. <link rel="stylesheet" href="bootstrap-table.css">  
3.   
4. <script src="jquery.min.js"></script>  
5. <script src="bootstrap.min.js"></script>  
6. <script src="bootstrap-table.js"></script>  
7. <script src="bootstrap-table-zh-CN.js"></script>  

注意：最后一个是一些提醒文字，如果有引用这个js则会以中文提示，如果没有则以英文提示。

4、基本用法：

html里：

[html]  view plain  copy

1. <table id="table"></table>  

js里：

[javascript]  view plain  copy

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：

[javascript]  view plain  copy

1. $('#table').bootstrapTable({  
2.     url: 'data1.json',  
3.     columns: [{  
4.         field: 'id',  
5.         title: 'Item ID'  
6.     }, {  
7.         field: 'name',  
8.         title: 'Item Name'  
9.     }, {  
10.         field: 'price',  
11.         title: 'Item Price'  
12.     }, ]  
13. });  

注意：url和data的区别是：url是异步请求远程数据；data是直接把数据赋值给他。在主表和子表都一样可以这样使用。

5、引入fonts：

一些图标需要用到bootstrap里面的文件，要从下载的bootstrap包里面拷贝过来放到对应的目录（看错误提醒）。

但是只放进去是访问不了的，因为他不是普通的文件，所以要设置。

进入iis管理器，找到“MIME类型”，双击进去，在右边菜单点击“添加”，分别添加以下类型：

[html]  view plain  copy

1. .woff  
2. application/x-font-woff  
3.   
4. .woff2            
5. application/x-font-woff  

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

6、定制组件

[javascript]  view plain  copy

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，所以一般情况下需要设置一下这个属性（*）  
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",                     //每一行的唯一标识，一般为主键列  
25.             showToggle:true,                    //是否显示详细视图和列表视图的切换按钮  
26.             cardView: false,                    //是否显示详细视图  
27.             detailView: false,                  //是否显示父子表  
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;i<params.length;i++)  
52.         {  
53.             var obj = {};  
54.             obj.field = params[i];  
55.             obj.title = titles[i];  
56.             arr.push(obj);  
57.         }  
58.         return arr;  
59.     }  
60.     //可发送给服务端的参数：limit->pageSize,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、调用：

[javascript]  view plain  copy

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

2、模块：

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

[html]  view plain  copy

1. pagination 显示分页  
2. search     搜索功能  
3. showColumns  控制显示哪些列的按钮  
4. showRefresh  刷新按钮  
5. showToggle   详细视图和列表视图切换按钮  

但是这个不会：

[html]  view plain  copy

1. toolbar  

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

[html]  view plain  copy

1. <div id="toolbar" class="btn-group">  
2.     <button id="btn_add" type="button" class="btn btn-default">  
3.         <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增  
4.     </button>  
5.     <button id="btn_edit" type="button" class="btn btn-default">  
6.         <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改  
7.     </button>  
8.     <button id="btn_delete" type="button" class="btn btn-default">  
9.         <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除  
10.     </button>  
11. </div>  

3、sidePagination

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

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

[html]  view plain  copy

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. ]  

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

[html]  view plain  copy

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给他，因为服务端返回给的数据是一个片段，他没办法根据这个片段来计算多少页。

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

[javascript]  view plain  copy

1. sidePagination:'server'  

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

4、参数上传

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

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

[javascript]  view plain  copy

1. $('#table').bootstrapTable({  
2.     striped: true,  
3.     pagination:true,  
4.     sidePagination:'server',  
5.     url:'/xx/yy',  
6.     columns: [{  
7.         field: 'id',  
8.         title: 'Item ID'  
9.     }, {  
10.         field: 'name',  
11.         title: 'Item Name'  
12.     }, {  
13.         field: 'price',  
14.         title: 'Item Price'  
15.     }]  
16. });  

这里我们简单的初始化了一个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、参数的查看、修改

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

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

[javascript]  view plain  copy

1. queryParams:testQParams  

创建函数：

[javascript]  view plain  copy

1. function testQParams(params) {  
2.             alert('params.limit='+params.limit+' params.offset='+params.offset);//我们可以这样查看这些要上传的参数  
3.         }  

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

[javascript]  view plain  copy

1. function testQParams(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：

[javascript]  view plain  copy

1. {  
2.                 field: 'thumb_img',  
3.                 title: '主图',  
4.                 align: 'center',  
5.                 formatter:function (value,row,index) {  
6.                     return '<img  src='+value+' width=50 class="img-rounded" >';  
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>引入

[html]  view plain  copy

1. <link href="<?php echo '/static/bootstrap/extensions/editable/css/bootstrap-editable.css'; ?>" rel="stylesheet">  
2. <script src="<?php echo '/static/bootstrap/extensions/editable/js/bootstrap-editable.js'; ?>"></script>  
3. <script src="<?php echo '/static/bootstrap-table/extensions/editable/bootstrap-table-editable.js'; ?>"></script>  

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

<4>使用1：

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

[html]  view plain  copy

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

就会变成可编辑状态了

<5>使用2：

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

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

[javascript]  view plain  copy

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改为：

[javascript]  view plain  copy

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

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

[javascript]  view plain  copy

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改为：

[javascript]  view plain  copy

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数据可以这样（虽然这里没有必要，参数里已经有了）：

[javascript]  view plain  copy

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

9、自动换行

在给table加上样式：

[html]  view plain  copy

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

10、父子表

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

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

[javascript]  view plain  copy

1. detailView:true  

<2>添加回调函数

[javascript]  view plain  copy

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

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

<3>执行函数

[javascript]  view plain  copy

1. function initSubTable(index,row,$detail) {  
2.     var parentid = row.MENU_ID;  
3.     var cur_table = $detail.html('<table></table>').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. }  

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

11、刷新功能

[javascript]  view plain  copy

1. $('#table_search').bootstrapTable(  
2.                     "refresh",  
3.                     {  
4.                         url:"/japp/autobuy/ajaxorder/search"  
5.                     }  
6.                 );