转载

bootstraptable 的使用方法

bootstrap呢确实是个好东西,不过组件话的插件官网提供的并不多,在中国呢,列表展示又十分常用,

好在有人开发了一款基于bootstrap的table插件

先给出官网地址,不过里面都是英文的。可以使用一些网页翻译工具,或者英文好的请自便
https://bootstrap-table.com/

在这一页呢,给出了API, 包括表格属性、列属性、事件、方法。用起来还是很方便的。
https://bootstrap-table.com/docs/api/table-options/

下面说一些本人常用的吧
首先就是引用

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

然后是Bootstrap-table的依赖引用:

CSS文件引入

<link rel="stylesheet" href="bootstrap-table.css">

脚本文件引入

<script src="bootstrap-table.js"></script>
<--汉化文件,放在 bootstrap-table.js 后面-->
<script src="bootstrap-table-zh-CN.js"></script>
<script>
var $table;
var queryUrl = '/article/list'
$table = $('#tablelist').bootstrapTable({
//初始化bootstrap-table的内容
url: queryUrl, //请求后台的URL(*)
method: 'POST', //请求方式(*)
contentType: "application/x-www-form-urlencoded", //请求头类型,接不到参时可以设置此项
classes: 'table table-striped table-borderless table-hover',
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页,并记录
pageSize: 10, //每页的记录行数(*)
pageList: [5, 10, 15, 25, 50], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索
trimOnSearch: true, //搜索自动去空格
icons:{
paginationSwitchDown: 'fa-toggle-down',//上翻页图标
paginationSwitchUp: 'fa-toggle-up',
refresh: 'fa-refresh',//刷新按钮图标
},
iconsPrefix: "fa",                   //图标前缀
strictSearch: false,                //精准搜索
showColumns: false, //是否显示所有的列(选择显示的列)
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
//得到查询的参数
queryParams: function (params) {    //查询参数
//这里的键的名字和控制器的变量名必须一致,这边改动,控制器也需要改成一样的
var temp = {
pageSize: params.limit, //页面大小
pageNumber: (params.offset / params.limit) + 1, //页码
orderField: params.sort, //排序列名
orderDirection: params.order, //排位命令(desc,asc)
keywords: $(".bootstrap-table .search .form-control").val()
};
return temp;
},
columns: [{
checkbox: true,
visible: true //是否显示复选框
}, {
field: 'title',
title: '标题',
width: 120,
sortable: false
}, {
field: 'status',
title: '发布状态',
width: 90,
sortable: false,
formatter: statusFormatter
}, {
field: 'createTime',
title: '发布时间',
width: 90,
sortable: true
}, {
field: 'id',
title: '操作',
width: 110,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}],
onLoadSuccess: function () {
},
onLoadError: function () {
alert('数据加载失败!');
},
onDblClickRow: function (row, $element) {
// var id = row.id;
// alert('文章id:'+id);
},
});

function actionFormatter(str, row) {
str = '<div role="group" aria-label="...">';
if('1'!=row.isShare){
str += '<a onclick="shareLrticle('+row.id+','+1+')" title="它人不可见" ><i style="color:#f3f3f3"></i></a>'
}else{
str += '<a onclick="shareLrticle('+row.id+','+0+')" title="它人可见" ><i style="color:#f3f3f3"></i></a>'
}
str += '<a title="编辑" href="/loveAdmin/article/publishMd/'+row.id+'"><i ></i></a>'+
// '<a title="删除" ><i style="color:#ededed"></i></a>'+
'</div>'

return str;
}
function statusFormatter(str) {
if('1'==str){
return '发布';
}else{
return '草稿';
}
}

function shareLrticle(id, type) {
$.ajax({
url: "/article/share",
type: "POST",
data: {
type: type,
id:id
},
success: function (json) {
$('#tablelist').bootstrapTable('refresh');
if('1'==type){
showPopover('分享成功');
}else{
showPopover('已停止分享');
}
},
error: function (json) {
$('#tablelist').bootstrapTable('refresh');
}
});
}

function showPopover(str) {
$("#shareTipContent").html(str);
$('#shareTip').modal('show');
}
</script>


正文到此结束
本文目录