您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Bootstrap中Table使用整理之樣式的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
一、行樣式修改
<table id="table1" data-row-></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>
關(guān)于“Bootstrap中Table使用整理之樣式的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。