具有数据表等导出选项的等效单个 Html 文件

Question

我创建了一个 HTML - Table - 带有导出选项、搜索、使用数据 Table 的静态数据分页。

plnkr.co/edit/n3cbx8GrGoJtOpgbxE32?p=preview

是 angular-ui-grid

中可用的类似示例或工作 html

数据表不适用于大量记录。能否请您使用 angular ui 网格帮助处理 equivalent html 文件..提前感谢任何事情

谢谢。

Answer 1

从外观上看，您可以导出 CSV 和 PDF。我没有看到 Excel 导出工作的任何证据。我不确定打印功能，但是，导出 PDF 和打印将是一个选项。如果它是一个交易破坏者，我可以稍后查看。

JS 代码非常简单。我也为 PDF 配置添加了一些选项。

导出函数的代码逐字来自UI-Grid.info: 312 Exporting Data With Custom UI。如果需要，它可以转换为按钮，但这提供了外部导出功能。右上角的小菜单也有这些导出选项，所以我把它留给你试验。将 $scope.gridOptions.enableGridMenu 设置为 false 将关闭它。

JS

$scope.gridOptions = {
    enableGridMenu: true,
    data: 'data',
    paginationPageSizes: [10],
    paginationPageSize: 10,

    exporterLinkLabel: 'get your csv here',
    exporterPdfDefaultStyle: {fontSize: 9},
    exporterPdfTableStyle: {margin: [10, 10, 10, 10]},
    exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
    exporterPdfOrientation: 'portrait',
    exporterPdfPageSize: 'LETTER',
    exporterPdfMaxGridWidth: 500,

    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    },

  };

  // Verbatim: http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex
  $scope.export = function(){
    if ($scope.export_format == 'csv') {
      var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
      $scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement );
    } else if ($scope.export_format == 'pdf') {
      $scope.gridApi.exporter.pdfExport( $scope.export_row_type, $scope.export_column_type );
    }
  };

HTML

<!-- Verbatim: http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex -->
<label>Which columns should we export?</label>
  <select ng-model="export_column_type"</select>
    <option value='all'>All</option>
    <option value='visible'>Visible</option>
  </select>
  <label>Which rows should we export?</label>
  <select ng-model="export_row_type"</select>
    <option value='all'>All</option>
    <option value='visible'>Visible</option>
    <option value='selected'>Selected</option>
  </select>
  <label>What format would you like?</label>
  <select ng-model="export_format"</select>
    <option value='csv'>CSV</option>
    <option value='pdf'>PDF</option>
  </select>
  <button ng-click="export()">Export</button>
  <div class="custom-csv-link-location">
    <label>Your CSV will show below:</label>
    <span class="ui-grid-exporter-csv-link">&nbsp</span>
  </div>

  <div ui-grid="gridOptions" class="grid" style="width:100%"
       ui-grid-selection ui-grid-exporter ui-grid-pagination></div>
  </div>

Example Plunk

具有数据表等导出选项的等效单个 Html 文件

Equivalent Single Html file with export options like Datatables

angularjs

angular-ui-grid