Bootstrap Table 学习笔记之列参数（一）
2017-09-20 本文已影响0人
罂粟1995
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
