首页 > 代码库 > 5、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle项目开发之——使用datagrid做报表统计
5、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle项目开发之——使用datagrid做报表统计
需要说明一点：数据库访问我使用的是EF框架，但是在报表统计着一块由于使用到了动态表，即根据每一天单独生成了一张数据表，所以不好使用EF进行预先添加，于是我在数据库访问层里面封装了两套数据库访问框架，一个就是EF，一个就是传统的ADO.NET。当设计到使用动态表时，我就调用用ADO.NET进行数据库访问操作了。
先看下View，这里我使用的是jquery easyUI里面的datagrid来做的报表。如下：
单击选中日报：
年报如下：
@model YKT.Model.SubCompanyReport
@{
ViewBag.Title = "分公司营收统计";
Layout = "~/Views/Shared/Base.cshtml";
}
<style type="text/css">
.datagrid-header-row .datagrid-cell-group
{
font-size:12px;
font-weight:bold;
}
.datagrid-header td
{
font-weight:bold;
}
</style>
<script src="../../Res/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript">
var cTime = "";
var cUser = ‘<div style="text-align: left; float:left;">制表人：</div>‘;
var dataDate = "";
var yearMonthTitle = "";
var dayMonthTitle = "";
var tbTitle="";
//获取组织类型
function getComponentType() {
$("#sltCompany").empty();
var url = "SubCompanyReport/GetComList"
$.getJSON(url, function (data) {
if (data != null) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["COMPONENT_ID"])
.text(item["COMPONENT_NAME"])
.appendTo($("#sltCompany"));
});
}
});
}
//“查询”按钮，弹出查询框
function flexiQuery() {
if ($("#Start_Time").val() == "") {
$.messager.alert(‘提示‘, ‘结算日期不能为空‘);
}
else {
//将查询条件按照分隔符拼接成字符串
var search = "Start_Time=" + $("#Start_Time").val() + "&&End_Time=" + $("#End_Time").val() + "&&sltCompany=" + $("#sltCompany").val() + "&&sltReportType=" + $("#sltReportType").val();
var url = ‘SubCompanyReport/GetData?‘ + search;
cTime = ‘<div style="text-align: left; float:left;">制表时间：‘ + CurentDate() + ‘</div>‘;
var myDate = new Date();
var startDate = StringToDate($("#Start_Time").val());
dataDate = ‘<div style="text-align: left; float:left;">数据日期：‘;
if ($("#sltReportType").val() == "0") {
var endDate = StringToDate($("#End_Time").val());
if (endDate == "") {
dataDate += getDateByStr(startDate) + getWeek(startDate);
}
else {
dataDate += getDateByStr(startDate) + getWeek(startDate) + " 到 " + getDateByStr(endDate) + getWeek(endDate);
}
dataDate += ‘</div>‘;
$(‘#div1‘).panel(‘close‘);
$(‘#div‘).panel(‘open‘);
yearMonthTitle = "月累计";
dayMonthTitle = "当日";
//执行查询
getData(url);
}
else if ($("#sltReportType").val() == "1") {
$(‘#div1‘).panel(‘close‘);
$(‘#div‘).panel(‘open‘);
var v = getDateByStr(startDate);
dataDate += v.substring(0, 8);
dayMonthTitle = "当月";
yearMonthTitle = "年累计";
dataDate += ‘</div>‘;
//执行查询
getData(url);
}
else if ($("#sltReportType").val() == "2") {
var v1 = getDateByStr(startDate);
dataDate = v1.substring(0, 5);
tbTitle = ‘公交总公司‘ + dataDate + ‘运营收入统计表(按分公司)‘;
$(‘#div1‘).panel(‘open‘);
$(‘#div‘).panel(‘close‘);
dataDate += ‘</div>‘;
//执行查询
getData1(url);
}
}
}
$(function () {
initData();
$("#sltReportType").change(function () {
if ($("#sltReportType").val() == "0") {
$("#spnEndTime").css("display", "inline");
} else {
$("#spnEndTime").css("display", "none");
}
});
});
//初始化数据
function initData() {
var d = getDate(0);
$("#Start_Time").val(d);
//$("#End_Time").val(d);
getComponentType();
}
//导出
function outputExcel() {
$.messager.confirm(‘操作提示‘, "确认导出数据吗?", function (r) {
if (r) {
//将查询条件按照分隔符拼接成字符串
var search = "Start_Time=" + $("#Start_Time").val() + "&&End_Time=" + $("#End_Time").val() + "&&sltCompany=" + $("#sltCompany").val() + "&&sltReportType=" + $("#sltReportType").val();
var url = ‘SubCompanyReport/Export?‘ + search;
window.location.href = url;
}
});
}
//日报表
function getData(url) {
var searchH = $("#divQuery").height();
var h = document.documentElement.clientHeight - searchH - 26;
//var w = document.documentElement.clientWidth;
$(‘#flexigridData‘).datagrid({
title: ‘分公司营收统计‘, //列表的标题
iconCls: ‘icon-site‘,
// fit: true, //列表自动适应宽度
width: ‘auto‘,
singleSelect: true,
height: h,
nowrap: false, //True 就会把数据显示在一行里。
striped: true, //True 就把行条纹化。（即奇偶行使用不同背景色）
collapsible: true, //可调节列宽
//remoteSort: true, //定义是否从服务器给数据排序。
url: url, //获取数据的url
toolbar: [],
columns: [
[{ title: ‘公交公司全日运营收入统计表(按分公司)‘, colspan: 17,align:‘center‘}], //第一行
[{ title: ‘<div style="text-align: left; float:left;">制表单位：吴江公交总公司IC卡结算管理中心</div>‘, colspan: 8, headalign: ‘left‘ }, { title: cTime, colspan: 7 }, { title: cUser, colspan: 2}], //第二行
[{ title: dataDate, colspan: 17}], //第三行
[{ title: ‘单位‘, rowspan: 3, field: ‘ComponentName‘ }, { title: ‘投币收入‘, colspan: 4 }, { title: ‘IC卡收入‘, colspan: 4 }, { title: ‘IC卡收入占%‘, colspan: 4 }, { title: ‘合计‘, colspan: 4}], //第四行
[{ title: dayMonthTitle, colspan: 2 }, { title: yearMonthTitle, colspan: 2 }, { title: dayMonthTitle, colspan: 2 }, { title: yearMonthTitle, colspan: 2 }, { title: dayMonthTitle, colspan: 2 },
{ title: yearMonthTitle, colspan: 2 }, { title: dayMonthTitle, colspan: 2 }, { title: yearMonthTitle, colspan: 2}], //第五行
[{ title: ‘人次(次)‘, field: ‘tbrec‘ }, { title: ‘金额(元)‘, field: ‘tbamt‘, width: 80 }, { title: ‘人次(次)‘, field: ‘tbljrec‘ }, { title: ‘金额(元)‘, field: ‘tbljamt‘, width: 80 },
{ title: ‘人次(次)‘, field: ‘icrec‘ }, { title: ‘金额(元)‘, field: ‘icamt‘, width: 80 }, { title: ‘人次(次)‘, field: ‘icljrec‘ }, { title: ‘金额(元)‘, field: ‘icljamt‘, width: 80 },
{ title: ‘人次(次)‘, field: ‘dayrecPer‘ }, { title: ‘金额(元)‘, field: ‘dayAmtPer‘ }, { title: ‘人次(次)‘, field: ‘monthrecPer‘ }, { title: ‘金额(元)‘, field: ‘monthAmtPer‘ },
{ title: ‘人次(次)‘, field: ‘dayrecTotal‘ }, { title: ‘金额(元)‘, field: ‘dayAmtTotal‘,width:80 }, { title: ‘人次(次)‘, field: ‘monthrecTotal‘ }, { title: ‘金额(元)‘, field: ‘monthAmtTotal‘,width:80}], //第六行
] //,
//pagination: true, //在 datagrid 的底部显示分页栏。
//rownumbers: true //显示行号的列
});
//异步获取按钮
//首先获取iframe标签的id值
var iframeid = window.parent.$(‘#tabs‘).tabs(‘getSelected‘).find(‘iframe‘).attr("id");
//然后关闭AJAX相应的缓存
$.ajaxSetup({
cache: false
});
//获取按钮值
$.getJSON("../Home/GetToolbar", { id: iframeid }, function (data) {
if (data == null) {
return;
}
$(‘#flexigridData‘).datagrid("addToolbarItem", data);
});
}
//年报表
function getData1(url) {
var searchH = $("#divQuery").height();
var h = document.documentElement.clientHeight - searchH - 26;
//var w = document.documentElement.clientWidth;
$(‘#flexigridData1‘).datagrid({
title: ‘分公司营收统计‘, //列表的标题
iconCls: ‘icon-site‘,
// fit: true, //列表自动适应宽度
width: ‘auto‘,
singleSelect: true,
height: h,
nowrap: false, //True 就会把数据显示在一行里。
striped: true, //True 就把行条纹化。（即奇偶行使用不同背景色）
collapsible: true, //可调节列宽
//remoteSort: true, //定义是否从服务器给数据排序。
url: url, //获取数据的url
toolbar: [],
columns: [
[{ title: tbTitle, colspan: 9, align: ‘center‘}], //第一行
[{ title: ‘<span style="text">制表单位：吴江公交总公司IC卡结算管理中心</span>‘, colspan: 4, headalign: ‘left‘ }, { title: cTime, colspan: 3 }, { title: cUser, colspan: 2}], //第二行
[{ title: ‘单位‘, rowspan: 2, field: ‘ComponentName‘ }, { title: ‘投币收入‘, colspan: 2 }, { title: ‘IC卡收入‘, colspan: 2 }, { title: ‘IC卡收入占%‘, colspan: 2 }, { title: ‘合计‘, colspan: 2}], //第三行
[{ title: ‘人次(次)‘, field: ‘tbrec‘ }, { title: ‘金额(元)‘, field: ‘tbamt‘, width: 120 }, { title: ‘人次(次)‘, field: ‘icrec‘ }, { title: ‘金额(元)‘, field: ‘icamt‘, width: 120 },
{ title: ‘人次(次)‘, field: ‘yearrecPer‘ }, { title: ‘金额(元)‘, field: ‘yearAmtPer‘, width: 120 }, { title: ‘人次(次)‘, field: ‘yearrecTotal‘ }, { title: ‘金额(元)‘, field: ‘yearAmtTotal‘, width: 120}]
] //,
//pagination: true, //在 datagrid 的底部显示分页栏。
//rownumbers: true //显示行号的列
});
//异步获取按钮
//首先获取iframe标签的id值
var iframeid = window.parent.$(‘#tabs‘).tabs(‘getSelected‘).find(‘iframe‘).attr("id");
//然后关闭AJAX相应的缓存
$.ajaxSetup({
cache: false
});
//获取按钮值
$.getJSON("../Home/GetToolbar", { id: iframeid }, function (data) {
if (data == null) {
return;
}
$(‘#flexigridData1‘).datagrid("addToolbarItem", data);
});
}
</script>
<div id="content" region="center" fit="true">
<form id="form1">
<div id="divQuery" style="padding: 5px; font-size: 12px;" title="查询列表" class="easyui-toolbar">
<span>结算日期：</span><span>
<input type="text" readonly="readonly" id="Start_Time" onclick="WdatePicker({maxDate:‘#F{$dp.$D(\‘End_Time\‘);}‘})" />
</span>
<span id="spnEndTime"> 到
<input type="text" readonly="readonly" id="End_Time" onclick="WdatePicker({minDate:‘#F{$dp.$D(\‘Start_Time\‘);}‘})" /></span>
<span>公司类型：</span> <span><select id="sltCompany"></select></span>
<span style=" margin:4px;">报表类型：</span><span><select id="sltReportType">
<option value="0">日报</option>
<option value="1">月报</option>
<option value="2">年报</option>
</select></span>
<a href="javascript:flexiQuery()" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">查询</a>
<a href="javascript:resetData()" class="easyui-linkbutton" data-options="iconCls:‘icon-redo‘"> 重置</a>
</div>
</form>
<div id="div" class="easyui-panel" closed="true">
<table id="flexigridData" style=" text-align:center">
</table> </div>
<div id="div1" class="easyui-panel" closed="true">
<table id="flexigridData1" style=" text-align:center">
</table>
</div>
</div>控制器SubCompanyReportController如下：using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using YKT.BLL;
using YKT.Common;
using YKT.Model;
using System.IO;
using Microsoft.Office.Interop.Excel;
using System.Text;
namespace YKT.Controllers
{
public class CompanyClass
{
public string COMPONENT_ID { get; set; }
public string COMPONENT_NAME { get; set; }
}
public class SubCompanyReportController : Controller
{
#region 初始化
string ClassName = "SubCompanyReport"; //类名
SubCompanyReportService _service;
public SubCompanyReportController()
{
if (_service == null)
{
_service = new SubCompanyReportService();
}
}
ValidationErrors validationErrors = new ValidationErrors();
OMOPERATIONLOGTB OperLog = new OMOPERATIONLOGTB();
#endregion
public ActionResult Index()
{
return View();
}
public JsonResult GetComList()
{
System.Data.DataTable data = http://www.mamicode.com/_service.GetComList(1, -1, 0, "COMMON,BUS");>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。