BootstrapTable总结
## bootstrap table 方法
//获取对象
var $table = $('#table');
//选中第二行数据
$table.bootstrapTable('check', 1);
方法列表
| 方法名称 | 说明 |
|---|---|
| refresh | 刷新表格，会重新发送服务端请求 |
| getSelections | 获取选中行数据 |
| checkAll | 全选、反选uncheckAll |
| refreshOptions | 刷新配置和refresh不一样，此选项只刷新配置而不会发送请求 |
| insertRow | 插入行数据 |
| updateRow | 更新行数据 |
| remove | 删除行 |
分页设置
分页设置不能处理跨域请求
| 参数名称 | 说明 |
|---|---|
| order | 排序方式asc需要你服务器按顺序排序，desc倒序排序 |
| offset | 起始行，比如你数据库有100条数据，offset等于10表示你服务器需要从第10条数据返回结果 |
| limit | 每次读取多少条数据 |
| search | 用户在输入框搜索的关键词 |
| queryParams | 分页时你可以传入你的自定义参数，例如你想每次往服务器请求时带action="getlist"参数function(params) |
引入链接
<!--jquery-->
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<!--bootstrap-->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--fontawesome-->
<script src="https://cdn.bootcss.com/font-awesome/5.8.1/js/all.min.js"></script>
<!--bootstrap-table-->
<link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
<!--bootstrap-table-lanuage-->
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>
<!--bootstrap-table-export-->
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script>
<!--在客户端保存生成的导出文件-->
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）-->
<script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script>
<!--以PNG格式导出表格-->
<!--对于IE支持包括 html2canvas 之前的 es6-promise-->
<script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<!--将表导出为PDF文件-->
<%-- todo 不可用 --%>
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
<%-- todo 不可用 --%>
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
html代码：
<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<button type="button" onclick="exportData()" class='btn btn-mini btn-info'>导出</button>
<table id="table1" data-locale="zh-CN"></table>
</div>
javascript代码：
$(function () {
$('#table1').bootstrapTable({
url: '/user/queryuser', //请求后台的URL（*）
method:"get", // 请求方式（*）
totalField:"num", //总数：后端传的参数，用这个参数可以更改
dataField:"list", //总数据名：同上一样。
// totalField 默认 total,dataField 默认 rows,
classes: "table table-bordered table-striped", //表格样式
toolbar:"#toolbar", //工具按鈕用哪個容器
pagination: true, //是否显示分页（*）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
showRefresh: true, //是否显示刷新按钮
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，
searchOnEnterKey:false, //******回车后执行搜索****//
showColumns: true, //是否显示所有的列
clickToSelect: true, //是否启用点击选中行
singleSelect:"true", //是否启用单选按钮
uniqueId: "userCode", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
showFullscreen:true, // 是否全屏显示
// cardView: true, //是否显示详细视图
// locale:"zh", 设置语言
//showHeader: true, 是否显示头部
showExport: true,//工具栏上显示导出按钮
exportDataType: $(this).val(),//显示导出范围
exportTypes: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],//导出格式
exportOptions: {//导出设置
fileName: 'TableUser',//下载文件名称
},
dataType:"text", //服务器返回了txt字符串
responseHandler:function(res) {
return JSON.parse(res);//把字符串转换成JSON
},
columns: [{
checkbox:true,
align:"center",
},{
title: '排序',//标题 可不加
align: "center",
formatter: function (value, row, index) {
return index + 1;
}
},{
field: 'userName',
title: '姓名',
align:"center",
}, {
field: 'userCode',
title: '用户名',
align:"center",
}, {
field: 'gender',
title: '性别',
align:"center",
formatter:function (value,row,index) {
if (value == 1){
return "男"
}else{
return "女"
}
}
}, {
field: 'birthday',
title: '出生日期',
align:"center",
//——修改——获取日期列的值进行转换
formatter: function (value, row, index) {
return changeDateFormat(value)
},
sortable: true, //可以根据出生日期排序
},{
field:"userCode",
title: "操作",
width:"210",
align:"center",
valign:"middle",
formatter:actionFormatter,
}]
});
});
//操作栏的格式化
function actionFormatter(value) {
var result = "";
var id = value+"";
result += "<a onclick=\"query('"+value+"')\" href='javascript:;' class='btn btn-xs green' title='查看'><span class='glyphicon glyphicon-search'>查看</span></a>";
result += "<a onclick=\"upData('"+value+"')\" href='javascript:;' class='btn btn-xs blue' title='编辑'><span class='glyphicon glyphicon-pencil' data-target='#upData'>编辑</span></a>";
result += "<a onclick=\"del('"+value+"')\" href='javascript:;' class='btn btn-xs red' title='删除'><span class='glyphicon glyphicon-remove'>删除</span></a>";
return result;
}
function query(value){
console.log("数据id为"+value+"正在查看信息")
}
function upData(value){
console.log("数据id为"+value+"正在编辑信息")
}
function del(value){
console.log("数据id为"+value+"正在删除信息")
}
//转换日期格式(时间戳转换为datetime格式)
function changeDateFormat(cellval) {
var dateVal = cellval + "";
if (cellval != null) {
var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
}
}
// 自定义按钮导出数据
function exportData(){
$('#table').tableExport({
type: 'excel',
exportDataType: "all",
ignoreColumn: [0],//忽略某一列的索引
fileName: 'Tablexxx',//下载文件名称
onCellHtmlData: function (cell, row, col, data){//处理导出内容,自定义某一行、某一列、某个单元格的内容
console.info(data);
return data;
},
});
}
评论区