1. 홈
  2. 질의 응답
  3. 다른 시트를 사용하여 단일 Excel 파일에서 두 개의 ig 그리드를 내보내는 방법

다른 시트를 사용하여 단일 Excel 파일에서 두 개의 ig 그리드를 내보내는 방법

2017-01-03 1 views
0

.Net에서 데이터를 표시하는 데 Infragistics ig 그리드를 사용하고 있으며 이러한 그리드를 내보내 파일로 내보내야합니다.다른 시트를 사용하여 단일 Excel 파일에서 두 개의 ig 그리드를 내보내는 방법

Infragistics는 Excel 내보내기도 지원하지만 문제는 한 번에 하나의 표만 지원한다는 것입니다. 이 두 가지 표를 다른 시트가있는 하나의 Excel 파일로 내보내려고합니다. 나는 많은 것을 수색했지만 인터넷에서 도움이되는 것을 찾을 수 없습니다.

이 작업을 수행 할 방법이 있습니까?

다음은 두 번째 그리드를 수출하는 함수를 호출하는 exportEnding 이벤트를 처리 할 수있는, 지원되지 않는 번에 여러 개의 그리드를 수출 이후 내 코드

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <!-- Ignite UI Required Combined CSS Files --> 
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> 
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css" rel="stylesheet" /> 
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/modules/infragistics.ui.treegrid.css" rel="stylesheet" /> 

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 

    <!-- External files for exporting --> 
    <script src="http://www.igniteui.com/js/external/FileSaver.js"></script> 
    <script src="http://www.igniteui.com/js/external/Blob.js"></script> 

    <!-- Ignite UI Required Combined JavaScript Files --> 
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.core.js"></script> 
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.lob.js"></script> 
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/modules/infragistics.documents.core.js"></script> 
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/modules/infragistics.excel.js"></script> 
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/modules/infragistics.gridexcelexporter.js"></script> 

