dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
201 lines (198 loc) • 6.6 kB
HTML
<html>
<head>
<title>Test Print/Export plugins of dojox.grid.EnhancedGrid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link rel=stylesheet href="support/common.css"/>
<style type="text/css">
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0.5em;
}
.title {
text-align:center;
margin:1em;
}
#grid{
width: 95em;
height: 50em;
}
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.data.CsvStore");
dojo.require("dojox.grid.enhanced.plugins.exporter.CSVWriter");
dojo.require("dojox.grid.enhanced.plugins.Printer");
var layout = [//--------------------------------------------------------------------------5
{//first view
rows:
[
[
{ field: "Genre", width: '10', rowSpan: 2},
{ field: "Artist", width: '15'},
{ field: "Year", width: '15'},
],[
{ field: "Album", colSpan: 2}
]
]
},
{//second view
rows:
[
[
{ field: "Name", width: '20', rowSpan: 2},
{ field: "Length", width: '20'},
{ field: "Track"}
],[
{ field: "Composer", colSpan: 2},
],[
{ field: "Download Date"},
{ field: "Last Played"},
{ field: "Checked"}
]
]
}
];
var plugins = {
printer: true
};
function exportCSV(){
dijit.byId("grid").exportGrid("csv", {
writerArgs: {
separator: dojo.byId('sep').value
}
}, function(str){
dojo.byId("csvResults").value = str;
});
}
function exportSelected(){
var s = dojo.byId('sep').value;
dojo.byId("csvResults").value = dijit.byId("grid").exportSelected("csv", {
separator: s
});
}
function exportTable(){
dijit.byId("grid").exportGrid("table", function(str){
dojo.byId("csvResults").value = str;
});
}
function printGrid(){
dijit.byId("grid").printGrid({
title: dojo.byId('print_title').value,
cssFiles: ["support/print_style1.css","support/print_style2.css"]
});
}
function printSelected(){
dijit.byId("grid").printSelected({
title: dojo.byId('print_title').value,
cssFiles: ["support/print_style1.css", "support/print_style2.css"]
});
}
function printPreview(){
var g = dijit.byId("grid");
g.exportToHTML({
title: dojo.byId('print_title').value,
cssFiles: ["support/print_style1.css", "support/print_style2.css"]
}, function(str){
var win = window.open();
win.document.open();
win.document.write(str);
g.normalizePrintedGrid(win.document);
win.document.close();
});
}
</script>
<script type="text/javascript" src="support/test_write_store_music.js"></script>
</head>
<body class="claro">
<h1 class="title">dojox.grid.EnhancedGrid - Print, Export</h1>
<div id="gridContainer">
<div id="grid" dojoType="dojox.grid.EnhancedGrid" store="test_store[0]" structure="layout" plugins="plugins"></div>
</div><br/>
<div>
<h2>Printer API</h2>
<input type='button' value='Print All' onclick='printGrid()' />
<input type='button' value='Print Selected' onclick='printSelected()' />
<input type='button' value='Print Preview' onclick='printPreview()' />
Use Title:<input id='print_title' type='text' value='Favorite Music' />
<br/>
<h4>Usage 1:</h4>
<div style="width:100%;">
<pre style="float:left;">someGrid.printGrid({
title: "A title: All Content",
cssFiles: ["cssfile1.css","cssfile2.css"],
writerArgs: {table:"border='border'"},
fetchArgs: {start: 0, count: 100}
});</pre>
<pre style="float:left;">someGrid.printSelected({
title: "A title: Only Selected",
cssFiles: ["cssfile1.css","cssfile2.css"],
writerArgs: {table:"border='border'"}
});</pre>
</div>
<p style="width:100%;clear:left;">
Generate an HTML string containing all the content in the grid and then print it.
</p>
<ul>
<li>A title, an array of CSS files and an associative array containing HTML tag attributes can be provided.</li>
<li><b>All three arguments are optional</b>
<li>The generated HTML page assigns predefined CSS classes for grid rows and columns, so the user can design styles for every rows,columns or even a single cell.</li>
</ul>
<h4>Usage 2:</h4>
<div>
<pre style="float:left;">someGrid.exportToHTML({
title: "Export All To HTML",
cssFiles: ["cssfile1.css","cssfile2.css"],
writerArgs: {table:"border='border'"},
fetchArgs: {start: 0, count: 100}
}, function(html){
/* do sth with the generated html page */
});</pre>
<pre style="float:left;">var html =
someGrid.exportSelectedToHTML({
title: "Export Selected Rows to HTML",
cssFiles: ["cssfile1.css","cssfile2.css"],
writerArgs: {table:"border='border'"}
});</pre>
</div>
<p style="width:100%;clear:left;">
Do not print, only generate html string. Users can use this to implement preview.
</p>
<hr/>
<h2>Exporter API</h2>
<input type='button' value='Export All to CSV' onclick='exportCSV()' />
<input type='button' value='Export Selected to CSV' onclick='exportSelected()' />
Separator is:<input id='sep' type='text' value=',' />
<input type='button' value='Export All to HTML Table' onclick='exportTable()' /><br/>
Results:<br />
<textarea rows="10" cols="100" id="csvResults"></textarea>
<h4>Usage:</h4>
<pre style="float:left;">someGrid.exportGrid("csv", {
writerArgs: {separator:":"},
fetchArgs: {start: 0, count: 100}
}, function(str){
/* do sth with str */
});</pre>
<pre style="float:left;">var str =
someGrid.exportSelected("csv", {
writerArgs: {separator:"###"}
});</pre>
<p style="width:100%;clear:left;">
Export grid content to a specified format.
</p>
<ul>
<li>The type argument is a supported format name, mandatory.</li>
<li>The writerArgs argument is a format-specific argument, optional.</li>
<li>If we are exporting everything, a callback function should be provided.</li>
<li>Actually, the printer is implemented using an HTML Table exporter</li>
</ul>
</div>
<p><strong>Note:</strong> To see the tundra theme, just append <b style="color:blue;">?theme=tundra</b> to the URL.</p>
</body>
</html>