10,606
社区成员
发帖
与我相关
我的任务
分享bootstrap table如何设置可以下载全部数据
bootstrap table如何设置可以下载全部数据，我的代码如下：
<body>
<div class="container">
<h1>
Bootstrap Table Examples
<a href="https://github.com/wenzhixin/bootstrap-table-examples" class="btn btn-primary" role="button" target="_blank">
Learn more »
</a>
</h1>
<div id="toolbar">
<button id="remove" class="btn btn-danger" disabled>
<i class="glyphicon glyphicon-remove"></i> Delete
</button>
<button id="export" class="btn btn-default">
Export Excel
</button>
</div>
<!--<table id="table"></table>-->
<table id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-show-export="true"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-sort-name="id"
data-sort-order="desc"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false"
data-side-pagination="server"
data-url="<%=basePath%>oa/get_bootstrap_data"
data-response-handler="responseHandler">
</table>
</div>
<script>
const $table = $('#table');
const $remove = $('#remove');
let selections = [];
function initTable() {
$table.bootstrapTable({
height: getHeight(),
queryParams: queryParams,
columns: [
[
{
field: 'state',
checkbox: true,
rowspan: 2,
align: 'center',
valign: 'middle'
}, {
title: 'Item ID',
field: 'id',
rowspan: 2,
align: 'center',
valign: 'middle',
sortable: true
}, {
title: 'Item Detail',
colspan: 3,
align: 'center'
}
],
[
{
field: 'name',
title: 'Item Name',
sortable: true,
editable: true,
align: 'center'
}, {
field: 'price',
title: 'Item Price',
sortable: true,
align: 'center',
editable: {
type: 'text',
title: 'Item Price',
validate:function(value) {
value = $.trim(value);
if (!value) {
return 'This field is required';
}
if (!/^\$/.test(value)) {
return 'This field needs to start width $.'
}
const data = $table.bootstrapTable('getData');
const index = $(this).parents('tr').data('index');
console.log("****"+data[index]);
return '';
}
},
footerFormatter: totalPriceFormatter
}, {
field: 'operate',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
]
],
onEditableSave: function (field, row, oldValue, $el) {
alert(row);
$.ajax({
type: "post",
url: "<%=basePath%>oa/get_build_info",
data: row,
dataType: 'JSON',
success: function (data) {
console.log(data)
$table.bootstrapTable('refreshOptions',{pageNumber:1});
},
error: function (err) {
console.log(err)
},
complete: function () {
}
});
}
});
// sometimes footer render error.
setTimeout(
function(){
$table.bootstrapTable('resetView');
},
200);
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function(){
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
// save your data, here just save the current page
selections = getIdSelections();
// push or splice the selections if you want to save all data selections
});
$table.on('expand-row.bs.table', function(e, index, row, $detail){
if (index % 2 == 1) {
$detail.html('Loading from ajax request...');
$.get('LICENSE', function (res) {
$detail.html(res.replace(/\n/g, '<br>'));
});
}
});
$table.on('all.bs.table', function(e, name, args){
console.log(name, args);
});
$remove.click(function(){
const ids = getIdSelections();
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
$remove.prop('disabled', true);
});
$(window).resize(function(){
$table.bootstrapTable('resetView', {
height: getHeight()
});
});
function queryParams (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageSize: params.limit, //页面大小
pageNumber: params.offset, //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
return temp;
};
}
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row){
return row.id
});
}
function responseHandler(res) {
$.each(res.rows, function(i, row){
row.state = $.inArray(row.id, selections) !== -1;
});
return res;
}
function detailFormatter(index, row){
const html = [];
$.each(row, function(key, value){
html.push('<p>##<b>' + key + ':</b> ' + value + '</p>');
});
return html.join('');
}
function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a>',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row));
},
'click .remove': function(e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
function totalPriceFormatter(data) {
let total = 0;
$.each(data, function (i, row){
total += +(price.substring(1));
});
return '$' + total;
}
function getHeight() {
return document.body.clientHeight - $('h1').outerHeight(true);
}
$(function(){
initTable();
var button = document.getElementsByTagName("button");
for(i=0;i<button.length;i++){
if(button[i].name=='refresh'){
button[i].id = 'toolbar_refresh';
document.getElementById('toolbar_refresh').style.height=34;
document.getElementById('toolbar_refresh').style.width=52;
}
if(button[i].name=='paginationSwitch'){
button[i].id = 'toolbar_paginationSwitch';
document.getElementById('toolbar_paginationSwitch').style.height=34;
document.getElementById('toolbar_paginationSwitch').style.width=52;
}
if(button[i].name=='toggle'){
button[i].id = 'toolbar_toggle';
document.getElementById('toolbar_toggle').style.height=34;
document.getElementById('toolbar_toggle').style.width=52;
}
}
})
$('#export').click(function () {
$table.tableExport({
type: 'excel',
escape: false
});
});
</script>
...全文
请发表友善的回复…
发表回复
