Fichier html simple équivalent avec des options d'exportation comme les données

Question

J'ai créé un HTML unique - Tableau - Avec les options d'exportation, recherche, pagination en utilisant des données statiques en utilisant des DataTables.

plnkr.co/edit/n3cbx8GrGoJtOpgbxE32?p=preview 

est le même genre d'exemple ou de travail html disponible en ui-grille angulaire

Datatable ne fonctionne pas bien avec des dossiers énormes. Pourriez-vous s'il vous plaît aider avec un fichier html équivalent en utilisant la grille ui angulaire .. merci d'avance pour quoi que ce soit

Merci.

Answer 1

De ce que cela ressemble, vous pouvez exporter CSV et PDF. Je ne vois aucune preuve de l'exportation Excel fonctionnant. Je ne suis pas sûr sur la fonction d'impression, cependant, l'exportation du PDF et l'impression serait une option. Je peux regarder plus tard si c'est un briseur d'affaire.

Le code JS est assez simple. J'ai également ajouté quelques options pour la configuration PDF.

Le code de la fonction d'exportation provient textuellement de UI-Grid.info: 312 Exporting Data With Custom UI. Il pourrait être converti en boutons si vous le vouliez, mais cela fournit la fonctionnalité d'exportation externe. Le petit menu dans le coin supérieur droit a également ces options d'exportation, donc je l'ai laissé pour votre expérimentation. Paramètre $ scope.gridOptions.enableGridMenu à false l'éteint.

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