BootStrap Table：列引數
官方文件地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
列引數
表格的列引數定義在 jQuery.fn.bootstrapTable.columnDefaults 。
名稱 標籤 型別 預設 描述
radio data-radio Boolean FALSE 設定為 True 在列前新增一個固定寬度的 單選按鈕
checkbox data-checkbox Boolean FALSE 設定為 True 在列前新增一個固定寬度的 複選框
field data-field String undefined 列的名稱
title data-title String undefined 列的標題
titleTooltip data-title-tooltip String undefined 列標題的提示文字，支援HTML 屬性
class class / data-class String undefined 設定列的 class 屬性
rowspan rowspan / data-rowspan Number undefined 設定一個單元格可以佔多少行
colspan colspan / data-colspan Number undefined 設定一個單元格可以佔多少列
align data-align String undefined 單元格中的資料水平方向的位置，'left', 'right', 'center'
halign data-halign String undefined 列頭中的資料水平方向的位置 ，'left', 'right', 'center'
falign data-falign String undefined 列尾中的資料水平方向的位置 ，'left', 'right', 'center'
valign data-valign String undefined 單元格中的資料垂直方向的位置， 'top', 'middle', 'bottom'
width data-width Number {Pixels or Percentage} undefined 設定列的寬度，可以使用畫素或百分比
sortable data-sortable Boolean FALSE 設定為 True 允許對列進行排序
order data-order String 'asc' 預設的排序方式，'asc' or 'desc'.
visible data-visible Boolean TRUE Table模式設定為 False 會隱藏列的內容
cardVisible data-card-visible Boolean TRUE Card模式設定為 False 會隱藏列的內容
switchable data-switchable Boolean TRUE 設定為 False 將禁止對列進行隱藏展示切換
clickToSelect data-click-to-select Boolean TRUE 設定為 True 點選列的時候選中單選按鈕或者複選框
formatter data-formatter Function undefined 設定該列資料的格式
footerFormatter data-footer-formatter Function undefined 設定該列列腳的資料格式
events data-events Object undefined 設定單元格的事件監聽器，包含4個引數
event：jquery事件
value：監聽列的當前單元格的值
row：當前行完整內容
index：當前行的索引值
sorter data-sorter Function undefined 自定義排序方法，包含兩個引數
a：單元格A的資料
b：單元格B的資料
sortName data-sort-name String undefined 自定義指定一個其他的列名，並通過這一列的值對當前列進行排序
cellStyle data-cell-style Function undefined 指定單元格的樣式，包含3個引數
value:列名稱
row:行資料
index:行號
searchable data-searchable Boolean TRUE 設定為 True 搜尋時可以對本列的內容進行搜尋
searchFormatter data-search-formatter Boolean TRUE 設定為 True 使用格式化資料進行搜尋
escape data-escape Boolean FALSE 設定為 True 轉義特殊字元
showSelectTitle data-show-select-title Boolean FALSE 設定為 True 顯示包含 'radio' 、'singleSelect' 'checkbox'選項的列
應用示例
$('#example_table').bootstrapTable({
showHeader: true,
showFooter: true,
showColumns: true,
showRefresh: true,
showToggle: true,
showPaginationSwitch: true,
showFullscreen: true,
search: true,
data: [{
"id": 89757,
"name": "姬如雪",
"deptName": "幻音坊",
"level": 24
},
{
"id": 89756,
"name": "葉星雲",
"deptName": "天元神宗",
"level": 31
},
{
"id": 89755,
"name": "唐三",
"deptName": "史萊克學院",
"level": 33
}],
columns: [{
field: 'column_radio',
radio: true,
title: '單選列',
titleTooltip: '請選擇一項',
showSelectTitle: true,
clickToSelect: true,
class: 'class_radio',
footerFormatter: function(data) {
return '<div style="color:red;">統計資訊</div>';
},
width: '100px'
},
{
field: 'column_hidden',
title: '隱藏列',
titleTooltip: '你看不見我',
visible: false,
cardVisible: false,
formatter: function(value, row, index) {
return index;
}
},
{
field: 'id',
title: '員工編號',
rowspan: 1,
colspan: 1,
align: 'left',
halign: 'center',
falign: 'right',
valign: 'middle',
sortable: true,
switchable: false,
order: 'asc',
sortName: 'level',
sorter: function(a, b) {
alert(a);
return a - b;
},
cellStyle: function cellStyle(value, row, index, field) {
return {
classes: 'text-nowrap another-class',
css: {
"color": "blue",
"font-size": "20px"
}
}
},
escape: false
},
{
field: 'name',
title: '員工姓名',
searchable: false
},
{
field: 'deptName',
title: '所屬部門'
},
{
field: 'level',
title: '武功等級'
},
{
field: 'column_operate',
title: '操作',
formatter: function(value, row, index) {
return '<a href="javascript:void(0);" class="say_hi">點我</a>';
},
events: {
'click .say_hi': function(e, value, row, index) {
alert(row.name + ' 你好');
}
}
}]
});
---------------------
作者：pengjunlee
來源：CSDN
原文：https://blog.csdn.net/pengjunlee/article/details/80658596
版權宣告：本文為博主原創文章，轉載請附上博文連結！