时间戳

首页 > 解决方案 > 如何导出 angularjs UI Grid CSV 文件或 PDF 文件中的所有数据

javascript - 如何导出 angularjs UI Grid CSV 文件或 PDF 文件中的所有数据

问题描述

我是 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
        ]);
})();
我添加了必要的 javascript 实用程序文件 csv.js、pdfMake.js、vfs_fonts.js。我还添加了 gridOptions 控制器 
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">&nbsp;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>
}

标签： javascriptjqueryangularjsangular-ui-gridui-grid

解决方案

我正在寻找不同的东西，我碰巧偶然发现了你的问题。我不知道你是否已经解决了，但这是我的贡献。

根据您的代码，您正在使用外部分页，因此只为给定的NextPage和NextPageSize您的ui-grid;提供必要的行。这样，您的网格显示并且只知道您CRUDService.getProducts(apiRoute)提供给它的行，要获得所有数据导出，您需要做不同的事情：ui-grid教程区域中有一个示例代码，标题为教程：405 使用外部导出所有数据分页。

看一下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承诺返回所有数据；请记住这样做可能会导致的失败。

推荐阅读