Nothing exists in the taglibs or Struts itself to do this as far as I know, so you'll
have to roll your own.
I have done this in a number of applications, so I'll save you some time... I do not
know how cross-browser this is, most of my work is IE-only (not using much IE-only
functionality, but means I only have to worry about proper operation in one browser!).
Here's some code...
<html><head><title>Sorting example</title>
<style>
BODY { color: #000000; font-SIZE: 13px; FONT-FAMILY: Verdana; BACKGROUND-COLOR:
White; }
B { color: Navy; font-SIZE: 13px; FONT-FAMILY: Verdana; BACKGROUND-COLOR:
#AFAFCA; TEXT-DECORATION: Underline; CURSOR: Hand }
TD { color: #000000; font-SIZE: 12px; FONT-FAMILY: Verdana; BACKGROUND-COLOR:
#AFAFCA; TEXT-DECORATION: None;}
A:Link { color: #AFAFCA; font-SIZE: 13px; FONT-FAMILY: Verdana; BACKGROUND-COLOR:
White; fONT-WEIGHT: bold; }
A:Visited { color: #AFAFCA; font-SIZE: 13px; FONT-FAMILY: Verdana; BACKGROUND-COLOR:
White; fONT-WEIGHT: bold; }
A:Hover { color: Gold; font-SIZE: 13px; FONT-FAMILY: Verdana; BACKGROUND-COLOR:
White; fONT-WEIGHT: bold; }
</Style>
<script>
// This is an array of our table headers
var titleArray = new Array("Id", "First Name", "Last Name", "Date");
// These store what field we are currently sorted on and what direction the last sort
was in
var currentField = 0;
var currentDirection = 0;
// This is our actual data array
// Note that for this to work, dates MUST be in the form MM/DD/YYYY! Nothing else
will work!
dataArray = new Array();
dataArray[0] = new Array();
dataArray[0][0] = "100";
dataArray[0][1] = "Papa";
dataArray[0][2] = "Smurf";
dataArray[0][3] = "10/12/1999";
dataArray[1] = new Array();
dataArray[1][0] = "300";
dataArray[1][1] = "Fred";
dataArray[1][2] = "Flinston";
dataArray[1][3] = "01/12/2000";
dataArray[2] = new Array();
dataArray[2][0] = "400";
dataArray[2][1] = "Roger";
dataArray[2][2] = "Wabbit";
dataArray[2][3] = "03/05/1999";
dataArray[3] = new Array();
dataArray[3][0] = "600";
dataArray[3][1] = "Wilma";
dataArray[3][2] = "Flinston";
dataArray[3][3] = "10/15/2000";
dataArray[4] = new Array();
dataArray[4][0] = "900";
dataArray[4][1] = "Sleeping";
dataArray[4][2] = "Beauty";
dataArray[4][3] = "12/06/1990";
dataArray[5] = new Array();
dataArray[5][0] = "1000";
dataArray[5][1] = "American";
dataArray[5][2] = "Beauty";
dataArray[5][3] = "12/31/2005";
// This is called when a columm header is clicked. It determines what field we are
sorting on,
// what direction, and calls the actual sort operation
function sortBy(field) {
// Determine our sort direction
currentDirection = (field == currentField) ? !currentDirection : 0;
currentField = field;
// Call the sort operation to do the sorting
dataArray.sort(sortOperation);
// Reverse the direction if that is applicable now. We simply sort the array
irregardless
// of direction, then reverse it if that is the sort direction now.
if (currentDirection) { dataArray = dataArray.reverse(); }
// Create our output table
createTable(document.all.dataKeeper);
}
// This is the routine called to compare two elements of our array. It is the
comparison operation
// called by the built-in array sort method, it is essentially part of a bubble sort!
function sortOperation(a, b) {
// Convert to lower-case first so that text sorting is correct
var aC = a[currentField].toLowerCase();
var bC = b[currentField].toLowerCase();
// If we are now looking at dates, we need to put them in YYYYMMDD order so that the
sort works right on them
if (aC.charAt(2) == "/" && aC.charAt(5) == "/") { aC = aC.substr(6, 4) +
aC.substr(0, 2) + aC.substr(3, 2); }
if (bC.charAt(2) == "/" && bC.charAt(5) == "/") { bC = bC.substr(6, 4) +
bC.substr(0, 2) + bC.substr(3, 2); }
// If both values are numbers, we can sort them by subtracting them
if (/^(\-)?\d+(\.\d+)?$/.test(aC) && /^(\-)?\d+(\.\d+)?$/.test(bC)) { return aC -
bC; }
// If they aren't numbers, just compare them, letting ASCII do it's thing!
if (aC < bC) { return -1; }
if (aC > bC) { return 1; }
if (aC == bC) { return 0; }
}
// Create the output HTML table. We simply create one long string with all our HTML,
then output it to the
// object passed in, which happens to be a dHTML layer.
function createTable(target) {
tblSrc = "<table cellpadding=4 cellspacing=0 border=1>";
// Titles
tblSrc += "<tr>";
for (cTtl in titleArray) {
tblSrc += "<td onClick='sortBy(" + cTtl + ")'><b>" + titleArray[cTtl] + "</td>";
}
tblSrc += "</TR>";
// Data
for (dataLine in dataArray) {
tblSrc += "<tr>";
for (dataItem in dataArray[dataLine]) {
tblSrc += "<td>" + dataArray[dataLine][dataItem] + "</td>";
}
tblSrc += "</tr>";
}
// Finish
tblSrc += "</table>";
target.innerHTML = tblSrc;
}
</script>
</head>
<body onLoad="createTable(dataKeeper);">
<div id="dataKeeper" style="position:relative"></div>
</body>
</html>
Hope that helps! Let me know if you have any questions.
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
On Wed, October 20, 2004 3:13 am, nitin t said:
>
> hi ,
> suppose i am using struts based app while showing data in various columns
> and i wish to give user the choice to sort the column based on his choice
> does there is a support in struts html tags or other validator javascript
> generator so that this feature can be performed like we previously done in
> visual basic grids.
>
> Thanks
> Nitin Trivedi
>
>
>
> Nitin Trivedi
> Trainee Consultant
> M/s Hybrid Cyber Solutions Pvt Ltd.
> 95, Tarang, J.P.Nagar,
> 5th Road, Goregaon (E.)
> Mumbai - 400 063.
> Landline No.- 26864822
> Cell No.-02231204222.
> Email ID:- [EMAIL PROTECTED]
>
> ****************************************************************************
> ***************************************************************************
> This communication (including any attachments) may contain privileged or
> confidential information intended for a specific individual and purpose,
> and
> is protected by law. If you are not the intended recipient, you should
> delete this communication and/or shred the materials and any attachments
> and
> are hereby notified that any disclosure, copying, or distribution of this
> communication, or the taking of any action based on it, is strictly
> prohibited. Thank you.
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
