title
列頭。
field
表格列數據的字段。
radio
單選框
- 使用方法：設置
radio:true啟用。
checkbox
復選框
- 使用方法：設置
checkbox:true啟用。
titleTooltip
定義把鼠標放在列頭上時提示的文字。
class
定義列所用的樣式類名。
- 使用方法：先定義一個類選擇器如
.red{color: #ff0000}，再在列參數中啟用class:'red' - 效果：
image.png
align
控制列數據是居中、左對齊還是右對齊。
halign
控制列頭文字是居中、左對齊還是右對齊。
falign
控制列腳文字是居中、左對齊還是右對齊。
valign
控制列數據是居于底部還是居于頂部還是居中。
width
此列單元格寬度。
sortable
列排序。
- 使用方式：設置
sortable:true啟用。
cardVisible
默認值是true，當設置為false時，當切換為card視圖時隱藏該列數據。
sortName
指定根據哪一個字段來排序。
formatter
自定義方法。
- 使用方法：可以通過此參數返回HTML和配置表格操作欄按鈕。
- 代碼示例
實現判斷當年齡大于等于18歲時，表格數據顯示“已成年”，否則顯示“未成年”：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名',
class:'red'
}, {
field: 'age',
title: '年齡',
sortable:true,
formatter:function(value,row,index){
return getValue(value);
}
}, {
field: 'id',
title: '證件號'
}],
striped:true,
showColumns:true,
showToggle:true
});
function getValue(value,row,index){
if(value >= 18){
return "<span>已成年</span>";
}else{
return "<span>未成年</span>"
}
}
</script>
- 效果：
image.png
event
使用formatter時的一個事件監聽器，可結合二者配置表格操作欄。
- 代碼示例：
<body>
<table id="table"></table>
</body>
<script>
//表格操作欄配置
var operatorObj = {
operateFormatter:function(value, row, index) {//初始操作欄的按鈕
return ['<a class="write" href="javascript:void(0)" title="查看詳情" style="margin:0">',
'<i class="glyphicon glyphicon-eye-open"></i>查看詳情',
'</a>'
].join('');//配置表格操作欄的內容
},operateEvents:{//點擊時觸發的事件
'click .write': function (e, value, row, index) {
alert(row.name);
}
}
}
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名',
class:'red'
}, {
field: 'age',
title: '年齡',
sortable:true,
formatter:function(value,row,index){
return getValue(value);
}
}, {
field: 'id',
title: '證件號'
}, {
width: "150px",
field: 'operate',
title: '相關操作',
align: 'center',
events: operatorObj.operateEvents,
formatter: operatorObj.operateFormatter
}],
striped:true,
showColumns:true,
showToggle:true
});
function getValue(value,row,index){
if(value >= 18){
return "<span>已成年</span>";
}else{
return "<span>未成年</span>"
}
}
</script>
- 效果：
image.png
image.png
