Angular ui-grid 外部导出按钮 [英] Angular ui-grid external export buttons

问题描述

我是 Angular UI-GRID 的新手，我需要为导出功能创建外部按钮，例如 PDF 导出 和 CSV 导出 类似的到这张图片.你知道我该怎么做吗?

I am new working with the Angular UI-GRID and I need to create external buttons for the exporting features like PDF export and CSV Export similar to this image. Do you have any idea how can I do it ?

我还需要一个打印按钮，但我没有在文档中看到它.这个网格有打印行为吗?

Also I need a Print button but I don't see it in the documentation. Is there a Print behavior for this grid ?

谢谢，埃内斯托

推荐答案

查看 ui-grid.exporter 源代码(这将专门解决从 ~line 972 开始的 pdf 导出，但您可以将其应用于csv 用例)，您可能希望在 html 中创建一个外部按钮，然后通过 将 uiGridExporterService 的 pdfExport() 函数绑定到按钮ng-点击.根据代码，pdfExport 函数采用三个参数:grid、rowTypes 和 colTypes.获取grid对象，使用$scope.gridApi.grid，后两者需要设置为常量——uiGridExporterConstants.ALL, uiGridExporterConstants.SELECTED 或 uiGridExporterConstants.VISIBLE -- 取决于您要导出的内容.确保在模块中注入 uiGridExporterService 和 uiGridExporterConstants.

Taking a look at the ui-grid.exporter source code (this will specifically address pdf export, which starts at ~line 972, but you can apply it to the csv use case as well), you would want to create an external button in your html, then tie the uiGridExporterService's pdfExport() function to the button via ng-click. Per the code, the pdfExport function takes three parameters: grid, rowTypes, and colTypes. To get the grid object, use $scope.gridApi.grid, and the latter two you need to set to constants -- uiGridExporterConstants.ALL, uiGridExporterConstants.SELECTED, or uiGridExporterConstants.VISIBLE -- depending on what you want to export. Make sure you inject uiGridExporterService and uiGridExporterConstants in your module.

查看 这个 plunker 我改编自 ui-grid 文档.相关位:

Check out this plunker I adapted from the ui-grid docs. The relevant bits:

<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
<button ng-click="exportPdf()">PDF</button>

$scope.exportPdf = function() {
  var grid = $scope.gridApi.grid;
  var rowTypes = uiGridExporterConstants.ALL;
  var colTypes = uiGridExporterConstants.ALL;
  uiGridExporterService.pdfExport(grid, rowTypes, colTypes);
};

希望有帮助！

这篇关于Angular ui-grid 外部导出按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！