138 lines
3.5 KiB
HTML
Executable File
138 lines
3.5 KiB
HTML
Executable File
<html>
|
|
|
|
<head>
|
|
<title>CSV Save Test</title>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
|
|
|
|
<script type="text/javascript" src="../js/libs/jquery-1.8.2.min.js"></script>
|
|
|
|
<style type="text/css">
|
|
body
|
|
{
|
|
font-family: Tahoma, Verdana, Arial;
|
|
font-size: 14px;
|
|
}
|
|
#TestTable
|
|
{
|
|
border-collapse: collapse;
|
|
border: solid 2px #E0E0E0;
|
|
}
|
|
#TestTable th div
|
|
{
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
}
|
|
.header1
|
|
{
|
|
border: solid 1px #E0E0E0;
|
|
padding: 2px 5px 2px 5px;
|
|
font-size: 0.9em;
|
|
}
|
|
#TestTable td
|
|
{
|
|
border: solid 1px #E0E0E0;
|
|
padding: 2px 4px 2px 4px;
|
|
}
|
|
tr.odd
|
|
{
|
|
background-color: #F0F0F0;
|
|
}
|
|
|
|
.csv-frame {
|
|
width: 130px;
|
|
height: 40px;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
var DownloadTable = function() {
|
|
//assemble comma separated column names in a JSON map
|
|
var Columns = $("#TestTable thead tr").map(function() {
|
|
var cells = "";
|
|
jQuery(this).find('th').each(function() {
|
|
if (cells.length > 0) {
|
|
cells += ',' + jQuery(this).text();
|
|
} else {
|
|
cells += jQuery(this).text();
|
|
}
|
|
});
|
|
return { ColumnNames: cells };
|
|
}).get();
|
|
//assemble comma separated rows in a JSON map
|
|
var Rows = $("#TestTable tbody tr").map(function() {
|
|
var cells = "";
|
|
jQuery(this).find('td').each(function() {
|
|
var celValue = jQuery(this).text();
|
|
|
|
if (cells.length > 0) {
|
|
cells += ',' + celValue.replace(/,/g, ';');
|
|
} else {
|
|
cells += celValue.replace(/,/g, ';');
|
|
}
|
|
});
|
|
return { row: cells };
|
|
}).get();
|
|
|
|
var tableCSV = { "Columns": Columns, "Rows": Rows };
|
|
$("#csvFrame").contents().find("#CsvData")[0].value = JSON.stringify(tableCSV);
|
|
$("#csvFrame").contents().find("#CsvFilename")[0].value = "myfile.csv";
|
|
|
|
Rows = null;
|
|
Columns = null;
|
|
return false; //stop the href form possibly doing a postback
|
|
};
|
|
|
|
function addCSVButton(elementId, frameId, onClickFunction) {
|
|
|
|
$("#" + elementId)
|
|
.append(
|
|
$("<iframe />")
|
|
.attr("id", frameId)
|
|
.addClass("csv-frame")
|
|
.attr("src", "http://" + window.location.host + "/AspUtils/SaveCSV.aspx")
|
|
.load(function() {
|
|
var iFrameForm = $(this).contents().find("form");
|
|
|
|
if (iFrameForm.size() == 0)
|
|
return;
|
|
|
|
$(iFrameForm)
|
|
.find("#ExportCSVButton")
|
|
.addClass("red-button hand")
|
|
.attr("onCLick", onClickFunction)
|
|
})
|
|
)
|
|
};
|
|
|
|
$(document).ready(function() {
|
|
addCSVButton("csvPlaceholder", "csvFrame", DownloadTable);
|
|
});
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<h1>CSV Save Test</h1>
|
|
<br>
|
|
<div id="TableData">
|
|
<table id="TestTable">
|
|
<thead>
|
|
<tr><th class="header1">ShipperID</th><th class="header1">CompanyName</th><th class="header1">Phone</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>1</td><td>Speedy Express</td><td>(503) 555-9831</td></tr>
|
|
<tr class="odd"><td>2</td><td>United Package</td><td>(503) 555-3199</td></tr>
|
|
<tr><td>3</td><td>Federal Shipping</td><td>(503) 555-9931</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<br/>
|
|
<div id="csvPlaceholder" />
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |