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

问题描述

我创建了一个单一的 HTML - 表格 - 使用 DataTables 使用静态数据导出选项、搜索、分页.

plnkr.co/edit/n3cbx8GrGoJtOpgbxE32?p=preview

angular-ui-grid 中提供了类似的示例或工作 html

Datatable 不适用于大量记录.能否请您帮助使用 angular ui grid 的等效 html 文件..提前感谢任何事情

谢谢.

解决方案

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

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

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

JS

$scope.gridOptions = {启用GridMenu:真，数据:'数据'，paginationPageSizes: [10],分页页面大小:10，exporterLinkLabel: '在此处获取您的 csv',exporterPdfDefaultStyle: {fontSize: 9},exporterPdfTableStyle: {margin: [10, 10, 10, 10]},exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},exporterPdfOrientation: '肖像',exporterPdfPageSize: 'LETTER',exporterPdfMaxGridWidth: 500,onRegisterApi:函数(gridApi){$scope.gridApi = gridApi;},};//逐字:http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex$scope.export = function(){如果($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

<!-- 逐字逐字:http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex --><label>我们应该导出哪些列?</label><select ng-model="export_column_type"</select><option value='all'>All</option><option value='visible'>Visible</option></选择><label>我们应该导出哪些行?</label><select ng-model="export_row_type"</select><option value='all'>All</option><option value='visible'>Visible</option><option value='selected'>Selected</option></选择><label>你想要什么格式?</label><select ng-model="export_format"</select><option value='csv'>CSV</option><option value='pdf'>PDF</option></选择><button ng-click="export()">导出</button><div class="custom-csv-link-location"><label>您的 CSV 将显示在下面:</label><span class="ui-grid-exporter-csv-link">&nbsp</span>

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

示例 Plunk

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

plnkr.co/edit/n3cbx8GrGoJtOpgbxE32?p=preview

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

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

Thanks.

解决方案

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.

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

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>

Example Plunk

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