</head> 
<body> 
    <h3>Flat Data Source</h3> 
    <table id="treegrid1"></table> 
    <br /> 
    <input type="button" id="exportFlatDS" value="Export Flat Data" /> 
    <br /> 
    <br /> 
    <br /> 
    <h3>Hierarchical Data Source</h3> 
    <table id="treegrid2"></table> 
    <br /> 
    <input type="button" id="exportHierarchicalDS" value="Export Hierarchical Data" /> 

    <script> 
     $(function() { 
      var flatDS = [ 
       { "employeeID": 0, "PID": -1, "firstName": "Andrew", "lastName": "Fuller", "reportsTo": null }, 
       { "employeeID": 1, "PID": -1, "firstName": "Jonathan", "lastName": "Smith", "reportsTo": null }, 
       { "employeeID": 2, "PID": -1, "firstName": "Nancy", "lastName": "Davolio", "reportsTo": null }, 
       { "employeeID": 3, "PID": -1, "firstName": "Steven", "lastName": "Buchanan", "reportsTo": null }, 
           // sub of ID 1 
       { "employeeID": 4, "PID": 0, "firstName": "Janet", "lastName": "Leverling", "reportsTo": 0 }, 
       { "employeeID": 5, "PID": 0, "firstName": "Laura", "lastName": "Callahan", "reportsTo": 0 }, 
       { "employeeID": 6, "PID": 0, "firstName": "Margaret", "lastName": "Peacock", "reportsTo": 0 }, 
       { "employeeID": 7, "PID": 0, "firstName": "Michael", "lastName": "Suyama", "reportsTo": 0 }, 
           // sub of ID 4 
       { "employeeID": 8, "PID": 4, "firstName": "Anne", "lastName": "Dodsworth", "reportsTo": 4 }, 
       { "employeeID": 9, "PID": 4, "firstName": "Danielle", "lastName": "Davis", "reportsTo": 4 }, 
       { "employeeID": 10, "PID": 4, "firstName": "Robert", "lastName": "King", "reportsTo": 4 }, 
           // sub of ID 2 
       { "employeeID": 11, "PID": 2, "firstName": "Peter", "lastName": "Lewis", "reportsTo": 2 }, 
       { "employeeID": 12, "PID": 2, "firstName": "Ryder", "lastName": "Zenaida", "reportsTo": 2 }, 
       { "employeeID": 13, "PID": 2, "firstName": "Wang", "lastName": "Mercedes", "reportsTo": 2 }, 
           // sub of ID 3 
       { "employeeID": 14, "PID": 3, "firstName": "Theodore", "lastName": "Zia", "reportsTo": 3 }, 
       { "employeeID": 15, "PID": 3, "firstName": "Lacota", "lastName": "Mufutau", "reportsTo": 3 }, 
           // sub of ID 16 
       { "employeeID": 16, "PID": 15, "firstName": "Jin", "lastName": "Elliott", "reportsTo": 16 }, 
       { "employeeID": 17, "PID": 15, "firstName": "Armand", "lastName": "Ross", "reportsTo": 16 }, 
       { "employeeID": 18, "PID": 15, "firstName": "Dane", "lastName": "Rodriquez", "reportsTo": 16 }, 
           // sub of ID 19 
       { "employeeID": 19, "PID": 18, "firstName": "Declan", "lastName": "Lester", "reportsTo": 19 }, 
       { "employeeID": 20, "PID": 18, "firstName": "Bernard", "lastName": "Jarvis", "reportsTo": 19 }, 
           // sub of ID 20 
       { "employeeID": 21, "PID": 20, "firstName": "Jeremy", "lastName": "Donaldson", "reportsTo": 2 } 
      ]; 

      var hierarchicalDS = [ 
       { 
        "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [ 
         { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" }, 
         { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" }, 
         { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" }, 
         { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" }, 
         { 
          "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [ 
           { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" }, 
           { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" }, 
           { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" } 
          ] 
         }, 
         { 
          "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [ 
           { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" }, 
           { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" }, 
           { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" }, 
           { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" } 
          ] 
         }, 
         { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" } 
        ] 
       } 
      ]; 

      $("#treegrid1").igTreeGrid({ 
       width: "100%", 
       dataSource: flatDS, //bound to flat data source, 
       autoGenerateColumns: false, 
       primaryKey: "employeeID", 
       foreignKey: "PID", 
       initialExpandDepth: 1, 
       columns: [ 
        { headerText: "Employee ID", key: "employeeID", width: "200px", dataType: "number" }, 
        { headerText: "First Name", key: "firstName", width: "220px", dataType: "string" }, 
        { headerText: "Last Name", key: "lastName", width: "220px", dataType: "string" }, 
        { headerText: "Reports To", key: "reportsTo", width: "130px", dataType: "number" } 
       ] 
      }); 


      $("#treegrid2").igTreeGrid({ 
       width: "100%", 
       dataSource: hierarchicalDS, //Project Plan data, 
       autoGenerateColumns: false, 
       primaryKey: "id", 
       columns: [ 
        { headerText: "ID", key: "id", width: "120px", dataType: "number" }, 
        { headerText: "Tasks", key: "tasks", width: "250px", dataType: "string" }, 
        { headerText: "Start", key: "start", width: "130px", dataType: "string" }, 
        { headerText: "Finish", key: "finish", width: "130px", dataType: "string" }, 
        { headerText: "Duration", key: "duration", width: "100px", dataType: "string" }, 
        { headerText: "Progress", key: "progress", width: "130px", dataType: "string" } 
       ], 
       childDataKey: "products", 
       initialExpandDepth: 1, 
       renderExpansionIndicatorColumn: true 
      }); 


      $("#exportFlatDS").on("click", function() { 
       $.ig.GridExcelExporter.exportGrid($("#treegrid1"), { 
        fileName: "treegrid1" 
       }); 
      }); 

      $("#exportHierarchicalDS").on("click", function() { 
       $.ig.GridExcelExporter.exportGrid($("#treegrid2"), { 
        fileName: "treegrid2" 
       }); 
      }); 
     }); 
    </script> 
</body> 
</html>

출처

2017-01-03 Anonymous

답변

4

입니다. 그것은 두 번째 그리드 내 보냅니다 함수에 인수로 통합 문서 개체를 전달하는 것이 중요하다 : 두 번째 그리드를 내보낼 때 가능한 가장 빠른 시간에

$("#exportButton").on("click", function() { 
$.ig.GridExcelExporter.exportGrid($("#grid"), { 
    fileName: "igGrid" 
}, 
{ 
    exportEnding: function(sender, args) { 
     exportSecondGrid(args.workbook); 
     return false; 
    } 
} 
);}); 



function exportSecondGrid(workbook) { 
$.ig.GridExcelExporter.exportGrid($("#grid1"), { 
    fileName: "igGrid", 
    worksheetName: "Sheet2" 
}, 
{ 
     headerCellExporting: function(sender, args) { 
      if (args.columnIndex === 0) { 
       sender._workbook = workbook; 
       sender._workbook.worksheets().add(sender._worksheet.name()); 
       sender._worksheet = sender._workbook.worksheets(1); 
       sender._worksheet.rows(0).setCellValue(0, "some text"); 
      } 
     }, 
} 
);}

을 우리가 통합 문서 객체를 대체 (이것은 headerCellExporting 이벤트입니다) 우리가 함수에 전달한 것. 따라서이 워크 북에는 첫 번째 워크 시트에 첫 번째 그리드가 있고 두 번째 그리드는 두 번째 시트에 작성됩니다.

출처

2017-01-04 12:24:35

+0

잘 작동합니다. 고마워 ....... :) –

관련 문제

 관련 문제