BootStrapTable使用总结

BootstrapTable总结


## bootstrap table 方法
1
2
3
4
//获取对象
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) { return params } |

引入链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    <!--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代码:

1
2
3
4
5
6
7
8
9
10
<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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
$(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;
},
});
}