bootstrap前端页面导出table

最新推荐文章于 2024-04-12 02:43:15 发布

超小小小脑斧

最新推荐文章于 2024-04-12 02:43:15 发布

阅读量625

点赞数

分类专栏：前端文章标签： bootstrap导出table bootstrap带查询条件未登陆父窗口跳到登陆界面

本文链接：https://blog.csdn.net/hfbjdfndjkfdgkfdljg/article/details/80701974

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html;charset= UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

if(session.getAttribute("user")==null){
out.println("<html>");
out.println("<script>");
out.println("window.open ('/handyservice/pages/login.jsp','_top')");
out.println("</script>");
out.println("</html>");
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>
<div class="messagesCss">
<%@ include file="../pages/messages.jsp"%>
</div>
<div class="container-fluid">

<div>
<div id="toolbar-btn" class="btn-group pull-left" style="padding-bottom:10px;">

</div>

<div class="pull-right" id="query-form" style="padding-bottom:10px;" >
<input name="cabinetNo" placeholder='柜号' type="text" id="cabinetNo"
style="float:left;width:150px;margin-right:5px;" v-model="lookupType"
class="form-control">
<input name="blno" placeholder=' 提单号' type="text" id="blno"
style="float:left;width:150px;margin-right:5px;" v-model="description"
class="form-control">
<div style="float:left;margin-right:5px;" style="position:relative;">
<input name="startDate" placeholder='录入时间起期' type="text"
style="float:left;width:150px;margin-right:5px;" v-model="description"
class="form-control form_datetime">
<input name="endDate" placeholder='录入时间止期' type="text"
style="float:left;width:150px;margin-right:5px;" v-model="description"
class="form-control form_datetime">
</div>
<div class="btn-group">
<button id="btn_search" οnclick="Search()" type="button" class="btn btn-primary btn-space">
<span class="fa fa-search" aria-hidden="true" class="btn-icon-space"></span>
查询
</button>
<button id="btn_reset" οnclick="reset()" type="button" class="btn btn-default btn-space">
<span class="fa fa-eraser" aria-hidden="true" class="btn-icon-space"></span>
重置
</button>
<button id="exportBtn" class="export-excel btn btn-default" data-table="#table">导出</button>
</div>
</div>
</div>
<table id="table" class="table table-condensed table-striped"></table>
</div>

</body>

//重置按钮的方法

function reset(){
$("#blno").val("");
$("#cabinetNo").val("");
$(".form_datetime").val("");

}
//时间控件初始化
$('.form_datetime').datetimepicker({
minView: "month", //选择日期后，不会再跳转去选择时分秒
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 1,
autoclose: 1,

});

//查询按钮的方法

function Search(){
$("#table").bootstrapTable('refresh', {url: '<%=request.getContextPath() %>/ShipprocrssController/Export'});

}

//初始化导出功能的js

TableExport.init();

//table的查询

$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();

//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();

});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {function NameFormatter(value, row, index) {return ['<span>'+value+'</span>'].join('');};
$('#table').bootstrapTable({
url: '<%=request.getContextPath() %>/ShipprocrssController/Export', //请求后台的URL（*）
method: 'post', //请求方式（*）
contentType : "application/x-www-form-urlencoded", //请求参数类型
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
paginationLoop:true,//默认true，分页条无限循环
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
strictSearch: true,
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
{field:"id",title:'编号'},
{field:"blno",title:'提单号'},
{field:"cabinetNo",title:'柜号'},
{field:"cabinetType",title:'柜子型号'},
{field:"shipCompany",title:'船公司'},
{field:"shipName",title:'船名称'},
{field:"shipNo",title:'船号码'},
{field:"statrPart",title:'始发地'},
{field:"leavePortDateStr",title:'离港日期'},
{field:"termini",title:'目的地'},
{field:"predictArrivePortDateStr",title:'预计到达目的港日期'},
{field:"shipUnloadingDateStr",title:'卸船日期'},
{field:"predictArriveStorageDateStr",title:'预计到达仓库日期'},
{field:"arriveDateStr",title:'送达日期'},
{field:"emptyCabinetReturnDateStr",title:'还空柜日期'},
{field:"operator",title:'录入人'},
{field:"makedateStr",title:'录入时间'},
{field:"update_code",title:'修改人'},
{field:"updatedateStr",title:'修改时间'}

]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var param = {};
$('#query-form').find('[name]').each(function () {
var value = $(this).val();
if (value != '') {
param[$(this).attr('name')] = value;
}
});
return param;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化页面上面的按钮事件
};
return oInit;
};
</script>
</html>