动态枢轴网格使用MVC, AngularJS和WEB API 2

下载shanuAngularMVCPivotGridS.zip - 2.7 MB

介绍

在本文中，我们将详细介绍如何使用AngularJS创建一个简单的MVC Pivot HTML网格。在我之前的文章中，我已经解释了如何创建一个动态的项目计划。在那篇文章中，我使用存储过程来显示来自SQL查询的枢轴结果。

在实时项目中，我们需要生成多种类型的报告，并且需要按行显示要按列显示的数据。在这篇文章中，我将解释如何使用AngularJS创建一个透视网格来显示前端的实际数据。

例如，让我们考虑下面的例子。我有玩具类型(类别)和玩具名称与销售价格每天。

在我们的数据库中，我们插入带有价格详细信息的玩具详细信息的每条记录。插入数据库的原始数据是这样的。

玩具销售明细表

这里我们可以看到总共有11条记录。每个约会都有重复的玩具名称和玩具类型。现在，如果我想查看玩具类型的每个玩具名称的总销售额，那么我需要创建一个pivot结果来显示每个玩具类型的每个玩具名称的总和的记录。所需的输出如下所示，

以玩具名称与价格总和为轴心

在这里，我们可以看到查看每个玩具名称的总销售额要容易得多。在主元中，我们还可以添加列和行总和。把总数加起来，就可以很容易地发现哪一件商品的销售额最高。

统计结果有很多种，我们每年每月可以看到一个玩具销售的统计报告。我们在此显示由七月七日至十一月十一日每月的数据透视结果。

按月计算价格

在本文中，我们将看到两种类型的轴心报告。

Pivot结果显示按玩具名称为每种玩具类型的价格总和。Pivot结果显示每个玩具名称按月的价格总和。
先决条件

Visual Studio 2015 -你可以从这里下载。

您还可以查看我以前的文章，这些文章是关于使用MVC和WCF Rest服务的AngularJS。

MVC AngularJs剩下WCF服务读者测验MVC, AngularJs剩下WCF服务明细网格AngularJs过滤、排序和动画使用MVC和WCF Rest AngularJs购物车使用MVC和WCF Rest服务AngularJs动态菜单创建使用MVC和WCF休息以前文章相关角JS, MVC和WEB API:
图像预览使用MVC, AngularJs和Web API 2 MVC，使用WEB API与存储过程2角JS CRUD http://www.codeproject.com/articles/1015183/dynamic-project-scheduling-using-mvc-and-angularjs http://www.codeproject.com/articles/1019587/mvc-web-api-and-angularjs-for-image-puzzle-game http://www.codeproject.com/articles/1030954/mvc-web-api-and-angularjs-for-are-you-genius-game http://www.codeproject.com/articles/1046214/mvc-angularjs-master-detail-crud-filter-and-sortin?msg=5168459 # xx5168459xx

使用的代码

创建数据库和表

在第一步中，我们将创建一个示例数据库和表，用于我们的项目，下面是创建数据库、表和示例插入查询的脚本。

在SQL服务器中运行以下脚本。我用过SQL Server 2014.

隐藏,收缩,复制Code-- 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应用程序中创建Pivot网格。

1. 创建存储过程的脚本

隐藏,收缩,复制Code-- 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，然后单击New, Project，选择Web，然后单击ASP。净的Web应用程序。选择项目位置并输入web应用程序名称。

选择MVC，并在Add Folders和Core reference中选择Web API，然后单击OK。

使用ADO添加数据库。NET实体数据模型

右键单击我们的项目，然后单击Add，然后单击New Item。

Select 数据,then , ADO。NET实体数据模型，并为我们的EF和click Add命名。

从数据库中选择EF Designer并单击Next。

在这里单击新建连接并提供您的SQL Server - Server名称并连接到您的数据库。

在这里我们可以看到，我已经给出了我的SQL服务器名称、Id和PWD，在它连接上之后，我选择了ToysDB作为数据库，因为我们已经使用SQL脚本创建了数据库。

单击next并选择需要使用的表和所有存储过程，然后单击finish。

现在我们可以看到，我们已经创建了我们的玩具销售模型。

实体创建完成后，下一步是向控制器添加Web API，并编写用于选择/插入/更新和删除的函数。

添加Web API控制器的过程

右键单击Controllers文件夹，单击Add，然后单击Controller。

选择Controller并添加一个空的Web API 2控制器。向Web API控制器提供您的名称并单击OK。在这里我给我的Web API控制器命名为“ToyController”。在这个演示项目中，我已经为订单主和订单细节创建了2个不同的控制器。

当我们创建了Web API控制器时，我们可以看到我们的控制器被ApiController继承了。

我们都知道，Web API是为浏览器和移动设备构建HTTP服务的一种简单而容易的方法。

Web API有以下四种方法:Get/Post/Put和delete&put:

是请求数据。(选择)post 是创建一个数据。(插入)put 是更新数据。删除就是删除数据。

Get方法

在我们的示例中，我只使用了一个Get方法，因为我只使用一个存储过程来获取数据并使用AngularJS绑定到我们的MVC页面。

选择操作

我们使用一个get方法来使用一个实体对象来获得ToysSalesDetails 表的所有细节，并将结果返回为IEnumerable。我们在AngularJS中使用这个方法，并将结果显示在来自AngularJS控制器的MVC页面中。使用Ng-Repeat，我们可以绑定细节。

这里我们可以看到，在get方法中，我已经将搜索参数传递给了USP_ToySales_SelectStored过程。在存储过程中，如果搜索参数为空，我使用“%”来返回所有记录。

