官方文档地址: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
版权声明:本文为博主原创文章,转载请附上博文链接!