服务器端报表页面代码：
<!DOCTYPE html>
<html>
<head>
${load("Include.html")}
<link rel="stylesheet" type="text/css" href="/scripts/Spread.Sheets/css/gc.spread.sheets.excel2013white.10.0.1.css" />
<script type="text/javascript" src="/scripts/Spread.Sheets/scripts/gc.spread.sheets.all.10.0.1.min.js"></script>
<script type="text/javascript" src="/scripts/Spread.Sheets/scripts/interop/gc.spread.excelio.10.0.1.min.js"></script>
<script type="text/javascript" src="/scripts/Spread.Sheets/scripts/FileSaver.js"></script>
<script type="text/javascript" src="/Pages/Views/TJBB/SpreadLicense.js"></script>
<script type="text/javascript" src="/Pages/Views/TJBB/Spread.FYTJ_Report.js"></script>
<title>付油统计页面</title>
<script type="text/javascript">
var spread;
var sheet;
$(function ($) {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("SpreadGrid"), {
sheetCount: 1
});
initDate();
initSpread(spread);
});
//初始化Spread
function initSpread(spread) {
//加载模板
spread.fromJSON(_Spread_FYTJ_Report);
//激活Sheet
sheet = spread.getActiveSheet();
//设置表单保护
sheet.options.isProtected = true;
sheet.options.tabNavigationVisible = false;
sheet.options.protectionOptions = {
allowSelectLockedCells: true,
allowSelectUnlockedCells: true,
allowSort: false,
allowEditObjects: false,
allowResizeRows: true,
allowResizeColumns: true
};
}
//初始化付油日期组件
function initDate() {
var date = new Date();
$("#CreateTime").datebox("setValue", date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
}
//查询数据
function SearchData() {
$.messager.progress({
title: '请等待',
msg: '正在查询数据......'
});
var model = { CreateTime: $("#CreateTime").datebox("getValue") };
AjaxPost("/Handlers/TJBB/TJBBHandler.ashx?Action=GetFYTJReportData", function (data) {
if (data) {
var bindData = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.setDataSource(bindData);
var style = new GC.Spread.Sheets.Style();
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.font = "10pt 微软雅黑";
style.backColor = "white";
style.borderLeft = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style.borderTop = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style.borderRight = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style.borderBottom = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
for (var i = 3; i <= data.FYTJ_List.length + 3; i++) {
sheet.setRowHeight(i, 32);
for (var j = 1; j < 13; j++) {
sheet.setStyle(i, j, style, GC.Spread.Sheets.SheetArea.viewport);
}
}
//合并采油队列的行
window.setTimeout(function () {
var start = 5, end = 5;
var spanValue = sheet.getValue(5, 1);//采油队
for (var i = 6; i < sheet.getRowCount() ; i++) {
var newRowValue = sheet.getValue(i, 1);
end = i;
if (spanValue !== newRowValue) {
if (end - start > 1) {
sheet.addSpan(start, 1, end - start, 1);
}
start = end;
spanValue = newRowValue;
}
if (!newRowValue) {
break;
}
}
}, 1000);
sheet.resumePaint();
$.messager.progress("close");
}
}, model, true);
}
//导出到Excel
function ExportData() {
var fileName = $("#CreateTime").datebox("getValue") + "付油统计表.xlsx";
var excelIO = new GC.Spread.Excel.IO();
var json = spread.toJSON({ includeBindingSource: true });
excelIO.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
console.log(e);
});
}
</script>
</head>
<body class="easyui-layout">
<div style="padding:2px;" data-options="region:'north',height:34,collapsible:false">
<div id="toolbar">
<div class="datagrid-btn-separator"></div>
<label>付油日期：</label>
<input id="CreateTime" name="CreateTime" class="easyui-datebox" data-options="required:true,missingMessage:'不能为空',width:120" />
<a id="SearchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
<a id="ExcelBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-excel',plain:true">导出Excel</a>
</div>
</div>
<div style="padding:1px;" data-options="region:'center',collapsible:false">
<div id="SpreadGrid" style="height:100%;"></div>
</div>
</body>
</html>
手机端使用的APICloud框架实现，代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>报表窗口</title>
<link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-dark" id="aui-header">
<a class="aui-pull-left" tapmode>
<span class="aui-iconfont aui-icon-left"></span>返回
</a>
<div id="titleDiv" class="aui-title"></div>
<a class="aui-iconfont aui-icon-menu aui-pull-right"></a>
</header>
</body>
<script type="text/javascript" src="../script/aui/api.js"></script>
<script type="text/javascript">
function closeWin() {
api.setScreenOrientation({
orientation: 'portrait_up'
});
api.closeWin();
}
apiready = function() {
api.parseTapmode();
$api.text($api.byId('titleDiv'),api.pageParam.name);
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
api.openFrame({
name: api.pageParam.name,
url: api.pageParam.url,
bounces: true,
rect: {
x: 0,
y: headerPos.h,
w: headerPos.w,
h: 'auto'
}
})
};
</script>
</html>
其中红色文字是服务器端报表页面请求地址。
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
