使用 MVC、AngularJS 和 Web API 2 的动态透视表
4.97/5 (11投票s)
使用 AngularJS 和 Web API 2 的简单 MVC 透视 HTML 网格。
引言
在本篇文章中，我们将详细介绍如何使用 AngularJS 创建一个简单的 MVC 透视表 HTML 网格。在我之前的文章中，我解释了如何创建一个动态项目计划。在那篇文章中，我使用了存储过程从 SQL 查询中显示透视表结果。
在实际项目中，我们需要生成许多类型的报表，并且需要将逐行显示的数据转换为逐列显示。在本篇文章中，我将解释如何使用 AngularJS 创建一个透视表网格，以便从前端显示实际数据。
例如，让我们来看下面的例子。我有玩具类型（类别）和玩具名称，以及每天的销售价格。
在我们的数据库中，我们插入了每条玩具详情记录及其价格详情。插入数据库的原始数据如下所示。
玩具销售详情表
在这里，我们可以看到总共有 11 条记录。对于每一天，玩具名称和玩具类型都有重复。现在，如果我想查看每个玩具类型下每个玩具名称的总销售额，那么我需要创建一个透视表结果，以显示每个玩具类型下每个玩具名称的总和。所需输出如下所示：
按玩具名称汇总价格的透视表
在这里，我们可以看到查看每个玩具名称的总销售额要容易得多。在这里，我们还可以在透视表中添加列和行的总计。通过添加总计，可以轻松找到哪个项目销售额最高。
透视表结果有很多种，我们可以再看一个按年按月汇总玩具销售额的透视报表。在这里，我们显示了从 07 月（七月）到 11 月（十一月）的月度透视表结果。
按月汇总价格的透视表
在本篇文章中，我们将介绍两种透视报表。
- 用于显示每个玩具类型下按玩具名称汇总价格的透视表结果
- 用于显示按玩具名称汇总月度价格的透视表结果
必备组件
您还可以参考我之前关于使用 MVC 和 WCF Rest 服务进行 AngularJS 的文章
- MVC AngularJs 和 WCF REST 服务用于“读心术”问答游戏
- MVC、AngularJs 和 WCF REST 服务用于主从详细信息网格
- 使用 MVC 和 WCF REST 进行 AngularJs 过滤、排序和动画
- 使用 MVC 和 WCF REST 服务进行 AngularJs 购物车
- 使用 MVC 和 WCF REST 进行 AngularJs 动态菜单创建
与 Angular JS、MVC 和 WEB API 相关的先前文章。
- 使用 MVC、AngularJs 和 Web API 2 进行图像预览
- MVC、Angular JS 使用 WEB API 2 和存储过程进行 CRUD 操作
- 使用 MVC 和 AngularJS 进行动态项目调度
- MVC Web API 和 AngularJS 图像拼图游戏
- MVC Web API 和 AngularJS 游戏“你是天才”
- https://codeproject.org.cn/Articles/1046214/MVC-AngularJS-Master-Detail-CRUD-Filter-And-Sortin?msg=5168459#xx5168459xx
Using the Code
创建数据库和表
在第一步中，我们将创建一个样本数据库和表供我们的项目使用。以下是用于创建数据库、表和样本插入查询的脚本。
在您的 SQL Server 中运行以下脚本。我使用的是 SQL Server 2014。
-- Author : Shanu
-- Create date : 2015-11-20
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier : Shanu
-- Modify date : 2015-11-20
-- =============================================
--Script to create DB,Table and sample Insert data
USE MASTER;
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'ToysDB' )
BEGIN
ALTER DATABASE ToysDB SET SINGLE_USER WITH ROLLBACK IMMEDIATE
DROP DATABASE ToysDB ;
END
CREATE DATABASE ToysDB
GO
USE ToysDB
GO
-- 1) //////////// ToysDetails table
-- Create Table ToysDetails, This table will be used to store the
-- details like Toys Information
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ToysSalesDetails' )
DROP TABLE ToysSalesDetails
GO
CREATE TABLE ToysSalesDetails
(
Toy_ID int identity(1,1),
Toy_Type VARCHAR(100) NOT NULL,
Toy_Name VARCHAR(100) NOT NULL,
Toy_Price int NOT NULL,
Image_Name VARCHAR(100) NOT NULL,
SalesDate DateTime NOT NULL,
AddedBy VARCHAR(100) NOT NULL,
CONSTRAINT [PK_ToysSalesDetails] PRIMARY KEY CLUSTERED
(
[Toy_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, _
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
-- delete from ToysSalesDetails
-- Insert the sample records to the ToysDetails Table
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Spiderman',1650,'ASpiderman.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Spiderman',1250,'ASpiderman.png',getdate()-6,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Superman',1450,'ASuperman.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Superman',850,'ASuperman.png',getdate()-4,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Thor',1350,'AThor.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Thor',950,'AThor.png',getdate()-8,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Wolverine',1250,'AWolverine.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Wolverine',450,'AWolverine.png',getdate()-3,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','CaptainAmerica',1100,'ACaptainAmerica.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Spiderman',250,'ASpiderman.png',getdate()-120,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Spiderman',1950,'ASpiderman.png',getdate()-40,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Superman',1750,'ASuperman.png',getdate()-40,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Thor',900,'AThor.png',getdate()-100,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Thor',850,'AThor.png',getdate()-50,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Wolverine',250,'AWolverine.png',getdate()-80,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','CaptainAmerica',800,'ACaptainAmerica.png',getdate()-60,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Superman',1950,'ASuperman.png',getdate()-80,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Thor',1250,'AThor.png',getdate()-30,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Action','Wolverine',850,'AWolverine.png',getdate()-20,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Lion',1250,'Lion.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Lion',950,'Lion.png',getdate()-4,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Tiger',1900,'Tiger.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Tiger',600,'Tiger.png',getdate()-2,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Panda',650,'Panda.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Panda',1450,'Panda.png',getdate()-1,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Dog',200,'Dog.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Lion',450,'Lion.png',getdate()-20,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Tiger',400,'Tiger.png',getdate()-90,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Panda',550,'Panda.png',getdate()-120,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Dog',1200,'Dog.png',getdate()-60,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Lion',450,'Lion.png',getdate()-90,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Animal','Tiger',400,'Tiger.png',getdate()-30,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Bird','Owl',600,'BOwl.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Bird','Greenbird',180,'BGreenbird.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Bird','Thunderbird',550,'BThunderbird-v2.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Bird','Owl',600,'BOwl.png',getdate()-50,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Bird','Greenbird',180,'BGreenbird.png',getdate()-90,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Bird','Thunderbird',550,'BThunderbird-v2.png',getdate()-120,'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Car','SingleSeater',1600,'CSingleSeater.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Car','Mercedes',2400,'CMercedes.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Car','FordGT',1550,'CFordGT.png',getdate(),'Shanu')
Insert into ToysSalesDetails(Toy_Type,Toy_Name,Toy_Price,Image_Name,SalesDate,AddedBy) _
values('Car','Bus',700,'CBus.png',getdate(),'Shanu')
select *,
SUBSTRING('JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC ', _
(DATENAME(month, SalesDate) * 4) - 3, 3) as 'Month'
from ToysSalesDetails
Where YEAR(SalesDate)=YEAR(getdate())
Order by Toy_Type,Toy_Name,Image_Name,SalesDate
-- 1) END //
在创建了表之后，我们将创建一个存储过程，以从数据库中获取所有数据，以便使用 AngularJS 和 Web API 从我们的 MVC 应用程序创建透视表网格。
1. 创建存储过程的脚本
-- 1) Stored procedure to Select ToysSalesDetails
-- Author : Shanu
-- Create date : 2015-11-20
-- Description : Toy Sales Details
-- Tables used : ToysSalesDetails
-- Modifier : Shanu
-- Modify date : 2015-11-20
-- =============================================
-- exec USP_ToySales_Select '',''
-- =============================================
CREATE PROCEDURE [dbo].[USP_ToySales_Select]
(
@Toy_Type VARCHAR(100) = '',
@Toy_Name VARCHAR(100) = ''
)
AS
BEGIN
select Toy_Type as ToyType
,Toy_Name as ToyName
,Image_Name as ImageName
,Toy_Price as Price
,AddedBy as 'User'
,DATENAME(month, SalesDate) as 'Month'
FROM ToysSalesDetails
Where
Toy_Type like @Toy_Type +'%'
AND Toy_Name like @Toy_Name +'%'
AND YEAR(SalesDate)=YEAR(getdate())
ORDER BY
Toy_Type,Toy_Name,SalesDate
END
2. 在 Visual Studio 2015 中创建您的 MVC Web 应用程序
安装 Visual Studio 2015 后，单击开始，然后单击程序，然后选择Visual Studio 2015。单击Visual Studio 2015，然后单击新建，项目，选择Web，然后单击ASP.NET Web 应用程序。选择项目位置并输入 Web 应用程序名称。
选择MVC，然后在为...添加文件夹和核心引用中，选择Web API，然后单击确定。
使用 ADO.NET 实体数据模型添加数据库
右键单击我们的项目，然后单击添加，然后单击新建项。
选择数据，然后选择ADO.NET 实体数据模型，并为我们的 EF 提供名称，然后单击添加。
选择数据库中的 EF 设计器，然后单击下一步。
在此，单击新建连接并提供您的 SQL Server - 服务器名称并连接到您的数据库。
在这里，我们可以看到我已经输入了我的 SQL 服务器名称、Id 和 PWD，并且在连接成功后。我选择了数据库为ToysDB，因为我们已经使用我的 SQL 脚本创建了数据库。
单击下一步，选择需要使用的表和所有存储过程，然后单击完成。
在这里，我们可以看到我们已经创建了ToySalesModel。
创建实体后，下一步是向我们的控制器添加 Web API 并编写 选择/插入/更新和删除的函数。
添加 Web API 控制器的过程
右键单击Controllers文件夹，单击添加，然后单击Controller。
选择控制器，然后添加一个空的 Web API 2 控制器。为 Web API 控制器提供您的名称，然后单击确定。在此演示项目中，我为订单主表和订单详细信息创建了两个不同的控制器。
由于我们创建了 Web API 控制器，我们可以看到我们的控制器已继承了 ApiController。
众所周知，Web API 是构建浏览器和移动设备 HTTP 服务的简单易行的方法。
Web API 具有以下四种方法：Get/Post/Put 和 Delete，其中
- Get 用于请求数据（
Select） - Post 用于创建数据（
Insert） - Put 用于更新数据。
- Delete 用于删除数据。
Get 方法
在我们的示例中，我只使用了Get方法，因为我只使用存储过程来获取数据并通过 AngularJS 绑定到我们的 MVC 页面。
查询操作
我们使用get方法通过实体对象获取ToysSalesDetails表的所有详细信息，并将结果返回为IEnumerable。我们在 AngularJS 中使用此方法，并在 MVC 页面中从 AngularJS 控制器显示结果。使用Ng-Repeat，我们可以绑定详细信息。
在这里，我们可以看到在get方法中，我将搜索参数传递给了USP_ToySales_Select存储过程。在存储过程中，我使用了“%”来返回所有记录，如果搜索参数为空。
public class ToyController: ApiController
{
ToysDBEntities objAPI = new ToysDBEntities();
// to Search Student Details and display the result
[HttpGet]
public IEnumerable < USP_ToySales_Select_Result > Get(string ToyType, string ToyName)
{
if(ToyType == null) ToyType = "";
if(ToyName == null) ToyName = "";
return objAPI.USP_ToySales_Select(ToyType, ToyName)
.AsEnumerable();
}
}
现在我们已经创建了 Web API 控制器类。下一步是创建我们的 AngularJS 模块和控制器。让我们看看如何创建我们的 AngularJS 控制器。在 Visual Studio 2015 中，添加 AngularJS 控制器要容易得多。让我们一步一步地看看如何创建和编写我们的 AngularJS 控制器。
创建 AngularJs Controller
首先，在script文件夹内创建一个文件夹，我将其命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键单击MyAngular文件夹，然后单击添加，然后单击新项。选择Web，然后选择 AngularJS Controller，并为 Controller 提供一个名称。我将我的 AngularJS Controller 命名为“Controller.js”。
创建 AngularJS Controller 后，我们可以看到默认情况下 Controller 将包含带有默认模块定义的代码等。
我已经更改了前面的代码，如下所示添加了 Module 和 controller。
如果 AngularJS 包缺失，请将该包添加到您的项目中。
右键单击您的 MVC 项目，然后单击管理 NuGet 包。搜索 AngularJS，然后单击安装。
现在我们可以看到所有 AngularJs 包都已安装，并且可以在Script文件夹中看到所有文件。
创建 AngularJs 脚本文件的过程
Modules.js：在这里，我们将添加对 AngularJS JavaScript 的引用，并创建一个名为“OrderModule”的 Angular 模块。
// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
(function () {
app = angular.module("OrderModule", ['ngAnimate']);
})();
Controllers：在 AngularJS 控制器中，我完成了所有的业务逻辑，并将数据从 Web API 返回到我们的 MVC HTML 页面。
1. 变量声明
首先，我声明了所有需要使用的局部变量。
app.controller("AngularJsOrderController",
function ($scope,$sce, $timeout, $rootScope, $window, $http) {
$scope.date = new Date();
$scope.MyName = "shanu";
//For Order Master Search
$scope.ToyType = "";
$scope.ToyName = "";
// 1) Item List Arrays.This arrays will be used to display .
$scope.itemType = [];
$scope.ColNames = [];
// 2) Item List Arrays.This arrays will be used to display .
$scope.items = [];
$scope.ColMonths = [];
2. 方法
Select 方法
在select方法中，我使用$http.get从 Web API 获取详细信息。在get方法中，我将提供我们的 API 控制器名称和方法来获取详细信息。在这里，我们可以看到我使用了
{ params: { ToyType: ToyType, ToyName: ToyName }
该函数将在每次页面加载时调用。在页面加载期间，我将获取所有详细信息，并首先将每个唯一的玩具名称存储在数组中，以便按玩具名称作为列显示透视报表，并将月份编号存储在数组中，以便按月度汇总显示透视报表。
存储了玩具名称和月份编号的唯一值后，我将调用$scope.getMonthDetails();和$scope.getToyNameDetails();来生成透视报表并绑定结果。
// To get all details from Database
selectToySalesDetails($scope.ToyType, $scope.ToyName);
// To get all details from Database
function selectToySalesDetails(ToyType, ToyName)
{
$http.get('/api/Toy/',
{
params:
{
ToyType: ToyType,
ToyName: ToyName
}
})
.success(function (data)
{
$scope.ToyDetails = data;
if($scope.ToyDetails.length > 0)
{
//alert($scope.ToyDetails.length);
var uniqueMonth = {},
uniqueToyName = {},
i;
for(i = 0; i < $scope.ToyDetails.length; i += 1)
{
// For Column wise Month add
uniqueMonth[$scope.ToyDetails[i].Month] = $scope.ToyDetails[i];
//For column wise Toy Name add
uniqueToyName[$scope.ToyDetails[i].ToyName] = $scope.ToyDetails[i];
}
// For Column wise Month add
for(i in uniqueMonth)
{
$scope.ColMonths.push(uniqueMonth[i]);
}
// For Column wise ToyName add
for(i in uniqueToyName)
{
$scope.ColNames.push(uniqueToyName[i]);
}
// To display the Month wise Pivot result
$scope.getMonthDetails();
// To display the Month wise Pivot result
$scope.getToyNameDetails();
}
})
.error(function ()
{
$scope.error = "An Error has occurred while loading posts!";
});
}
首先，我将绑定数据库中的所有实际数据。在这里，我们可以看到数据库中的所有数据都已显示，总共有近 43 条记录。我们将从这些实际数据中创建一个动态透视报表。
用于显示每个玩具类型下按玩具名称汇总价格的透视表结果
在此透视报表中，我将在行中显示玩具类型，在列中显示玩具名称。在我们的表单加载方法中，我们已经将所有唯一的玩具名称存储在数组中，这些数组将作为列绑定。现在在此方法中，我将添加唯一的玩具类型以显示为行。
// To Display Toy Details as Toy Name Pivot Cols
$scope.getToyNameDetails = function () {
var UniqueItemName = {}, i
for (i = 0; i < $scope.ToyDetails.length; i += 1) {
UniqueItemName[$scope.ToyDetails[i].ToyType] = $scope.ToyDetails[i];
}
for (i in UniqueItemName) {
var ItmDetails = {
ToyType: UniqueItemName[i].ToyType
};
$scope.itemType.push(ItmDetails);
}
}
在这里，我们可以看到现在我已经添加了所有唯一的ToyType图标数组，它们将被绑定到我们的 MVC 页面。
在此 HTML 表创建中，我们可以看到我首先将创建网格标题。在网格标题中，我使用data-ng-repeat="Cols in ColNames | orderBy:'ToyName':false"动态地将玩具类型和所有其他玩具名称显示为列。
HTML 部分
<tr style="height: 30px; background-color:#336699 ;
color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="20"></td>
<td width="200" align="center"><b>ToyType</b></td>
<td align="center" data-ng-repeat="Cols in ColNames |
orderBy:'ToyName':false" style="border: solid 1px #FFFFFF; ">
<table>
<tr>
<td width="80"><b>{{Cols.ToyName}}</b></td>
</tr>
</table>
</td>
<td width="60" align="center"><b>Total</b></td>
</tr>
在绑定列之后，我将把所有玩具类型绑定为行，并且对于每种类型和玩具名称，我将在每个适当的列中显示价格的摘要。
HTML 部分
<tbody data-ng-repeat="itm in itemType">
<tr>
<td width="20">{{$index+1}}</td>
<td align="left" style="border: solid 1px #659EC7; padding: 5px;">
<span style="color:#9F000F">{{itm.ToyType}}</span> </td>
<td align="center" data-ng-repeat="ColsNew in ColNames |
orderBy:'ToyName':false" align="right"
style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<table>
<tr>
<td align="right"> <span ng-bind-html="showToyItemDetails
(itm.ToyType,ColsNew.ToyName)"></span> </td>
</tr>
</table>
</td>
<td align="right"> <span ng-bind-html="showToyColumnGrandTotal
(itm.ToyType,ColsNew.ToyName)"></span> </td>
</tr>
</tbody>
AngularJS 部分
从 MVC 页面，我将调用此方法来在计算后将汇总价格绑定到每一行。
// To display Toy Details as Toy Name wise Pivot Price Sum calculate
$scope.showToyItemDetails = function (colToyType, colToyName)
{
$scope.getItemPrices = 0;
for(i = 0; i < $scope.ToyDetails.length; i++)
{
if(colToyType == $scope.ToyDetails[i].ToyType)
{
if(colToyName == $scope.ToyDetails[i].ToyName)
{
$scope.getItemPrices = parseInt($scope.getItemPrices) +
parseInt($scope.ToyDetails[i].Price);
}
}
}
if(parseInt($scope.getItemPrices) > 0)
{
return $sce.trustAsHtml("<font color='red'><b>" + $scope.getItemPrices.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</b></font>");
}
else
{
return $sce.trustAsHtml("<b>" + $scope.getItemPrices.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</b>");
}
}
列总计
要在每行末显示列总计，在此方法中，我将计算每行的结果并返回值以绑定到 MVC 页面。
// To Display Toy Details as Toy Name wise Pivot Column wise Total
$scope.showToyColumnGrandTotal = function (colToyType, colToyName) {
$scope.getColumTots = 0;
for (i = 0; i < $scope.ToyDetails.length; i++) {
if (colToyType == $scope.ToyDetails[i].ToyType) {
$scope.getColumTots = parseInt($scope.getColumTots) +
parseInt($scope.ToyDetails[i].Price);
}
}
return $sce.trustAsHtml("<font color='#203e5a'><b>" +
$scope.getColumTots.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</b></font>");
}
行总计
要在每列末显示行总计，在此方法中，我将计算每列的结果并返回值以绑定到 MVC 页面。
// To display Toy Details as Month wise Pivot Row wise Total
$scope.showToyRowTotal = function (colToyType, colToyName)
{
$scope.getrowTotals = 0;
for(i = 0; i < $scope.ToyDetails.length; i++)
{
if(colToyName == $scope.ToyDetails[i].ToyName)
{
$scope.getrowTotals = parseInt($scope.getrowTotals) +
parseInt($scope.ToyDetails[i].Price);
}
}
return $sce.trustAsHtml("<font color='#203e5a'><b>" + $scope.getrowTotals.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</b></font>");
}
行和列总计
计算行和列总计
// To Display Toy Details as Month wise Pivot Row & Column Grand Total
$scope.showToyGrandTotals = function (colToyType, colToyName)
{
$scope.getGrandTotals = 0;
if($scope.ToyDetails && $scope.ToyDetails.length)
{
for(i = 0; i < $scope.ToyDetails.length; i++)
{
$scope.getGrandTotals = parseInt($scope.getGrandTotals) +
parseInt($scope.ToyDetails[i].Price);
}
}
return $sce.trustAsHtml("<b>" + $scope.getGrandTotals.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</b>");
}
用于显示按玩具名称汇总月度价格的透视表结果
已使用与上述相同的逻辑来计算和绑定月度玩具名称汇总详情的透视报表。在这里，我们可以看到它看起来像这样：在行中，我将静态绑定玩具类型（玩具类别）、玩具名称、玩具图像，以及动态地将所有月份编号绑定到列。与上述函数类似，我将计算每月所有玩具的汇总价格，并显示在每一行中，包含行总计、列总计和总计。
搜索按钮点击
在点击搜索按钮时，我将调用SearchMethod来绑定结果。在Search方法中，我将清除所有数组值，并用新结果重新绑定所有透视表网格。
<input type="text" name="txtToyType" ng-model="ToyType" value="" />
<input type="text" name="txtToyName" ng-model="ToyName" />
<input type="submit" value="Search"
style="background-color:#336699;color:#FFFFFF" ng-click="searchToySales()" />
//Search
$scope.searchToySales = function () {
// 1) Item List Arrays.This arrays will be used to display .
$scope.itemType = [];
$scope.ColNames = [];
// 2) Item List Arrays.This arrays will be used to display .
$scope.items = [];
$scope.ColMonths = [];
selectToySalesDetails($scope.ToyType, $scope.ToyName);
}
关注点
注意：下载代码并运行所有 SQL 脚本文件。在 WebConfig 中，更改连接字符串以匹配您的 SQL Server 连接。
历史
- 2015 年 12 月 2 日：初始版本