邹琼俊

ASP.NET MVC搭建项目后台UI框架—7、统计报表

ASP.NET MVC搭建项目后台UI框架—1、后台主框架
ASP.NET MVC搭建项目后台UI框架—2、菜单特效
ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）
ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

本节，我将通过一个Demo，演示Datatables 和ASP.NET MVC的完美结合，可以这么说，如果这样的界面都能做出来，后台系统90%的界面功能都可以开发出来了。

用jquery Datatables 来开发确实是件比较蛋疼的事情（和Jquery EasyUI、MiniUI、ExtJs相比），用其它的第三方UI框架来实现相同的功能真是非常非常的简单，可是使用Datatables却是那么的吃力，至少我这么觉得，可能是因为我对这个控件使用得还不够纯熟。在官网，datatables默认使用的是bootstraps的样式，这里我已经把样式重写了一部分。

看见公司原有的系统，同样是使用ASP.NET MVC做的，在页面随便点击个东东，整个界面就刷新了，刷得我自己都受不了，更别指望固定表头啊什么什么的了，完全不存在用户体验啊！于是我就自己写了UI框架（也可以说是组装，但是我重写了许多东西）。

技术点：1、服务器端分页。2、查询（模糊查询）3、界面操作刷新后依旧保留当前分页 4、固定表头、表尾 5、动态控制列的隐藏和显示 6、全选、反选（数据行中复选框全部选中时，全选按钮自动选中，我发现很多程序员这个功能一直没做，可是说是bug么？） 7、服务器排序（功能我已经开发出来了，但是这里我没有写上去，这个网上我还没有看到实现的Demo） 8、特殊字段标红显示 9、滑动变色 10、单击行选中变色 ....

先看下效果：

点击图片，折叠或展开列

新建Reconciliation控制器

using Core.CostFlow;
using Core.Filters;
using Core.Reconciliation;
using Data.Reconciliation;
using ProjectBase.Utils;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ProjectBase.Utils.Entities;

namespace Site.Controllers
{
    public class ReconciliationController : Controller
    {
        //运单对账
        public ActionResult WayBill()
        {
            return View();
        }

