200 lines
6.6 KiB
HTML
200 lines
6.6 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
<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" djConfig="isDebug:true, parseOnLoad: true"></script>
|
|
<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
|
|
<script type="text/javascript" src="support/test_write_store_music.js"></script>
|
|
<script type="text/javascript">
|
|
dojo.require("dojo.parser");
|
|
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>
|
|
</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>
|