displayTag 给行加事件 row event
displayTag 给行加事件 row event
http://jira.codehaus.org/browse/DISPL-92
这是偶然间找到的一般文章，有此需求的可以看看
Here's something you can use while you wait for this feature to be added.
I put this in a global .js file and then call it after my </display:table> using:
<script type="text/javascript">highlightTableRows("userList");</script>
Where my table has an id:
<display:table id="userList">
===============================================================================
I have done a similar thing as above but expanded on it. You can only highlight one row. We wanted to do that coz we only we wanted to apply some kind of action to that row only.
http://jira.codehaus.org/browse/DISPL-92
这是偶然间找到的一般文章，有此需求的可以看看
Here's something you can use while you wait for this feature to be added.
function highlightTableRows(tableId) {
var previousClass = null;
var table = document.getElementById(tableId);
var tbody = table.getElementsByTagName("tbody")[0];
var rows = tbody.getElementsByTagName("tr");
// add event handlers so rows light up and are clickable
for (i=0; i < rows.length; i++) {
rows[i].onmouseover = function() { previousClass=this.className;this.className+=' over' };
rows[i].onmouseout = function() { this.className=previousClass };
rows[i].onclick = function() {
var cell = this.getElementsByTagName("td")[0];
if (cell.getElementsByTagName("a").length > 0) {
var link = cell.getElementsByTagName("a")[0];
if (link.onclick) {
call = link.getAttributeValue("onclick");
// this will not work for links with onclick handlers that return false
eval(call);
} else {
location.href = link.getAttribute("href");
}
this.style.cursor="wait";
}
}
}
}
I put this in a global .js file and then call it after my </display:table> using:
<script type="text/javascript">highlightTableRows("userList");</script>
Where my table has an id:
<display:table id="userList">
===============================================================================
I have done a similar thing as above but expanded on it. You can only highlight one row. We wanted to do that coz we only we wanted to apply some kind of action to that row only.
/**
* This JavaScript performs the task of highlighting a row in a displayTag table.
* The javascript is called by adding the following line in your JSP page after the
* declaration of your display tag
* <script type="text/javascript">highlightTableRows("searchResultTO");</script>
* An example is as follows:
* <html>
* <body>
* <displaytag:table name="${sessionScope.searchResultList}" id="searchResultTO"/>
* <script type="text/javascript">highlightTableRows("searchResultTO");</script>
* </body>
* </html>
*/
/**
* This function after the displayTag table has been created adds a onclick event
* handler to each row in the table. The onclick event will first reset all rows to
* the default background color which is white and then assign the clicked row to the
* highlight color which is a light green.
*/
function highlightTableRows(tableId) {
var previousClass = '';
var table = document.getElementById(tableId);
var tbody = table.getElementsByTagName("tbody")[0];
var rows = tbody.getElementsByTagName("tr");
// add event handlers so rows light up and are clickable
for (i=0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.style.cursor="hand";
};
rows[i].onmouseout = function() {
this.style.cursor='';
};
rows[i].onclick = function() {
//reset all styles to blank for all rows
resetStylesAroundRow(this);
this.style.backgroundColor = "#74BAB7";
var cell = this.getElementsByTagName("td")[0];
if (cell.getElementsByTagName("a").length > 0) {
var link = cell.getElementsByTagName("a")[0];
if (link.onclick) {
call = link.getAttributeValue("onclick");
// this will not work for links with onclick handlers that return false
eval(call);
} else {
location.href = link.getAttribute("href");
}
this.style.cursor="wait";
}
};
}
}
/**
* Resets the table rows back to the default color.
*/
function resetStylesAroundRow(row) {
var previousClass = '';
var table = row.parentElement.parentElement;
var tbody = table.getElementsByTagName("tbody")[0];
var rows = tbody.getElementsByTagName("tr");
for (i=0; i < rows.length; i++) {
rows[i].style.backgroundColor = "white";
}
}