隐藏,复制Codepublic 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控制器

首先，在script文件夹中创建一个文件夹，我将这个文件夹命名为“MyAngular”。

现在将你的Angular控制器添加到这个文件夹中。

右键单击MyAngular文件夹，然后单击Add和New Item。选择Web，然后选择AngularJS控制器，并为控制器提供一个名称。我把我的AngularJS控制器命名为“Controller.js”。

一旦创建了AngularJS控制器，我们可以看到在默认情况下，控制器将拥有带有默认模块定义的代码和所有。

我已经更改了前面的代码，如添加模块和控制器，如下所示。

如果缺少AngularJS包，则将该包添加到您的项目中。

右键单击您的MVC项目并单击管理NuGet包。搜索AngularJS并点击安装。

现在我们可以看到所有AngularJs包都已经安装好了，我们可以看到Script文件夹中的所有文件。

创建AngularJs脚本文件的程序

js:在这里，我们将添加到AngularJS JavaScript的引用，并创建一个名为“OrderModule”的Angular模块。

隐藏,复制Code//
///
///
///
var app;

(function () {
app = angular.module(“OrderModule”, [‘ngAnimate’]);
})();

控制器:在AngularJS控制器中，我已经完成了所有的业务逻辑并将数据从Web API返回到我们的MVC HTML页面。

1. 变量声明

首先，我声明了所有需要使用的局部变量。

隐藏,复制Codeapp.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方法中，我使用了$http.get 来从Web API获取详细信息。在get方法中，我将提供API控制器名称和方法来获取细节。这里我们可以看到我已经传递了搜索参数OrderNO和TableID使用:

隐藏,复制Code{ params: { ToyType: ToyType, ToyName: ToyName }

该函数将在每次加载页面时调用。在页面加载期间，我将获得所有的细节，并创建我们的Pivot结果首先，我将在数组中存储每个唯一的玩具名称，以显示Pivot报告按玩具名称作为列和月号，在数组中显示的Pivot报告按月总和。

在存储了玩具名称和月份的唯一值之后，我将调用$scope.getMonthDetails();scope.getToyNameDetails美元();生成Pivot报告并绑定结果。

隐藏,收缩,复制Code// 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 < KaTeX parse error: Expected '}', got 'EOF' at end of input: … uniqueMonth[scope.ToyDetails[i].Month] = $scope.ToyDetails[i];//ForcolumnwiseToyNameadduniqueToyName[$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 disply the Month wise Pivot result
$scope.getMonthDetails();
// To disply the Month wise Pivot result
$scope.getToyNameDetails();
}
})
.error(function ()
{
$scope.error = “An Error has occured while loading posts!”;
});
}

首先，我将绑定来自数据库的所有实际数据。在这里我们可以看到所有的数据从数据库已经显示了总计近43条记录。我们将根据这些实际数据创建一个动态Pivot报告。

Pivot结果显示按玩具名称为每种玩具类型的价格总和

在这个透视报告中，我将以行显示玩具类型，以列显示玩具名称。在我们的表单加载方法中，我们已经将所有唯一的玩具名称存储在数组中，它将被绑定为列。现在，在这个方法中，我将添加唯一的玩具类型，并显示为行。

隐藏,复制Code// 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 Cols Cols在ColNames | orderBy:‘ToyName’:false"将玩具类型和所有其他玩具名称显示为列。

HTML部分:,

隐藏,复制Code

ToyType

{{Cols.ToyName}}

Total

在绑定列之后，我将把所有的玩具类型绑定为行，对于每个类型类型和玩具名称，我将显示价格的摘要每一个适当的列。

HTML的一部分

隐藏,复制Code

{{$index+1}}
{{itm.ToyType}}

AngularJS部分

在MVC页面中，我将调用这个方法在计算。 之后将结果汇总价格绑定到每一行中。

隐藏,复制Code// 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(KaTeX parse error: Expected 'EOF', got '}' at position 43: … }̲ } …scope.getItemPrices) > 0)
{
return $sce.trustAsHtml("" + $scope.getItemPrices.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, “,”) + “”);
}
else
{
return $sce.trustAsHtml("" + $scope.getItemPrices.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, “,”) + “”);
}
}

列总

在每一行末尾显示列总数。在这个方法中，我将计算每一行结果，并返回值绑定到MVC page.

隐藏,复制Code// 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页。

隐藏,复制Code// 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("" + $scope.getrowTotals.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, “,”) + “”);
}

行和列合计:计算行和列合计

隐藏,复制Code// 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("" + $scope.getGrandTotals.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, “,”) + “”);
}

Pivot结果显示每个玩具名称按月的价格总和

与上面相同的逻辑用于计算和绑定每月玩具名称汇总细节的Pivot报告。在这里，我们可以看到它看起来是这样的，在行中，我将绑定玩具类型(玩具类别)玩具名称，玩具图像为静态，并在列中动态地绑定所有月份的数字。和上面的功能一样，我将计算所有的玩具汇总价格每月和显示在每一行与行合计，列合计和总计。

点击搜索按钮

在搜索按钮单击，我将调用SearchMethod来绑定结果。在搜索方法中，我将清除所有的数组值，并重新绑定所有的主元网格和新的结果。

隐藏,复制Code


//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服务器连接更改连接字符串。

历史

shanuAngularMVCPivotGridS.zip - 2015-12-02

本文转载于：http://www.diyabc.com/frontweb/news19110.html