[英]How to Export two ig grids in a single excel file with different sheets
我正在使用 Infragistics ig 網格在 .Net 中顯示數據，需要將這些網格導出到 excel 文件。
Infragistics 也支持 excel 導出，但問題是，它一次支持單個網格。 我想將這兩個網格導出到具有不同工作表的單個 Excel 文件中。 我已經搜索了很多，但在互聯網上找不到任何有用的東西。
有什么辦法可以完成這項任務嗎？
這是我的代碼
<!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>
由於不支持一次導出多個網格，您可以處理 exportEnding 事件，在那里調用函數導出第二個網格。 將工作簿對象作為參數傳遞給將導出第二個網格的函數很重要：
$("#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 事件），我們盡可能早地將工作簿對象替換為我們傳遞給函數的對象。 所以這個工作簿在第一個工作表中有第一個網格，第二個網格將被寫入第二個工作表中。
如何將 HTML 表格導出到具有不同工作表的單個 Excel 工作簿？
[英]How to export HTML tables to a single Excel workbook with different sheets?
將兩個 html 表導出到 CSV 文件中的兩個工作表的 Javascript 代碼
[英]Javascript code to export two html tables into two sheets in CSV file
如何在另一個文件中調用具有不同導出語法的兩個函數？
[英]How to call two functions with different export syntax in another file?
如何在單個 excel 文件中下載兩個 jQuery 數據表數據？
[英]How to download two jQuery datatables data in single excel file?
為什么從兩個不同的網格調用ngGridEventEndCellEdit？
[英]Why ngGridEventEndCellEdit is called from two different grids?
如何遍歷值列表並將輸出導出到不同的谷歌工作表
[英]How to loop through a list of values and export the outputs to a different google sheets
使用 Javascript 將多個 HTML 表格導出到單個 Excel 文件 (xls)
[英]Using Javascript to Export Multiple HTML Tables into single Excel file (xls)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.