showHeader
是否显示列头，默认值为true，设置为false时将不显示列头。
showFooter
是否显示列脚，默认值为false，设置为true时将不显示列脚。
showRefresh
是否显示刷新按钮，默认值为false，设置为true时将显示刷新按钮。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
showHeader:false,
showFooter:true,
showRefresh:true
});
</script>
- 效果：
image.png
cardView
设置为true将显示card视图，适用于移动设备。否则为table试图，适用于pc。默认值为false。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
cardView:true
});
</script>
-
效果：
image.png
showToggle
是否显示切换试图（table/card）按钮，设置为true时显示，默认值是false。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
showToggle:true
});
</script>
- 效果：
image.png
image.png
showColumns
是否显示内容列下拉框，设置为true时将在右上角显示按钮，点击按钮显示下拉框，可在下拉框勾选需要显示的列参数，默认值为false。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
showToggle:true,
showColumns:true
});
</script>
- 效果：
image.png
image.png
minimumCountColumns
当列数小于此值时，将无法使用内容列下拉框。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
showToggle:true,
showColumns:true,
minimumCountColumns:5
});
</script>
- 效果：
image.png
如图所示，当我的数据小于5条时，下拉框中的复选框变为灰色禁用状态，无法进行勾选。
detailView
设置为 true 启用显示详情功能，默认值是false。
detailFormatter
格式化详情页面的视图。
- 使用说明：这两个属性一般要同时使用。先将dertailView设置为true值，再用detailFormatter定义详情页面该如何显示，显示哪些数据。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
showToggle:true,
showColumns:true,
minimumCountColumns:5,
detailView:true,
detailFormatter:function(index, row) {//index:行号，row：行数据
var htm;
var len = index+1;
htm = len +'<br/>' + '姓名：'+row.name+'<br/>'+'年龄：'+row.age+'<br/>'+'证件号：'+row.id;
return htm;//返回视图
}
});
</script>
- 效果：
image.png
clickToSelect
设置true将在点击行时自动选择rediobox 和 checkbox，默认值是false。
- 使用说明：先在表格中定义一列选择列，即在culumns中增加一个checkbox: true（启用复选框）的项，再设置clickToSelect为true。
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
showToggle:true,
showColumns:true,
minimumCountColumns:5,
detailView:true,
detailFormatter:function(index, row) {//index:行号，row：行数据
var htm;
var len = index+1;
htm = len +'<br/>' + '姓名：'+row.name+'<br/>'+'年龄：'+row.age+'<br/>'+'证件号：'+row.id;
return htm;
},
clickToSelect:true
});
- 效果：
image.png
点击某一行的任意位置，该行的选框都可被选中。
singleSelect
设置True 将禁止多选，默认值是false。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
showToggle:true,
showColumns:true,
minimumCountColumns:5,
detailView:true,
detailFormatter:function(index, row) {//index:行号，row：行数据
var htm;
var len = index+1;
htm = len +'<br/>' + '姓名：'+row.name+'<br/>'+'年龄：'+row.age+'<br/>'+'证件号：'+row.id;
return htm;
},
clickToSelect:true,
singleSelect:true
});
</script>
-
效果：
image.png
不再显示全选框，只允许勾选一行。
rowStyle
自定义行样式 参数为：row: 行数据，index: 行下标，返回值可以为class或者css。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
showToggle:true,
showColumns:true,
minimumCountColumns:5,
detailView:true,
detailFormatter:function(index, row) {//index:行号，row：行数据
var htm;
var len = index+1;
htm = len +'<br/>' + '姓名：'+row.name+'<br/>'+'年龄：'+row.age+'<br/>'+'证件号：'+row.id;
return htm;
},
clickToSelect:true,
singleSelect:true,
rowStyle:function (row, index) {
return {
css: {"color":"blue"}
};
}
});
</script>
- 效果：
image.png
如图所示，表格内字体变为蓝色。
toolbar
一个jQuery 选择器，指明自定义的表格工具栏，例如:#toolbar, .toolbar。
- 使用方法：使用之前要把工具栏先写出来，例如：
<div id="toolbar">
<a href="javascript:void(0);" class="btn btn-danger btn-xs" onclick="">删除</a>
</div>
再指定toolbar为其id/css。
- 代码示例：
<body>
<div id="toolbar">
<a href="javascript:void(0);" class="btn btn-danger btn-xs" onclick="">删除</a>
</div>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
showToggle:true,
showColumns:true,
minimumCountColumns:5,
detailView:true,
detailFormatter:function(index, row) {//index:行号，row：行数据
var htm;
var len = index+1;
htm = len +'<br/>' + '姓名：'+row.name+'<br/>'+'年龄：'+row.age+'<br/>'+'证件号：'+row.id;
return htm;
},
clickToSelect:true,
singleSelect:true,
rowStyle:function (row, index) {
return {
css: {"color":"blue"}
};
},
toolbar: '#toolbar' //制定哪个容器做工具栏
});
</script>
- 效果：
image.png
网友评论