动态枢轴网格使用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

posted @ 2020-08-14 01:03 DiyAbc-Eleven 阅读(120) 评论(0) 收藏举报

刷新页面返回顶部

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

公告