前言
Bootstrap Table Column的相关列属性和设置例如field、title、titleTooltip、width、class等属性，要使用Bootstrap Table首先要定义列
基本设置
先准备数据源，包含"total" 和 "rows"
{
"total": 22,
"rows": [
{
"id": 1,
"name": "悠悠老师",
"age": 20,
"tel": "12313231",
"is_delete": "0"
},
{
"id": 2,
"name": "张三老师",
"age": 22,
"tel": "21122121",
"is_delete": "0"
},
{
"id": 3,
"name": "李四老师",
"age": 22,
"tel": "1121212",
"is_delete": "0"
}
]
}
html页面代码
<body>
<div class="container-fluid">
<h1>bootstrapTable实例</h1>
<table id="table" data-toolbar="#toolbar"></table>
</div>
</body>
bootstrapTable配置参数
<script>
var url = '/teacher/info';
var columns = [
{
checkbox: true,
visible: true //是否显示复选框
},
{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
},
{
field: 'tel',
title: '电话'
},
{
field: 'is_delete',
title: '状态'
}
];
$("#table").bootstrapTable({
url: url, //请求后台的URL（*）
method: 'get', //请求方式（*）
columns: columns //列参数
});
</script>
页面显示效果
自定义显示列内容
上面看到is_delete字段内容显示0或1这种，这是接口返回过来的值，但是我们在页面上需要自己转成 "正常" 或者 "禁用" 这种文字。
可以用到 formatter 自定义显示内容,格式参考如下
- value 是该字段原始的值（如is_delete字段返回的0或1）
- item 是返回的整个一行内容：
{"id": 1, "name": "悠悠老师", "age": 20, "tel": "12313231", "is_delete": "0"} - index 是列表中是索引值
formatter: function(value, item, index) {
if (value==0) {
return '正常';
}
else if (value==1) {
return '禁用';
}
}
修改后完整内容
<script>
var url = '/teacher/info';
var columns = [
{
checkbox: true,
visible: true //是否显示复选框
},
{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
},
{
field: 'tel',
title: '电话'
},
{
field: 'is_delete',
title: '状态',
formatter: function(value, item, index) {
if (value==0) {
return '正常';
}
else if (value==1) {
return '禁用';
}
}
}];
$("#table").bootstrapTable({
url: url, //请求后台的URL（*）
method: 'get', //请求方式（*）
columns: columns //列参数
});
</script>
页面显示效果
新增其它字段
我们也可以在表格中添加其它字段，比如添加一个主页地址，主页地址根据id字段拼接，格式:/teacher/{id}
{
field: 'home',
title: '首页',
formatter: function(value, item, index) {
return '<a href="/teacher/' + item.id +'" >主页</a>'
}
}
添加操作按钮
在列表中添加操作按钮
参考这篇 https://www.cnblogs.com/yoyoketang/p/15245059.html
属性列表
以下重要或非常有用的属性用√进行了标记
| 列属性名称 | html属性 | 说明 |
|---|---|---|
| field | data-field | √设置该列要绑定显示的字段如field:"id" |
| title | data-title | √设置该列显示的文字标题，比如你绑定了num字段，你好显示num吧，设置title:"库存" 用户一看就明白了 |
| titleTooltip | data-titleTooltip | titleTooltip:"本月销售剩余库存"，鼠标移动到列头上就会出现提示文字“本月销售剩余库存” |
| class | data-class | 对某列设置单独的样式 |
| width | data-width | √200",该列的宽度为200 ，注意这里是数字类型不带单位px或者% |
| widthUnit | data-widthUnit | widthUnit:"px" 列的宽度的单位如px或% |
| rowspan | data-rowspan | rowspan:2 合两2行 |
| colspan | data-colspan | colspan:2 合并两列 |
| halign | data-halign | 表格头部列名对齐方式 'left', 'right', 'center' |
| align | data-align | 表格数据的对齐方式 'left', 'right', 'center' |
| falign | data-falign | 表格底部列对齐方式 'left', 'right', 'center' |
| valign | data-valign | 垂直方向对齐方式 'top', 'middle', 'bottom' |
| cellStyle | data-cellStyle | 自定义函数，单元格自定义样式function(value, row, index){ return "样式类名";} |
| radio | data-radio | radio:true 表示该列为单选选择列 |
| checkbox | data-checkbox | √checkbox:true 表示该列为复选框选择列 |
| checkboxEnabled | data-checkboxEnabled | checkboxEnabled:false 禁用复选框列 |
| clickToSelect | data-clickToSelect | √{field:"name",clickToSelect:false}表示点击name这列时不会触发选中事件。 |
| showSelectTitle | data-showSelectTitle | showSelectTitle:"操作"，在选择列的列头显示的名称 |
| sortable | data-sortable | sortable:true把该列设置为排序列，这时列头就会出现上下两个排序箭头 |
| sortname | data-sortname | 指定按那列进行排序，例如<th data-field="name" data-sortable="true" data-sort-name="id" data-sort-order="desc">Item Name</th> 表示用户点击name这列的排序事件 按id字段进行倒序进行排序 |
| order | data-order | 排序方式 order:"asc"或者 order:"desc" 顺序或倒序进行排序 |
| visible | data-visible | visible:false 或者 true 隐藏或显示列 |
| switchable | data-switchable | true/false 当开启了列刷选时，switchable可以控制当前列是否可被刷选，默认为true |
| cardVisible | data-cardVisible | true/false 当开启卡片模式时，设置该列是否在卡片中显示，默认true |
| searchable | data-searchable | true/false 设置当前列数据是否可以被搜索，这里说的搜索是前端查询匹配非服务器端。 |
| footerFormatter | data-footerFormatter | √列底部格式化函数，可以用来做合计等功能 function nameFormatter(data) { return data.length } |
| formatter | data-formatter | √自定义函数，比如状态字段在数据库中是0，1 可以通过formatter转换成 启用/停用 这样的文字显示而不是显示0或者1这样的数字， formatter: function(value, item, index) { if (value == 0) {return '正常'; } else if (value == 1) {return '禁用'; } } |