`
bosschen
  • 浏览: 191780 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

display标签扩展:鼠标经过行变色功能[超级简单、通用]

 
阅读更多

/***********本人原创,欢迎转载,转载请保留本人信息*************/ 作者:wallimn 电邮:wallimn@sohu.com 时间:2009-09-24 博客:http://wallimn.iteye.com 网络硬盘:http://wallimn.ys168.com /***********文章发表请与本人联系,作者保留所有权利*************/   现在网页上的表格,当鼠标经过的行高亮显示是个很不错的功能。display标签是个很不错的标签,但是,不支持鼠标经过行变色功能,看了看displaytag的源码,它甚至没有给人留下直接可用的扩展接口。   当然,修改源码可以实现,但我一直认为如不是实在迫不得以,不要修改第三方插件源码,会给今后的升级带来问题。   今天看了看decorator(包装器?、修饰器?)的相关知识,只有有限几个可用的回调接口,反复看了几遍apidoc及源码。受SQL注入思想的启发,找到了一个很极为巧妙有创意的方法,通过自定义decorator来实现display标签生成的表格鼠标经过变色功能。   代码很简单,共两部分,全部贴在下面: 一、java代码 Java代码

package com.wallimn.gyz.util;

import org.displaytag.decorator.TableDecorator;

/**
 * 超级简单的实现displaytag标签表格行鼠标经过变色功能<br/>
 * 博客:http://wallimn.iteye.com,转载请保留此信息!!<br/>
 * 编码:wallimn 时间:2009-9-24 下午05:05:30<br/>
 * 版本:V1.0<br/>
 */
public class OverOutWrapper extends TableDecorator {
	public OverOutWrapper(){
		super();
	}
	@Override
	public String addRowId() {
		return "i_d\" onmouseover=\"if (typeof(window.m_over)=='function') window.m_over(this);\" onmouseout=\"if (typeof(window.m_out)=='function') window.m_out(this);\" title=\"博客:http://wallimn.iteye.com";
	}
}

 二、jsp测试代码 

Jsp代码
<script type="text/javascript">
	function m_over(tr){
		tr.className=tr.className + " " + "trmo";
	}
	function m_out(tr){
		var cn = tr.className.replace(/\s+trmo/,'');
		tr.className = cn;
	}
</script>
<style type="text/css">
	.trmo{
		background-color:#FFCCFF !important;
	}
</style>
<h3>隔壁老王(http://wallimn.iteye.com)</h3>
<display:table name="${items}" id="row" class="gyz dtt" decorator="com.wallimn.gyz.util.OverOutWrapper">
    <display:column property="dm" title="代码" style="width:60px" />
    <display:column property="mc" title="名称"/>
</display:table>
 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics