Bootstrap Table使用整理（二）

一、行样式修改

[html] view plain copy

 print?

1. <table id="table1"  
2.        data-row-style="rowStyle"></table>  

[javascript] view plain copy

 print?

1. /* 
2. * data-row-style 扩展方法处理 行样式 
3. */  
4. $('#table1').bootstrapTable({  
5.     columns: [  
6.         { field: 'sno', title: '学生编号' },  
7.         { field: 'sname', title: '学生姓名' },  
8.         { field: 'ssex', title: '性别' },  
9.         { field: 'sbirthday', title: '生日' },  
10.         { field: 'class', title: '课程编号' },  
11.     ],  
12.     url:'@Url.Action("GetStudent","DataOne")'  
13. });  
14. /** 
15.     *  
16.     * @@param row  当前行数据对象 
17.     * @@param index 当前行索引 
18.     */  
19. function rowStyle(row, index) {  
20.     var classes = ['active', 'success', 'info', 'warning', 'danger'];  
21.     if (row.sno.indexOf('2') != -1) {  
22.         return {  
23.             classes:['success']  
24.         }  
25.     }  
26.     return {};  
27. }  

二、单元格样式定义，对齐方式定义

[javascript] view plain copy

 print?

1. /* 
2. * data-cell-style 扩展方法处理 单元格样式 
3. * data-align 设置当前列的对齐方式，包括表头 
4. * data-halign 设置表格标题的对齐方式，优先级大于 align 
5. */  
6. $('#table1').bootstrapTable({  
7.     columns: [  
8.         {  
9.             field: 'sno', title: '学生编号',  
10.             align: 'center',  
11.             halign:'right',  
12.             cellStyle: function (value, row, index) {  
13.                 //当前列，奇数单元格显示绿色  
14.                 if (index%2==0)  
15.                     return {  
16.                         classes: 'success'  
17.                     };  
18.   
19.                 return {};  
20.             }  
21.         },  
22.         { field: 'sname', title: '学生姓名' },  
23.         { field: 'ssex', title: '性别' },  
24.         { field: 'sbirthday', title: '生日' },  
25.         { field: 'class', title: '课程编号' },  
26.     ],  
27.     url:'@Url.Action("GetStudent","DataOne")'  
28. });  

三、排序列定义

[javascript] view plain copy

 print?

1. /* 
2. * data-sortable 设置当前列是否可排序，默认当前显示内容排序 
3. * data-sort-name 设置默认排序列名 
4. * data-sort-order 设置默认排序方式 asc/desc 
5. * data-sorter 可以自定义扩展排序方法 
6. */  
7. $('#table1').bootstrapTable({  
8.     columns: [  
9.         { field: 'sno', title: '学生编号', sortable: true },  
10.         { field: 'sname', title: '学生姓名', sortable: true},  
11.         { field: 'ssex', title: '性别', sortable: true },  
12.         { field: 'sbirthday', title: '生日', sortable: true},  
13.         { field: 'class', title: '课程编号', sortable: true},  
14.     ],  
15.     url:'@Url.Action("GetStudent","DataOne")'  
16. });  

[html] view plain copy

 print?

1. <table id="table1"  
2.        data-classes="table table-hover table-condensed"  
3.        data-sort-name="sno"  
4.        data-sort-order="desc"></table>