动态枢轴网格使用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过程。在存储过程中，如果搜索参数为空，我使用“%”来返回所有记录。 隐藏,复制Code

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控制器 首先，在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

// <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']);
})();  

控制器:在AngularJS控制器中，我已经完成了所有的业务逻辑并将数据从Web API返回到我们的MVC HTML页面。 1. 变量声明 首先，我声明了所有需要使用的局部变量。 隐藏,复制Code

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方法中，我使用了$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 < $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 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

<trstyle="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
    <tdwidth="20"></td>
    <tdwidth="200"align="center"><b>ToyType</b></td>
    <tdalign="center"data-ng-repeat="Cols in ColNames | orderBy:'ToyName':false"style="border: solid 1px #FFFFFF; ">
        <table>
            <tr>
                <tdwidth="80"><b>{{Cols.ToyName}}</b></td>
            </tr>
        </table>
    </td>
    <tdwidth="60"align="center"><b>Total</b></td>
</tr>  

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

<tbodydata-ng-repeat="itm in itemType">
    <tr>
        <tdwidth="20">{{$index+1}}</td>
        <tdalign="left"style="border: solid 1px #659EC7; padding: 5px;"> <spanstyle="color:#9F000F">{{itm.ToyType}}</span> </td>
        <tdalign="center"data-ng-repeat="ColsNew in ColNames | orderBy:'ToyName':false"align="right"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
            <table>
                <tr>
                    <tdalign="right"> <spanng-bind-html="showToyItemDetails(itm.ToyType,ColsNew.ToyName)"></span> </td>
                </tr>
            </table>
        </td>
        <tdalign="right"> <spanng-bind-html="showToyColumnGrandTotal(itm.ToyType,ColsNew.ToyName)"></span> </td>
    </tr>
</tbody>  

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($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 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("<font color='#203e5a'><b>" + $scope.getrowTotals.toString()
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</b></font>");
}  

行和列合计:计算行和列合计 隐藏,复制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("<b>" + $scope.getGrandTotals.toString()
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</b>");
}  

Pivot结果显示每个玩具名称按月的价格总和 与上面相同的逻辑用于计算和绑定每月玩具名称汇总细节的Pivot报告。在这里，我们可以看到它看起来是这样的，在行中，我将绑定玩具类型(玩具类别)玩具名称，玩具图像为静态，并在列中动态地绑定所有月份的数字。和上面的功能一样，我将计算所有的玩具汇总价格每月和显示在每一行与行合计，列合计和总计。 点击搜索按钮 在搜索按钮单击，我将调用SearchMethod来绑定结果。在搜索方法中，我将清除所有的数组值，并重新绑定所有的主元网格和新的结果。 隐藏,复制Code

<inputtype="text"name="txtToyType"ng-model="ToyType"value=""/>
<inputtype="text"name="txtToyName"ng-model="ToyName"/>
<inputtype="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服务器连接更改连接字符串。 历史 shanuAngularMVCPivotGridS.zip - 2015-12-02 本文转载于：http://www.diyabc.com/frontweb/news19110.html