        [HttpPost]
        public JsonResult WayBillList(WayBillReconciliationFilter filter)
        {
            DataTablesRequest parm = new DataTablesRequest(this.Request);    //处理对象
            int pageIndex = parm.iDisplayStart / parm.iDisplayLength;
            filter.PageIndex = pageIndex;    //页索引
            filter.PageSize = parm.iDisplayLength;    //页行数
            var DataSource = WayBillReconciliation.GetByFilter(filter) as WRPageOfList;

            int i = parm.iDisplayLength * pageIndex;

            List queryData = DataSource.ToList();
            var data = queryData.Select(u => new
           {
               Index = ++i, //行号
               ID = u.ID,
               CusName = u.CusName, //客户简称
               PostingTime =u.PostingTime==null?string.Empty: u.PostingTime.Value.ToStringDate(),//收寄日期
               ExpressNo = u.ExpressNo, //邮件号
               BatchNO = u.LoadBillNum, //提单号
               Weight = u.Weight==null ? 0m : u.Weight / 100, //重量
               WayBillFee = u.WayBillFee, //邮资
               ProcessingFee = u.ProcessingFee, //邮政邮件处理费
               InComeWayBillFee = u.ExpressFee, //客户运费
               InComeOprateFee = u.OperateFee, //客户操作费
               WayBillMargins = u.WayBillProfit, //运费毛利
               TotalMargins = u.ExpressFee + u.OperateFee + u.InComeOtherFee-(u.WayBillFee + u.ProcessingFee + u.CostOtherFee), //总毛利
               Margin = (u.ExpressFee + u.OperateFee + u.InComeOtherFee == 0 ? 0m : (u.ExpressFee + u.OperateFee + u.InComeOtherFee - (u.WayBillFee + u.ProcessingFee + u.CostOtherFee)) / (u.ExpressFee + u.OperateFee + u.InComeOtherFee) * 100) + "%", //毛利率 毛利率=(总收入-总的支出的成本)/总收入*100% 
                           
               ReconcileDate=DateTime.Now.ToString("yyyy-MM"), //对账日期
               CostOtherFee = u.CostOtherFee, //成本 其他费用
               CostTotalFee = u.WayBillFee + u.ProcessingFee+u.CostOtherFee, //成本 总费用
               CostStatus = u.CostStatus.ToChinese(),  //成本 状态
               InComeOtherFee = u.InComeOtherFee, //收入 其他费用
               InComeTotalFee = u.ExpressFee + u.OperateFee+u.InComeOtherFee, //收入 总费用
               InComeStatus = u.InComeStatus.ToChinese(),  //收入 状态
               TotalStatus=""
           });
            decimal totalProfit = 0m;      //总毛利求和
            //构造成Json的格式传递
            var result = new
            {
                iTotalRecords = DataSource.Count,
                iTotalDisplayRecords = DataSource.RecordTotal,
                data = data,
                TotalWeight = DataSource.StatModelBy.TotalWeight/100,
                TotalWayBillFee = DataSource.StatModelBy.TotalWayBillFee,
                               TotalProcessingFee = DataSource.StatModelBy.TotalProcessingFee,
                               TotalExpressFee = DataSource.StatModelBy.TotalExpressFee,
                               TotalOperateFee = DataSource.StatModelBy.TotalOperateFee,
                               SumWayBillProfit = DataSource.StatModelBy.TotalWayBillProfit,
                               SumTotalProfit = totalProfit
            };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        /// 
        /// 提单对账
        /// 
        /// 
        public ActionResult LoadBill()
        {
            return View();
        }

        public JsonResult LoadBillList()
        {
            return Json(null, JsonRequestBehavior.AllowGet);
        }
    }
}

View Code

新建WayBill视图

@{
    ViewBag.Title = "运费对账";
}
<style type="text/css">
    .numberColor {
        color:red;
    }
style>
<link href="~/libs/DataTables-1.10.6/media/css/jquery.dataTablesNew.css" rel="stylesheet" />
<script src="~/libs/DataTables-1.10.6/media/js/jquery.dataTables.min.js">script>
<script src="~/Scripts/DataTablesExt.js">script>
<script src="~/libs/My97DatePicker/WdatePicker.js">script>
<script type="text/javascript">
    $(function () {
        var h = $(document).height() - 312;
        var table = $("#table_local").dataTable({
            bProcessing: true,
            "scrollY": h,
            "scrollCollapse": "true",
            "dom": 'tr<"bottom"lip><"clear">',
            "bServerSide": true,                    //指定从服务器端获取数据  
            sServerMethod: "POST",
            showRowNumber:true,
            sAjaxSource: "@Url.Action("WayBillList", "Reconciliation")",
            "initComplete": function (data, args) {
                //getTotal(args);
                var arr = new Array(7,8,9,12,13,14);
                controlColumnShow(table, arr,false);
            },
            "fnServerParams": function (aoData) {  //查询条件
                aoData.push(
                    { "name": "CusShortName", "value": $("#CusShortName").val() },
                    { "name": "LoadBillNum", "value": $("#LoadBillNum").val() },
                    { "name": "ExpressNo", "value": $("#ExpressNo").val() },
                    { "name": "PostingTime", "value": $("#PostingTime").val() },
                    { "name": "PostingTimeTo", "value": $("#PostingTimeTo").val() }
                    // ,{ "name": "PostingTimeTo", "value": $("#sltMargin").val() }
                     );
            },
            //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
            "order": [[ 2, "asc" ]],
            columns: [
               {
                   "data": "ID", orderable: false,
                   "render": function (data, type, row, meta) {
                       return "   " + row.Index;
                   }
               },                                                      
                { "data": "ReconcileDate",visible:false},//对账日期
                { "data": "CusName" }, //客户名称
                { "data": "PostingTime"},//收寄日期
                { "data": "ExpressNo", orderable: false }, //邮件号
                { "data": "BatchNO"},//提单号
                { "data": "Weight"},//重量
                { "data": "WayBillFee"},//邮政邮资
                { "data": "ProcessingFee" },//邮政邮件处理费
                { "data": "CostOtherFee"},//其它费用
                { "data": "CostTotalFee" },//总成本
                { "data": "CostStatus", orderable: false },//状态
                { "data": "InComeWayBillFee" },//客户运费
                { "data": "InComeOprateFee"},//客户操作费
                { "data": "InComeOtherFee"},//其它费用
                { "data": "InComeTotalFee" },//总收入
                { "data": "InComeStatus", orderable: false },//状态
                 {
                     "data": "WayBillMargins", orderable: false, "render": function (data, type, row, meta) { //运费毛利
                         var css = "";
                         if (data < 0) {
                             css=" class='numberColor'";
                         }
                         var re = ""+css+">"+data+"

"; return re; } }, { "data": "TotalMargins", orderable: false, "render": function (data, type, row, meta) { //总毛利 var css = ""; if (data < 0) { css = " class='numberColor'"; } var re = "" + css + ">" + data + "

"; return re; } }, { "data": "Margin", orderable: false },//毛利率 { "data": "TotalStatus", orderable: false }, { "data": "ID", orderable: false, width: "80", "render": function (data, type, row, meta) { //操作 var re = "

详情 "; return re; } } ], paging: true,//分页 ordering: true,//是否启用排序 searching: true,//搜索 language: { "sProcessing": "处理中...", lengthMenu: '每页显示：