The XSLDataGrid: XSLT Rocks Ajax
by Lindsey Simon
|
Pages: 1, 2, 3
XSLDataGrid Demos
- Dynamic XSLDataGrid Test
- Client Transform, XHTML from server
- Client Transform, XHTML on page (Multiple Grids)
XSLDataGrid Usage
Requirements
Downloads
- prototype (Sam Stephenson)
- scriptaculous (Thomas Fuchs)
- sarissa (Manos Batsis)
- XSLDataGrid.css (Lindsey Simon)
- XSLDataGrid.js (Lindsey Simon)
- XSLDataGrid.xsl (Lindsey Simon)
- Utility.js (Lindsey Simon)
Somewhere in your HTML (probably in the <head>) you'll need to include the following, if you haven't already. Also, you'll need to put the XSLDataGrid.xsl file in the same directory as the XSLDataGrid.js file.
<script type="text/javascript" src="PATH_TO/prototype.js"></script>
<script type="text/javascript" src="PATH_TO/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript" src="PATH_TO/sarissa.js"></script>
<script type="text/javascript" src="PATH_TO/XSLDataGrid/Utility.js"></script>
<style type="text/css">@import "PATH_TO/XSLDataGrid/XSLDataGrid.css";</style>
<script type="text/javascript" src="PATH_TO/XSLDataGrid/XSLDataGrid.js"></script>JavaScript Syntax
Instantiation in JavaScript of the XSLDataGrid is done in much the same way as functions are in Prototype and Scriptaculous.
var myGrid = new XSLDataGrid( 'containerDiv', { option1: value1, option2: value2, etc ... } );| Option | Type | Default | Description |
|---|---|---|---|
transformer |
string {client|server} |
client |
Where will the XSL transform(s) take place? If "server," then all get requests to "url" are expected to return the transformed XHTML -- i.e., transformed on the server. If "client," then the grid will either transform inline XHTML or get semantic XHTML from "url" and subsequently transform it in the browser. (Note: Client sort is currently limited to XSLT 1.0 datatype limits: text & number - qname are not yet implemented for dates.) |
url |
string |
(none) |
An optional URL for fetching either the semantic XHTML or the transformed XHTML from a server (i.e., XSLDataGridTestTransform.php). |
extra_parameters |
string |
(none) |
A string of any extra parameters to append to "url" with each get request (i.e., "session_id=lindsey123&haxor=true"). |
width |
number |
300 |
Width in pixels. |
height |
number |
150 |
Height in pixels. |
prefetch |
bool |
true |
Should the grid perform a get request to "url" on initialization? |
gridPopupDivId |
string |
gridPopupDivId |
If you're embedding the grid into an application, you may want to use another absolutely positioned empty div for the right-click popup context menus. |
rowReloadLimitOnRearrange |
number |
200 |
If there is more than this number of rows in the grid, do not try to perform the header rearranging in the browser. In IE, table DOM manipulation with more than 200 rows seems pretty slow to me. |
hideColContextMenuDelay |
number |
1000 |
How long should the right-click context menu stay up after it loses focus (in milliseconds)? |
scrollerWidth |
number |
19 |
Scrollbar width in pixels. |
debugging |
bool |
false |
If debugging is set to true, lots of feedback information will be sent to Firefox's awesome Firebug extension console using console.debug(). |
XHTML Markup
Skeleton of required base markup:
<div id="container_id">
<table
class="XSLTable"
width=""
height=""
>
<thead>
<tr>
<th
id=""
width=""
class="SEE TABLE BELOW"
data-type="optional{text|number}"
>Column Label
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column Data</td>
</tr>
</tbody>
</table>
</div>In the above skeleton, you'll need to fill in width, height, id, and class. Having those width and height values will also help in case JavaScript is disabled in the client.
data-type is optional for client-side XSL sorting. Right now the client-side sort technique is purely XSLT (only number and text sorting). I've not written any special sort routines for other (qname) datatypes, like dates, but I welcome suggestions.
Currently, width and height must be numbers (in pixels), as opposed to percentages.
THEAD/TR/TH class: You can use all or any of the following per column:
| Option | Description |
|---|---|
| sortable | Include this class if the column can be sorted and grouped on. If you're implementing server-side XSLT, you'll need to look at the sort and group parameters being sent in the URL. |
| rearrageable | Include this class if the column can be reordered via drag-and-drop. |
| resizable | Include this class if the column can be resized. |
| filterable | Include this class if the column can be filtered on. |
| grouped | This will automatically group the results by this column. It's a little odd to do this in the initial load, as opposed to using the right-click column menu, but it's here. |
Footnotes
[1] Examples/resources for using XSLT on XHTML
[2] AHAH Microformat
- the test and Firefox
2007-02-14 13:52:18 jklense - Attaching Javascript events to XSLDataGrid
2006-09-05 14:58:57 Wesley Gamble
