现在的位置: 首页 > 综合 > 正文

displayTag 给行加事件

2012年02月15日 ⁄ 综合 ⁄ 共 4401字 ⁄ 字号 小 中 大 ⁄ 评论关闭
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.

  1. function highlightTableRows(tableId) {   
  2.     var previousClass = null;   
  3.     var table = document.getElementById(tableId);   
  4.     var tbody = table.getElementsByTagName("tbody")[0];   
  5.     var rows = tbody.getElementsByTagName("tr");   
  6.     // add event handlers so rows light up and are clickable   
  7.     for (i=0; i < rows.length; i++) {   
  8.         rows[i].onmouseover = function() { previousClass=this.className;this.className+=' over' };   
  9.         rows[i].onmouseout = function() { this.className=previousClass };   
  10.         rows[i].onclick = function() {   
  11.             var cell = this.getElementsByTagName("td")[0];   
  12.             if (cell.getElementsByTagName("a").length > 0) {   
  13.                 var link = cell.getElementsByTagName("a")[0];   
  14.                 if (link.onclick) {   
  15.                     call = link.getAttributeValue("onclick");   
  16.                     // this will not work for links with onclick handlers that return false   
  17.                     eval(call);   
  18.                 } else {   
  19.                   location.href = link.getAttribute("href");   
  20.                 }   
  21.                 this.style.cursor="wait";   
  22.             }   
  23.         }   
  24.     }   
  25. }  

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.

  1. /**  
  2.  * This JavaScript performs the task of highlighting a row in a displayTag table.  
  3.  * The javascript is called by adding the following line in your JSP page after the  
  4.  * declaration of your display tag  
  5.  * <script type="text/javascript">highlightTableRows("searchResultTO");</script>  
  6.  * An example is as follows:  
  7.  * <html>  
  8.  * <body>  
  9.  * <displaytag:table name="${sessionScope.searchResultList}" id="searchResultTO"/>  
  10.  * <script type="text/javascript">highlightTableRows("searchResultTO");</script>  
  11.  * </body>  
  12.  * </html>  
  13.  */  
  14.   
  15.   
  16.   
  17. /**  
  18.  * This function after the displayTag table has been created adds a onclick event  
  19.  * handler to each row in the table. The onclick event will first reset all rows to  
  20.  * the default background color which is white and then assign the clicked row to the  
  21.  * highlight color which is a light green.  
  22.  */  
  23. function highlightTableRows(tableId) {   
  24.     var previousClass = '';   
  25.     var table = document.getElementById(tableId);   
  26.     var tbody = table.getElementsByTagName("tbody")[0];   
  27.     var rows = tbody.getElementsByTagName("tr");   
  28.     // add event handlers so rows light up and are clickable   
  29.     for (i=0; i < rows.length; i++) {   
  30.         rows[i].onmouseover = function() {   
  31. this.style.cursor="hand";   
  32. };   
  33.   
  34. rows[i].onmouseout = function() {   
  35. this.style.cursor='';   
  36. };   
  37.   
  38.         rows[i].onclick = function() {   
  39. //reset all styles to blank for all rows   
  40. resetStylesAroundRow(this);   
  41. this.style.backgroundColor = "#74BAB7";   
  42.             var cell = this.getElementsByTagName("td")[0];   
  43.             if (cell.getElementsByTagName("a").length > 0) {   
  44.                 var link = cell.getElementsByTagName("a")[0];   
  45.                 if (link.onclick) {   
  46.                     call = link.getAttributeValue("onclick");   
  47.                     // this will not work for links with onclick handlers that return false   
  48.                     eval(call);   
  49.                 } else {   
  50.                   location.href = link.getAttribute("href");   
  51.                 }   
  52.                 this.style.cursor="wait";   
  53.             }   
  54.         };   
  55.     }   
  56. }   
  57.   
  58. /**  
  59.  * Resets the table rows back to the default color.  
  60.  */  
  61. function resetStylesAroundRow(row) {   
  62.     var previousClass = '';   
  63.     var table = row.parentElement.parentElement;   
  64.     var tbody = table.getElementsByTagName("tbody")[0];   
  65.     var rows = tbody.getElementsByTagName("tr");   
  66.     for (i=0; i < rows.length; i++) {   
  67.         rows[i].style.backgroundColor = "white";   
  68.     }   
  69. }  
-----------------------------------------------------------------------------
JavaScript与displayTag标签的合作 -- 操作表头
http://rmn190.javaeye.com/blog/257135
 
http://www.devx.com/webdev/10MinuteSolution/31020/0/page/3
 
 
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