2016-01-06 9 views
7

मैं कोणीय यूआई-ग्रिड के साथ काम कर नया हूँ और मैं की तरह पीडीएफ निर्यात और सीएसवी निर्यात समान to this image निर्यात सुविधाओं के लिए बाहरी बटन बनाने की जरूरत है। क्या आपको कोई विचार है कि मैं इसे कैसे कर सकता हूं?कोणीय ui ग्रिड बाहरी निर्यात बटन

मुझे भी एक प्रिंट बटन चाहिए लेकिन मुझे इसे दस्तावेज़ में नहीं दिख रहा है। क्या इस ग्रिड के लिए कोई प्रिंट व्यवहार है?

धन्यवाद, अर्नेस्टो

उत्तर

5

ui-grid.exporter source code पर एक नज़र ले रहा है (यह विशेष रूप से संबोधित करेंगे पीडीएफ निर्यात, जिस पर ~ लाइन 972 से शुरू होता है, लेकिन आप के रूप में अच्छी सीएसवी उपयोग के मामले में इसे लागू कर सकते हैं), तो आप में एक बाहरी बटन बनाने के लिए चाहते हो जाएगा अपने एचटीएमएल, फिर ng-click के माध्यम से बटन पर uiGridExporterService के pdfExport() फ़ंक्शन को टाई करें। कोड के अनुसार, pdfExport फ़ंक्शन तीन पैरामीटर लेता है: ग्रिड, पंक्ति प्रकार, और कोलिप्स। ग्रिड ऑब्जेक्ट प्राप्त करने के लिए, $scope.gridApi.grid का उपयोग करें, और बाद वाले दो को आप स्थिरांक पर सेट करने की आवश्यकता है - uiGridExporterConstants.ALL, uiGridExporterConstants.SELECTED, या uiGridExporterConstants.VISIBLE - जो आप निर्यात करना चाहते हैं उसके आधार पर। सुनिश्चित करें कि आप अपने मॉड्यूल में uiGridExporterService और uiGridExporterConstants इंजेक्ट करें।

this plunker देखें IU-grid दस्तावेज़ों से अनुकूलित किया गया। प्रासंगिक बिट्स:

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

आशा है कि मदद करता है!

+1

बढ़िया काम कर रहा है! धन्यवाद दोस्तों – ermamud

-1
  1. यह खंड 206 प्रलेखन साहब का डेटा निर्यात करने पर है, बटन निर्यात सही शीर्ष कोने पर है, बेशक आप बटन को अनुकूलित कर सकते हैं। लेकिन आपका मुख्य प्रश्न इसके बारे में नहीं है।
  2. जहां तक ​​मुझे पता है कि यह अभी तक यूई-ग्रिड सुविधा में नहीं जोड़ा गया है, लेकिन यदि आप गोताखोरी चाहते हैं तो यह संभव है, और यदि आप पीडीएफ या सीएसवी में कनवर्ट करते हैं तो वहां प्रिंट बटन है (दाएं शीर्ष)। यदि आप वास्तव में इसे अपने पृष्ठ this पर चाहते हैं तो आपकी मदद कर सकता है।
0

सुनिश्चित करें कि आप सक्षम GridMenu को गलत पर सेट करें।

और GridOptions अंदर कुछ इस तरह करते हैं:

'exporterCsvFilename' : 'clarification-status.csv', 
      exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")), 
      onRegisterApi: function(gridApi){ 
       vm.gridApi = gridApi; 

      }, 

और उसके बाद आप इस तरह निर्यात csv या exportpdf कार्यों का उपयोग करने की आवश्यकता है।

vm.exportCsv = function() { 
      var grid = vm.gridApi.grid; 
      var rowTypes = uiGridExporterConstants.ALL; 
      var colTypes = uiGridExporterConstants.ALL; 
      uiGridExporterService.csvExport(grid, rowTypes, colTypes); 
     }; 

और अपने एचटीएमएल व्यू के अंदर, आपको नीचे दिए गए अनुसार इस exportcsv() फ़ंक्शन को कॉल करने की आवश्यकता है।

<img ng-src="public/images/excel-icon.png" ng-click="vm.exportCsv()" /> 
संबंधित मुद्दे