Bootstrap Table使用整理(二)

2019-11-19 16:22:55

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

相關(guān)閱讀：

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

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

Bootstrap Table使用整理（四）之工具欄 //www.survivalescaperooms.com/article/115798.htm

Bootstrap Table使用整理(五)之分頁(yè)組合查詢 //www.survivalescaperooms.com/article/115785.htm

一、行樣式修改

<table id="table1"   data-row-style="rowStyle"></table> /* * data-row-style 擴(kuò)展方法處理 行樣式 */ $('#table1').bootstrapTable({  columns: [   { field: 'sno', title: '學(xué)生編號(hào)' },   { field: 'sname', title: '學(xué)生姓名' },   { field: 'ssex', title: '性別' },   { field: 'sbirthday', title: '生日' },   { field: 'class', title: '課程編號(hào)' },  ],  url:'@Url.Action("GetStudent","DataOne")' }); /**  *  * @@param row 當(dāng)前行數(shù)據(jù)對(duì)象  * @@param index 當(dāng)前行索引  */ function rowStyle(row, index) {  var classes = ['active', 'success', 'info', 'warning', 'danger'];  if (row.sno.indexOf('2') != -1) {   return {    classes:['success']   }  }  return {}; }

二、單元格樣式定義，對(duì)齊方式定義

/* * data-cell-style 擴(kuò)展方法處理 單元格樣式 * data-align 設(shè)置當(dāng)前列的對(duì)齊方式，包括表頭 * data-halign 設(shè)置表格標(biāo)題的對(duì)齊方式，優(yōu)先級(jí)大于 align */ $('#table1').bootstrapTable({  columns: [   {    field: 'sno', title: '學(xué)生編號(hào)',    align: 'center',    halign:'right',    cellStyle: function (value, row, index) {     //當(dāng)前列，奇數(shù)單元格顯示綠色     if (index%2==0)      return {       classes: 'success'      };      return {};    }   },   { field: 'sname', title: '學(xué)生姓名' },   { field: 'ssex', title: '性別' },   { field: 'sbirthday', title: '生日' },   { field: 'class', title: '課程編號(hào)' },  ],  url:'@Url.Action("GetStudent","DataOne")' });

三、排序列定義

/* * data-sortable 設(shè)置當(dāng)前列是否可排序，默認(rèn)當(dāng)前顯示內(nèi)容排序 * data-sort-name 設(shè)置默認(rèn)排序列名 * data-sort-order 設(shè)置默認(rèn)排序方式 asc/desc * data-sorter 可以自定義擴(kuò)展排序方法 */ $('#table1').bootstrapTable({  columns: [   { field: 'sno', title: '學(xué)生編號(hào)', sortable: true },   { field: 'sname', title: '學(xué)生姓名', sortable: true},   { field: 'ssex', title: '性別', sortable: true },   { field: 'sbirthday', title: '生日', sortable: true},   { field: 'class', title: '課程編號(hào)', 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>