Bootstrap Table使用整理(二)，bootstraptable

Bootstrap Table使用整理(二)，bootstraptable

相關閱讀：

Bootstrap Table使用整理(一) http://www.bkjia.com/article/115789.htm

Bootstrap Table使用整理（三）  http://www.bkjia.com/article/115795.htm

Bootstrap Table使用整理（四）之工具列 http://www.bkjia.com/article/115798.htm

Bootstrap Table使用整理(五)之分頁組合查詢 http://www.bkjia.com/article/115785.htm

一、行樣式修改

<table id="table1"   data-row-style="rowStyle"></table> /* * data-row-style 擴充方法處理 行樣式 */ $('#table1').bootstrapTable({  columns: [   { field: 'sno', title: '學生編號' },   { field: 'sname', title: '學生姓名' },   { field: 'ssex', title: '性別' },   { field: 'sbirthday', title: '生日' },   { field: 'class', title: '課程編號' },  ],  url:'@Url.Action("GetStudent","DataOne")' }); /**  *  * @@param row 當前行資料對象  * @@param index 當前行索引  */ function rowStyle(row, index) {  var classes = ['active', 'success', 'info', 'warning', 'danger'];  if (row.sno.indexOf('2') != -1) {   return {    classes:['success']   }  }  return {}; } 

二、儲存格樣式定義，對齊定義

/* * data-cell-style 擴充方法處理 儲存格樣式 * data-align 設定當前列的對齊，包括表頭 * data-halign 設定表格標題的對齊，優先順序大於 align */ $('#table1').bootstrapTable({  columns: [   {    field: 'sno', title: '學生編號',    align: 'center',    halign:'right',    cellStyle: function (value, row, index) {     //當前列，奇數儲存格顯示綠色     if (index%2==0)      return {       classes: 'success'      };      return {};    }   },   { field: 'sname', title: '學生姓名' },   { field: 'ssex', title: '性別' },   { field: 'sbirthday', title: '生日' },   { field: 'class', title: '課程編號' },  ],  url:'@Url.Action("GetStudent","DataOne")' }); 

三、排序列定義

/* * data-sortable 設定當前列是否可排序，預設當前顯示內容排序 * data-sort-name 設定預設排序列名 * data-sort-order 設定預設排序方式 asc/desc * data-sorter 可以自訂擴充排序方法 */ $('#table1').bootstrapTable({  columns: [   { field: 'sno', title: '學生編號', sortable: true },   { field: 'sname', title: '學生姓名', sortable: true},   { field: 'ssex', title: '性別', sortable: true },   { field: 'sbirthday', title: '生日', sortable: true},   { field: 'class', title: '課程編號', sortable: true},  ],  url:'@Url.Action("GetStudent","DataOne")' }); <table id="table1"   data-classes="table table-hover table-condensed"   data-sort-name="sno"   data-sort-order="desc"></table> 

以上所述是小編給大家介紹的Bootstrap Table使用整理(二)，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！