1.bootstrap-table使用到的js和css
<link rel="stylesheet" href="${contextPath}/static/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="${contextPath}/static/dist/css/bootstrap-table/bootstrap-table.min.css" />
<script type="text/javascript" src="${contextPath}/static/dist/js/jquery.min.js"></script>
<script type="text/javascript" src="${contextPath}/static/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${contextPath}/static/dist/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="${contextPath}/static/dist/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
2. 页面代码
<table id="table" class="table table-hover table-bordered table-striped" data-toogle="table"></table>
<script type="text/javascript">
$(function() {
$('#table').bootstrapTable({
columns: [{
title: '序列号',
field: 'id',
align: 'center', // 左右对齐 left right center
valign: 'middle', // 垂直对齐 top bootom middle baseline
width : 150,
sortable: true
}, {
title: '文件名称',
field: 'fileName',
align: 'center',
valign: 'middle',
width : 150,
sortable: true
}, {
title: '文件类型',
field: 'menuName',
align: 'center',
valign: 'middle',
width : 150,
sortable: true
}, {
title: '上传人',
field: 'uploadUser',
align: 'center',
valign: 'middle',
width : 150,
sortable: true
}, {
title: '上传时间',
field: 'uploadDate',
align: 'center',
valign: 'middle',
width : 150,
sortable: true
}, {
title: '下载',
field: 'download',
align: 'center',
valign: 'middle',
width : 150,
formatter: download
}, {
title: '删除',
field: 'delete',
align: 'center',
valign: 'middle',
width : 150,
formatter: delete
}],
method: 'post',
striped: true,
cache: false,
dataType: "json",
url: '${contextPath}/frame/repository/queryUpload',
sortName: 'uploadDate',
sortOrder: 'desc',
pagination: true,
search: true, // 显示搜索框
clickToSelect: true, // 是否启用单机选中行
//sidePagination: 'server', // 服务器端分页
pageNumber: 1, // 默认起始页
pageSize: 5,
pageList: [5, 10, 20, 30],
showColumns: true, // 下拉框（选择显示的列）
height : 450,
queryParams: function (params) {
// 每次发送给服务器的参数，可以添加自己需要的参数
return {
pageSize: params.limit,
offset: params.offset,
sortOrder: params.order,
// begintime: $('#begintime').val(),
// endtime: $('#endtime').val()
}
},
});
function download(value,row,index){
var e = "<button class='btn btn-sm btn-success' onclick=\"downloadFile
('"+row.id+"','"+row.fileName+"')\">
<i class='ace-icon fa fa-cloud-download bigger-140'></i></button>";
return e;
}
function delete(value,row,index){
var d = "<button class='btn btn-sm btn-danger' onclick=\"deleteFile
('"+row.id+"')\">
<i class='ace-icon fa fa-trash-o bigger-140'></i></button>";
return d;
}
</script>
3. 功能扩展
bootstrap-table还有 行(row)编辑，单元格(cell)编辑、导出，组合排序等多种功能扩展，请参考以下网址
http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/editable.html
转载请注明原文地址: https://ju.6miu.com/read-11725.html
