角UI电网外部出口按钮 [英] Angular ui-grid external export buttons

问题描述

我是新的角度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 ?

感谢您，
埃内斯托

Thank you, Ernesto

推荐答案

拍摄看的 UI-grid.exporter源$ C ​​$ C （这将特别针对PDF导出，它开始于〜972行，但你可以申请它到CSV使用的情况下也一样），你想在你的HTML创建外部按钮，然后扎紧的 uiGridExporterService pdfExport（） 通过功能按钮NG-点击。每code时， pdfExport 函数有三个参数：电网，rowTypes和colTypes。为了得到网格对象，使用 $ 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电网文档。相关位：

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);
};

希望帮助！

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