具有导出选项(如数据表)的等效单个HTML文件 [英] Equivalent Single Html file with export options like Datatables

问题描述

我创建了一个HTML表-具有导出选项，使用数据表使用静态数据进行搜索，分页.

I created a Single HTML - Table - With Export Options, Search, Pagination using Static Data using DataTables.

plnkr.co/edit/n3cbx8GrGoJtOpgbxE32?p=preview

是angular-ui-grid中可用的类似示例或工作html

is similar kind of example or working html available in angular-ui-grid

数据表不适用于大量记录.能否请您使用angular ui网格提供等效的html文件，谢谢?

Datatable doesn't works well with huge records. Could you please kindly help with an equivalent html file using angular ui grid..thanks in advance for anything

谢谢.

推荐答案

从外观上，您可以导出CSV和PDF.我没有看到任何有关Excel导出工作的证据.我不确定打印功能是否有用，但是可以选择导出PDF并进行打印.我稍后再看，如果这是一个破坏交易的事情.

From what it looks like, you are able to export CSV and PDF. I don't see any evidence of the Excel export working. I am not sure offhand on the print function, however, exporting the PDF and printing would be an option. I can look later if it's a deal breaker.

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

The JS code is pretty straight forward. I've added some options for the PDF configuration as well.

用于导出功能的代码完全来自 UI-Grid.info:312导出具有自定义用户界面的数据.如果需要，可以将其转换为按钮，但这提供了外部导出功能.右上角的小菜单也具有这些导出选项，因此我将其留给您进行实验.将 $ scope.gridOptions.enableGridMenu 设置为 false 可以将其关闭.

The code for the exporting function comes verbatim from UI-Grid.info: 312 Exporting Data With Custom UI. It could be converted to buttons if you wanted, but this provides the external export functionality. The little menu in the upper right corner also has these export options, so I've left it for your experimentation. Setting $scope.gridOptions.enableGridMenu to false will turn that off.

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>

示例朋克

这篇关于具有导出选项(如数据表)的等效单个HTML文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！