displayTag 给行加事件 row event

zgqynx

浏览: 1371287 次
性别:
来自: 北京

最近访客更多访客>>

723499280

xx5333

zhangmin53

zhangyy130

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

DisplayTag

JavaScript UP JSP

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.

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";
    }
}

分享到：

DisplayTagAndHibernatePagination 分页 | 项目不断，时间很紧，如何找时间看书呢？

2008-05-09 21:34
浏览 4131
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论