Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » BIRT » Using external javascript files
Using external javascript files [message #363665] Thu, 03 July 2008 09:41 Go to next message
Rafal is currently offline RafalFriend
Messages: 33
Registered: July 2009
Member
Hi,
I was wondering if it's possible in BIRT to make client-side sortable
tables using external .js scripts, like tablesort.js .
http://tetlaw.id.au/upload/dev/sortabletable/

All the script needs is to add an attribute to the table:
<table class="sortable scroll">
and import tablesort.js file into the html code of the report.

If it's possible, where do I put declaration of external .js file how to
make additional table attributes?

Rafal
Re: Using external javascript files [message #363670 is a reply to message #363665] Thu, 03 July 2008 13:42 Go to previous message
Eclipse UserFriend
Originally posted by: jasonweathersby.alltel.net

Rafal,

This is possible using the text element. The only issue is that it will
not sort across pages. The attached example uses the text element to
define the script. It could have easily included the script.

Jason

<?xml version="1.0" encoding="UTF-8"?>
<report xmlns="http://www.eclipse.org/birt/2005/design" version="3.2.15"
id="1">
<property name="createdBy">Eclipse BIRT Designer Version
2.2.1.r221_v20070924 Build &lt;2.2.0.v20070924-1550></property>
<property name="units">in</property>
<property name="comments">Copyright (c) 2007 &lt;&lt;Your Company
Name here>></property>
<html-property name="description">Creates a blank report with no
predefined content.</html-property>
<text-property name="displayName">Blank Report</text-property>
<property name="iconFile">/templates/blank_report.gif</property>
<data-sources>
<oda-data-source
extensionID="org.eclipse.birt.report.data.oda.jdbc" name="Data Source"
id="6">
<property
name="odaDriverClass">org.eclipse.birt.report.data.oda.sampledb.Driver </property>
<property name="odaURL">jdbc:classicmodels:sampledb</property>
<property name="odaUser">ClassicModels</property>
</oda-data-source>
</data-sources>
<data-sets>
<oda-data-set
extensionID="org.eclipse.birt.report.data.oda.jdbc.JdbcSelectDataSet "
name="Data Set" id="7">
<list-property name="columnHints">
<structure>
<property name="columnName">ORDERNUMBER</property>
<property name="displayName">ORDERNUMBER</property>
</structure>
<structure>
<property name="columnName">PRODUCTCODE</property>
<property name="displayName">PRODUCTCODE</property>
</structure>
<structure>
<property name="columnName">QUANTITYORDERED</property>
<property name="displayName">QUANTITYORDERED</property>
</structure>
<structure>
<property name="columnName">PRICEEACH</property>
<property name="displayName">PRICEEACH</property>
</structure>
<structure>
<property name="columnName">ORDERLINENUMBER</property>
<property name="displayName">ORDERLINENUMBER</property>
</structure>
</list-property>
<structure name="cachedMetaData">
<list-property name="resultSet">
<structure>
<property name="position">1</property>
<property name="name">ORDERNUMBER</property>
<property name="dataType">integer</property>
</structure>
<structure>
<property name="position">2</property>
<property name="name">PRODUCTCODE</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">3</property>
<property name="name">QUANTITYORDERED</property>
<property name="dataType">integer</property>
</structure>
<structure>
<property name="position">4</property>
<property name="name">PRICEEACH</property>
<property name="dataType">float</property>
</structure>
<structure>
<property name="position">5</property>
<property name="name">ORDERLINENUMBER</property>
<property name="dataType">integer</property>
</structure>
</list-property>
</structure>
<property name="dataSource">Data Source</property>
<list-property name="resultSet">
<structure>
<property name="position">1</property>
<property name="name">ORDERNUMBER</property>
<property name="nativeName">ORDERNUMBER</property>
<property name="dataType">integer</property>
<property name="nativeDataType">4</property>
</structure>
<structure>
<property name="position">2</property>
<property name="name">PRODUCTCODE</property>
<property name="nativeName">PRODUCTCODE</property>
<property name="dataType">string</property>
<property name="nativeDataType">12</property>
</structure>
<structure>
<property name="position">3</property>
<property name="name">QUANTITYORDERED</property>
<property name="nativeName">QUANTITYORDERED</property>
<property name="dataType">integer</property>
<property name="nativeDataType">4</property>
</structure>
<structure>
<property name="position">4</property>
<property name="name">PRICEEACH</property>
<property name="nativeName">PRICEEACH</property>
<property name="dataType">float</property>
<property name="nativeDataType">8</property>
</structure>
<structure>
<property name="position">5</property>
<property name="name">ORDERLINENUMBER</property>
<property name="nativeName">ORDERLINENUMBER</property>
<property name="dataType">integer</property>
<property name="nativeDataType">5</property>
</structure>
</list-property>
<property name="queryText">select *
from orderdetails
</property>
</oda-data-set>
</data-sets>
<styles>
<style name="crosstab-cell" id="4">
<property name="borderBottomColor">#CCCCCC</property>
<property name="borderBottomStyle">solid</property>
<property name="borderBottomWidth">1pt</property>
<property name="borderLeftColor">#CCCCCC</property>
<property name="borderLeftStyle">solid</property>
<property name="borderLeftWidth">1pt</property>
<property name="borderRightColor">#CCCCCC</property>
<property name="borderRightStyle">solid</property>
<property name="borderRightWidth">1pt</property>
<property name="borderTopColor">#CCCCCC</property>
<property name="borderTopStyle">solid</property>
<property name="borderTopWidth">1pt</property>
</style>
<style name="crosstab" id="5">
<property name="borderBottomColor">#CCCCCC</property>
<property name="borderBottomStyle">solid</property>
<property name="borderBottomWidth">1pt</property>
<property name="borderLeftColor">#CCCCCC</property>
<property name="borderLeftStyle">solid</property>
<property name="borderLeftWidth">1pt</property>
<property name="borderRightColor">#CCCCCC</property>
<property name="borderRightStyle">solid</property>
<property name="borderRightWidth">1pt</property>
<property name="borderTopColor">#CCCCCC</property>
<property name="borderTopStyle">solid</property>
<property name="borderTopWidth">1pt</property>
</style>
<style name="detail" id="48">
<property name="backgroundColor">#BACAE2</property>
<property name="fontFamily">"Arial"</property>
<property name="fontSize">small</property>
<property name="paddingTop">0px</property>
<property name="paddingLeft">0px</property>
<property name="paddingBottom">0px</property>
<property name="paddingRight">0px</property>
</style>
<style name="headerfooter" id="49">
<property name="backgroundColor">#004080</property>
<property name="fontFamily">"Arial"</property>
<property name="fontSize">small</property>
<property name="fontWeight">bold</property>
<property name="color">#FFFFFF</property>
</style>
<style name="groupheader" id="50">
<property name="backgroundColor">#0080FF</property>
<property name="fontFamily">"Arial"</property>
<property name="fontSize">small</property>
<property name="fontWeight">bold</property>
<property name="color">#FFFFFF</property>
</style>
</styles>
<page-setup>
<simple-master-page name="Simple MasterPage" id="2">
<page-footer>
<text id="3">
<property name="contentType">html</property>
<text-property
name="content"><![CDATA[<value-of>new Date()</value-of>]]></text-property>
</text>
</page-footer>
</simple-master-page>
</page-setup>
<body>
<text id="42">
<property name="contentType">html</property>
<text-property name="content"><![CDATA[<script>
var sortcol =2;
var testArray = new Array();


function tableSort(a, b) {
var x = a.cells[sortcol].innerHTML.toLowerCase();
var y = b.cells[sortcol].innerHTML.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}



function rowCopy( a, b ){

cellcnt = b.cells.length;
//alert("A = "+ a.innerHTML);
//alert("B = "+ b.innerHTML);

for( ii=0; ii<cellcnt; ii++ ){
b.cells[ii].innerHTML = a.cells[ii].innerHTML;
}

}


function sortTable(id, col, rev) {

sortcol = col;
var tbl = document.getElementById(id);
var ctbl = tbl.cloneNode(true);

//alert( ctbl.rows[0].cells[0].innerHTML );
var tRows = ctbl.rows
var ctRows = tbl.rows



//var testArray = new Array(tRows.length-2);
//var testArray = cloneObject(tRows);
for( var i =1; i < tRows.length-1; i++ ){
testArray[i-1] = tRows[i];
}
testArray.sort( tableSort );

for( var x = 0; x < testArray.length; x++ ){
rowCopy( testArray[x], ctRows[x+1] );
}

}



</script>
]]></text-property>
</text>
<table name="MyTable" id="8">
<property name="width">100%</property>
<property name="dataSet">Data Set</property>
<list-property name="boundDataColumns">
<structure>
<property name="name">ORDERNUMBER</property>
<expression
name="expression">dataSetRow["ORDERNUMBER"]</expression >
<property name="dataType">integer</property>
</structure>
<structure>
<property name="name">PRODUCTCODE</property>
<expression
name="expression">dataSetRow["PRODUCTCODE"]</expression >
<property name="dataType">string</property>
</structure>
<structure>
<property name="name">QUANTITYORDERED</property>
<expression
name="expression">dataSetRow["QUANTITYORDERED"]</expression >
<property name="dataType">integer</property>
</structure>
<structure>
<property name="name">PRICEEACH</property>
<expression
name="expression">dataSetRow["PRICEEACH"]</expression>
<property name="dataType">float</property>
</structure>
<structure>
<property name="name">ORDERLINENUMBER</property>
<expression
name="expression">dataSetRow["ORDERLINENUMBER"]</expression >
<property name="dataType">integer</property>
</structure>
</list-property>
<expression name="bookmark">"MyTable"</expression>
<column id="37"/>
<column id="38"/>
<column id="39"/>
<column id="40"/>
<column id="41"/>
<header>
<row id="9">
<property name="style">headerfooter</property>
<cell id="10">
<label id="11">
<text-property
name="text">ORDERNUMBER</text-property>
</label>
<text id="43">
<property name="contentType">html</property>
<text-property
name="content"><![CDATA[<input type="Radio" value="Sort"
onclick="sortTable('MyTable', 0, 1)">]]></text-property>
</text>
</cell>
<cell id="12">
<label id="13">
<text-property
name="text">PRODUCTCODE</text-property>
</label>
<text id="44">
<property name="contentType">html</property>
<text-property
name="content"><![CDATA[<input type="Radio" value="Sort"
onclick="sortTable('MyTable', 1, 1)">]]></text-property>
</text>
</cell>
<cell id="14">
<label id="15">
<text-property
name="text">QUANTITYORDERED</text-property>
</label>
<text id="45">
<property name="contentType">html</property>
<text-property
name="content"><![CDATA[<input type="Radio" value="Sort"
onclick="sortTable('MyTable', 2, 1)">]]></text-property>
</text>
</cell>
<cell id="16">
<label id="17">
<text-property
name="text">PRICEEACH</text-property>
</label>
<text id="46">
<property name="contentType">html</property>
<text-property
name="content"><![CDATA[<input type="Radio" value="Sort"
onclick="sortTable('MyTable', 3, 1)">]]></text-property>
</text>
</cell>
<cell id="18">
<label id="19">
<text-property
name="text">ORDERLINENUMBER</text-property>
</label>
<text id="47">
<property name="contentType">html</property>
<text-property
name="content"><![CDATA[<input type="Radio" value="Sort"
onclick="sortTable('MyTable', 4, 1)">]]></text-property>
</text>
</cell>
</row>
</header>
<detail>
<row id="20">
<property name="style">detail</property>
<cell id="21">
<data id="22">
<property
name="resultSetColumn">ORDERNUMBER</property>
</data>
</cell>
<cell id="23">
<data id="24">
<property
name="resultSetColumn">PRODUCTCODE</property>
</data>
</cell>
<cell id="25">
<data id="26">
<property
name="resultSetColumn">QUANTITYORDERED</property>
</data>
</cell>
<cell id="27">
<data id="28">
<property
name="resultSetColumn">PRICEEACH</property>
</data>
</cell>
<cell id="29">
<data id="30">
<property
name="resultSetColumn">ORDERLINENUMBER</property>
</data>
</cell>
</row>
</detail>
<footer>
<row id="31">
<cell id="32"/>
<cell id="33"/>
<cell id="34"/>
<cell id="35"/>
<cell id="36"/>
</row>
</footer>
</table>
</body>
</report>


Rafal Wojtowicz wrote:
> Hi,
> I was wondering if it's possible in BIRT to make client-side sortable
> tables using external .js scripts, like tablesort.js .
> http://tetlaw.id.au/upload/dev/sortabletable/
>
> All the script needs is to add an attribute to the table:
> <table class="sortable scroll">
> and import tablesort.js file into the html code of the report.
>
> If it's possible, where do I put declaration of external .js file how to
> make additional table attributes?
>
> Rafal
Previous Topic:How to avoid caching in BIRT 2.2.1
Next Topic:BIRT 2.3: Back in classloader hell!
Goto Forum:
  


Current Time: Sun Nov 23 22:39:50 GMT 2014

Powered by FUDForum. Page generated in 0.01624 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software