bootstrap table 中自定義樣式

2021-08-07 21:23:10 字數 1313 閱讀 3590

還是下面的這張圖,這次我們要完成三個小樣式

狀態列顯示【啟用】和【禁用】,並對【啟用】的字型樣式變成綠色,對【禁用】的字型樣式變成紅色

對多個郵箱按換行方式來展示

對某個列長度超出指定長度後,顯示省略號

關於【啟用】和【禁用】樣式操作

我這邊對【啟用】和【禁用】在後台資料庫中的表示是1和0,1-代表啟用, 0-**禁用,而樣式的控制是通過列引數中的cellstyle和formatter屬性來實現的,它可以使用乙個自定義的方法且該方法帶有三個引數

value:  該列的值

row:   該行中所有的資料

index: 行的索引值

**片段

// 設定顯示啟用或禁用的文字

function

formatcell(value

, row

, index)

else

returntitle

;}// 設定table列樣式

function

formattableunit(value

, row

, index)

else

return

}
}

關於多個郵箱按換行方式來展示

我這裡多個郵件之前是使用逗號(,)來進行分隔的,所以可以通過js的split方法直接對它進行分隔,這裡也是通過formatter屬性來自定義乙個方法來實現的

**片段

// 格式化顯示email

function

formatemail(value

, row

, index)

else}

某個列長度超出指定長度後,顯示省略號

對於某個列內容過長時,可以通過指定它的css樣式來實現對超出長度的部分顯示省略號

**片段

function

formattableunit(value

, row

, index)

}
}

另外,還需要在css中給table新增乙個屬性

table

Bootstrap table學習筆記

引入css檔案 引入相關庫 我們需要引入jquery庫 bootstrap庫 以及bootstrap table.js檔案 put your locale files after bootstrap table.js 啟用bootstrap table外掛程式 官方文件中給出了我們有兩種那個方式來啟...

BootstrapTable使用技巧

使用者交易 商戶名稱 日期支付寶金額 支付寶筆數 總金額總筆數 關閉 複製 通過data field 的值會從後端返回的資料直接渲染到頁面上。operateformatter function value,row,index else 複製 operateformatter和window.opera...

bootstrap table 常用方法

json物件的陣列 var rows table bootstraptable getselections tableid bootstraptable table bootstraptable refresh 踩過的坑 該方法在初次載入沒有資料的情況下會失效。table bootstraptabl...