如何导出 angularjs UI Grid CSV 文件或 PDF 文件中的所有数据
Posted
技术标签:
【中文标题】如何导出 angularjs UI Grid CSV 文件或 PDF 文件中的所有数据【英文标题】：how to export angularjs UI Grid All data in CSV file or in PDF file 【发布时间】：2020-10-04 17:21:50 【问题描述】：我是 AngularJS ui-grid 的新手，也是导出器功能的第一次用户。我需要导出 ui-grid 表，但是我可以导出可见日期而不会出错，但是当我尝试导出所有日期时，它只带有可见日期。我该如何解决这个问题？
app.service('CRUDService', function ($http)
//**********----Get Record----***************
this.getProducts = function (apiRoute)
debugger
console.log(apiRoute);
return $http.get(apiRoute);
);var app;
(function ()
'use strict';
app = angular.module('UIGrid_App',
[
'ngAnimate', // support for CSS-based animations
'ngTouch', //for touch-enabled devices
'ui.grid', //data grid for AngularJS
'ui.grid.pagination', //data grid Pagination
'ui.grid.resizeColumns', //data grid Resize column
'ui.grid.moveColumns', //data grid Move column
'ui.grid.pinning', //data grid Pin column Left/Right
'ui.grid.selection', //data grid Select Rows
'ui.grid.autoResize', //data grid Enabled auto column Size
'ui.grid.exporter' //data grid Export Data
]);
)();app.controller('ProductsCtrl', ['$scope', 'CRUDService', 'uiGridConstants',
function ($scope, CRUDService, uiGridConstants)
$scope.gridOptions = [];
//Pagination
$scope.pagination =
paginationPageSizes: [15, 25, 50, 75, 100, "All"],
ddlpageSize: 15,
pageNumber: 1,
pageSize: 15,
totalItems: 0,
getTotalPages: function ()
return Math.ceil(this.totalItems / this.pageSize);
,
pageSizeChange: function ()
if (this.ddlpageSize == "All")
this.pageSize = $scope.pagination.totalItems;
else
this.pageSize = this.ddlpageSize
this.pageNumber = 1
$scope.GetProducts();
,
firstPage: function ()
if (this.pageNumber > 1)
this.pageNumber = 1
$scope.GetProducts();
,
nextPage: function ()
if (this.pageNumber < this.getTotalPages())
this.pageNumber++;
$scope.GetProducts();
,
previousPage: function ()
if (this.pageNumber > 1)
this.pageNumber--;
$scope.GetProducts();
,
lastPage: function ()
if (this.pageNumber >= 1)
this.pageNumber = this.getTotalPages();
$scope.GetProducts();
;
//ui-Grid Call
$scope.GetProducts = function ()
$scope.loaderMore = true;
$scope.lblMessage = 'loading please wait....!';
$scope.result = "color-green";
$scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex)
if (col.filters[0].term)
return 'header-filtered';
else
return '';
;
$scope.gridOptions =
useExternalPagination: true,
useExternalSorting: true,
enableFiltering: true,
enableSorting: true,
enableRowSelection: true,
enableSelectAll: true,
enableGridMenu: true,
columnDefs: [
name: "ProductID", displayName: "Product ID", width: '10%', headerCellClass: $scope.highlightFilteredHeader ,
name: "ProductTitle", title: "Product Title", width: '40%', headerCellClass: $scope.highlightFilteredHeader ,
name: "Type", title: "Type", headerCellClass: $scope.highlightFilteredHeader ,
name: "Price", title: "Price", cellFilter: 'number',
filters: [ condition: uiGridConstants.filter.GREATER_THAN, placeholder: 'Minimum' , condition: uiGridConstants.filter.LESS_THAN, placeholder: 'Maximum' ],
headerCellClass: $scope.highlightFilteredHeader
,
name: "CreatedOn", displayName: "Created On", cellFilter: 'date:"short"', headerCellClass: $scope.highlightFilteredHeader ,
name: 'Edit',
enableFiltering: false,
enableSorting: false,
width: '5%',
enableColumnResizing: false,
cellTemplate: '<span class="label label-warning label-mini">' +
'<a href="" style="color:white" title="Select" ng-click="grid.appScope.GetByID(row.entity)">' +
'<i class="fa fa-check-square" aria-hidden="true"></i>' +
'</a>' +
'</span>'
],
exporterAllDataFn: function ()
return getPage(1, $scope.gridOptions.totalItems, paginationOptions.sort)
.then(function ()
$scope.gridOptions.useExternalPagination = false;
$scope.gridOptions.useExternalSorting = false;
getPage = null;
);
,
;
var NextPage = (($scope.pagination.pageNumber - 1) * $scope.pagination.pageSize);
var NextPageSize = $scope.pagination.pageSize;
var apiRoute = 'api/Product/GetProducts/' + NextPage + '/' + NextPageSize;
var result = CRUDService.getProducts(apiRoute);
result.then(
function (response)
$scope.pagination.totalItems = response.data.recordsTotal;
$scope.gridOptions.data = response.data.productList;
$scope.loaderMore = false;
,
function (error)
console.log("Error: " + error);
);
//Default Load
$scope.GetProducts();
//Selected Call
$scope.GetByID = function (model)
$scope.SelectedRow = model;
;
]);@
ViewBag.Title = "Products";
<h3>Products with UI Grid</h3>
<div class="row">
<div class="col-md-12" ng-controller="ProductsCtrl">
<div ui-grid="gridOptions"
ui-grid-resize-columns
ui-grid-move-columns
ui-grid-exporter
ui-grid-selection
ui-grid-pinning class="grid"></div>
<div class="loadmore">
<div ng-show="loaderMore" ng-class="result">
<img src="~/Content/ng-loader.gif" />
lblMessage
</div>
</div>
<div role="contentinfo" class="ui-grid-pager-panel ng-scope">
<div role="navigation" class="ui-grid-pager-container">
<div role="menubar" class="ui-grid-pager-control">
<!-- Start Page -->
<button type="button" role="menuitem" class="ui-grid-pager-first" ui-grid-one-bind-title="aria.pageToFirst"
ui-grid-one-bind-aria-label="aria.pageToFirst"
ng-click="pagination.firstPage()"
ng-disabled="cantPageBackward()" title="Page to first" aria-label="Page to first"
disabled="disabled">
<div class="first-triangle">
<div class="first-bar"></div>
</div>
</button>
<!-- Prev Page -->
<button type="button" role="menuitem" class="ui-grid-pager-previous"
ui-grid-one-bind-title="aria.pageBack" ui-grid-one-bind-aria-label="aria.pageBack"
ng-click="pagination.previousPage()"
ng-disabled="cantPageBackward()" title="Page back" aria-label="Page back" disabled="disabled">
<div class="first-triangle prev-triangle"></div>
</button>
<input type="number" ui-grid-one-bind-title="aria.pageSelected" ui-grid-one-bind-aria-label="aria.pageSelected"
class="ui-grid-pager-control-input ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-min ng-valid-max ng-valid-required"
ng-model="pagination.pageNumber"
min="1" max="pagination.getTotalPages()" required="" title="Selected page"
aria-label="Selected page" disabled>
<span class="ui-grid-pager-max-pages-number ng-binding"
ng-show="pagination.getTotalPages() > 0">
<abbr ui-grid-one-bind-title="paginationOf" title="of"> /</abbr>pagination.getTotalPages()
</span>
<!-- Next Page -->
<button type="button" role="menuitem" class="ui-grid-pager-next" ui-grid-one-bind-title="aria.pageForward"
ui-grid-one-bind-aria-label="aria.pageForward"
ng-click="pagination.nextPage()"
ng-disabled="cantPageForward()"
title="Page forward" aria-label="Page forward">
<div class="last-triangle next-triangle"></div>
</button>
<!-- Last Page -->
<button type="button" role="menuitem" class="ui-grid-pager-last"
ui-grid-one-bind-title="aria.pageToLast" ui-grid-one-bind-aria-label="aria.pageToLast"
ng-click="pagination.lastPage()" ng-disabled="cantPageToLast()" title="Page to last" aria-label="Page to last">
<div class="last-triangle"><div class="last-bar"></div></div>
</button>
</div><!-- ngIf: grid.options.paginationPageSizes.length > 1 -->
<div class="ui-grid-pager-row-count-picker ng-scope" @*ng-if="pagination.ddlpageSize.length > 1"*@>
<select ng-model="pagination.ddlpageSize"
ng-options="o as o for o in pagination.paginationPageSizes" ng-change="pagination.pageSizeChange()"
class="ng-pristine ng-untouched ng-valid ng-not-empty"></select>
<span class="ui-grid-pager-row-count-label ng-binding"> items per page</span>
</div>
<!-- end ngIf: grid.options.paginationPageSizes.length > 1 -->
<!-- ngIf: grid.options.paginationPageSizes.length <= 1 -->
</div>
<div class="ui-grid-pager-count-container">
<div class="ui-grid-pager-count">
<span ng-show="pagination.totalItems > 0" class="ng-binding" style="">
pagination.pageNumber<abbr ui-grid-one-bind-title="paginationThrough" title="through"> - </abbr>pagination.ddlpageSize of pagination.totalItems items
</span>
</div>
</div>
</div>
<p>SelectedRow</p>
</div>
</div>
@section AngularScript
<script src="~/ScriptsNg/Controllers/ProductsCtrl.js"></script>
<script src="~/ScriptsNg/Service/CRUDService.js"></script>
【问题讨论】：
有人知道吗？ 【参考方案1】：我正在寻找不同的东西，我偶然发现了你的问题。我不知道你是否已经解决了，但这是我的贡献。
根据您的代码，您正在使用外部分页，因此仅将给定NextPage 和NextPageSize 的必要行提供给您的ui-grid；这样，您的网格显示并且只知道您的 CRUDService.getProducts(apiRoute) 提供给它的行，要获得所有数据导出，您需要以不同的方式做事：ui-grid 教程区域中有一个示例代码，标题为 @987654321 @。
看一下js部分，尤其是以下部分：
exporterAllDataFn: function()
return getPage(1, $scope.gridOptions.totalItems, paginationOptions.sort)
.then(function(allData)
$scope.gridOptions.useExternalPagination = false;
$scope.gridOptions.useExternalSorting = false;
getPage = null;
return allData;
);
,简而言之，您需要将选项 exporterAllDataFn 选项添加到您的网格并使用您的 CRUDService.getProducts 承诺返回所有数据；请记住这样做可能会导致的失败。
【讨论】：
以上是关于如何导出 angularjs UI Grid CSV 文件或 PDF 文件中的所有数据的主要内容，如果未能解决你的问题，请参考以下文章
如何在AngularJS ui-grid中对分组行进行排序？
AngularJS +Kendo UI Grid template
angularJS中的ui-router和ng-grid模块