-
基本使用
引用文件:
引用文件要包括 jquery.js以及bootstrap、bootstrap-table各自的css文件和js文件。(注意顺序)
<!-- 引用 css-->
<link rel="stylesheet" href="./lib/css/bootstrap-3.3.4.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<!-- 引用 js-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/bootstrap-3.3.7.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
示例详解:
html上放一个<table>标签(设置id):
<table id="docDateTable" class="table table-hover table-bordered"></table>
在js文件,先放基本信息:
其中表头是columns、表内容是data。
$('#docDateTable').bootstrapTable({
columns: [{
field: 'name',
title: '姓名',
},{
field: 'cityname',
title: '所在城市',
}],
data: [{
"name": "bella",//对应的field的名字
"cityname": "上海"
}, {
"name": "tom",
"cityname": "北京"
}],
})
效果图:
-
功能1:自定义配置列的表格
加上以下代码:
showColumns: true, //是否显示所有的列
效果图:
因为顺序错导致踩雷:我单独一个文件试验的时候能出效果。但是当组合的其他页面的时候,却不生效报错了。
原因:添加引用文件的顺序导致的,放到上面就显示了。
-
功能2:自定义配置列的onColumnSwitch选择列事件
onColumnSwitch:当设置了showColumns属性为true 时,用户选择显示还是隐藏某个列时触发的事件
onColumnSwitch事件:
加载服务器端数据失败时的事件,返回参数如下:
参数名称 | 说明 |
field | 选中的列名称-- 字段名称 |
checked | 是否显示该列,true显示 false 不显示 |
绑定onColumnSwitch事件的两种方法:
方法一:
$('#table').bootstrapTable({
columns: columns, //列对象
data: data, //要显示的数据对象
onColumnSwitch: function(field, checked) {
alert(JSON.stringify(field));
}
});
方法二:
$('#table').on('column-switch.bs.table', function (e,field, checked) {
alert(JSON.stringify(field));
});
完整代码:
这里需要注意的是showColumns设置true你可能会看不到效果,点击按钮无法显示下拉列表,这时请确保是否引用了popper.min.js(bootstrapTable文件)和bootstrap.min.js文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
&l