如何在具有不同工作表的单个 Excel 文件中导出两个 ig 网格

Question

I am using Infragistics ig grids to display data in .Net and need to export these grids to excel file.我正在使用 Infragistics ig 网格在 .Net 中显示数据，需要将这些网格导出到 excel 文件。

Infragistics also supports excel export but the problem is, it supports single grid at a time. Infragistics 也支持 excel 导出，但问题是，它一次支持单个网格。 I want to export these two grids in a single excel file with different sheets.我想将这两个网格导出到具有不同工作表的单个 Excel 文件中。 I have searched a lot but can't find anything helpful on the internet.我已经搜索了很多，但在互联网上找不到任何有用的东西。

Is there any way to do this task ?有什么办法可以完成这项任务吗？

Here is my Code这是我的代码

<!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>

Answer 1

Since exporting multiple grids at a time is not supported, you can handle the exportEnding event, where to call a function to export the second grid.由于不支持一次导出多个网格，您可以处理 exportEnding 事件，在那里调用函数导出第二个网格。 It is important to pass the workbook object as argument to the function that will export the second grid:将工作簿对象作为参数传递给将导出第二个网格的函数很重要：

$("#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");
            }
        },
}
);}

In the earliest time possible when exporting the second grid (this is the headerCellExporting event) we replace the workbook object with the one that we passed to the function.在导出第二个网格时（这是 headerCellExporting 事件），我们尽可能早地将工作簿对象替换为我们传递给函数的对象。 So this workbook has the first grid in the first worksheet, and the second grid is going to be written in the second sheet.所以这个工作簿在第一个工作表中有第一个网格，第二个网格将被写入第二个工作表中。

如何在具有不同工作表的单个 Excel 文件中导出两个 ig 网格

问题描述

1 个解决方案

解决方案1
5 已采纳 2017-01-04 12:24:35

如何在具有不同工作表的单个 Excel 文件中导出两个 ig 网格

问题描述

1 个解决方案

解决方案1 5 已采纳 2017-01-04 12:24:35

解决方案1
5 已采纳 2017-01-04 12:24:35