关于GRID里面的单元格提示功能

lovewash88 · 发表于 2013-9-5 09:16:24

本帖最后由 XiaoQLuo 于 2013-9-5 14:41 编辑

如下面的图片，GRID里面的单元格提示是根据单元格的值来的，但是现在我有一个单元格是用HTML格式写的，我需要不同的图标显示不同的提示信息，怎么做呢？
我的HTML是：

//Grid操作列页面Html渲染
bomActivity.grid1_operationRender = function(event){
debugger;
//删除行图片
var urlDelete = justep.Request.convertURL("/UI/system/images/standardToolbar/standard/remove.gif", true);
//查看材料基础信息图片
var urlInfo = justep.Request.convertURL("/UI/system/images/standardToolbar/standard/redirect.gif", true);
//高级录入（按颜色录入数据）图片
var urlInput = justep.Request.convertURL("/UI/system/images/standardToolbar/standard/edit.gif", true);
var html = "<a href='#' title='删除该行材料'><img src='" + urlDelete + "' height='15px' /></a> "+
"<a href='#' title='查看材料基础信息'><img src='" + urlInfo + "' height='15px'/></a> "+
"<a href='#' title='按颜色录入信息'><img src='" + urlInput + "' height='15px'/></a> ";
return html;
};

复制代码

cdzwdhh · 发表于 2013-9-5 09:21:32

你试试看吧title属性写在图片上看看，

lovewash88 · 发表于 2013-9-5 09:30:06

cdzwdhh 发表于 2013-9-5 09:21
你试试看吧title属性写在图片上看看，

没有用的，被X5的提示覆盖了

fpj · 发表于 2013-9-5 09:31:49

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>文字提示</title>
<script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">

</style>
<script type="text/javascript">
//<![CDATA[
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
$("body").append(tooltip);//把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
//]]>
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的jquery超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的jquery超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">这是html默认的提示1.</a></p>
<p><a href="#" title="这是自带提示2.">这是html默认的提示2.</a> </p>
</body>
</html>

huangyue · 发表于 2013-9-5 09:53:07

var html = "<a href='#' title='删除该行材料'><img src='" + urlDelete + "' height='15px' />33</a> "+
"<a href='#' title='查看材料基础信息'><img src='" + urlInfo + "' height='15px'/>11</a> "+
"<a href='#' title='按颜色录入信息'><img src='" + urlInput + "' height='15px'/>22</a> ";

这样看看有没有

lovewash88 · 发表于 2013-9-5 10:28:06

fpj 发表于 2013-9-5 09:31
文字提示

那怎么把这段JS代码弄到我的X5里面去呢，我现在是把你的这段代码写在model1Load的事件里面，但是没有效果

bomActivity.model1Load = function(event){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
$("body").append(tooltip);//把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
};

复制代码

XiaoQLuo · 发表于 2013-9-5 13:49:37

本帖最后由 XiaoQLuo 于 2013-9-5 14:00 编辑

通过接管grid的onCellHint事件完成

//定义变量记录鼠标所指的元素
var cell_a = null;

//html列渲染代码，__title标示提示信息
grid.grid1_fTextRender = function(event){
var html = "<a href='#' onmouseover='cell_a=this' __title='删除该行材料'>删除</a> "
+"<a href='#' onmouseover='cell_a=this' __title='查看材料基础信息'>查看</a> "
+"<a href='#' onmouseover='cell_a=this' __title='按颜色录入信息'>录入</a>";
return html;
};

//接管grid的事件onCellHint,两个条件event.colId==html列名
grid.grid1CellHint = function(event){
if(event.colId=='fText' && cell_a) return $(cell_a).attr('__title');
};

lovewash88 · 发表于 2013-9-5 14:22:29

XiaoQLuo 发表于 2013-9-5 13:49
通过接管grid的onCellHint事件完成

//定义变量记录鼠标所指的元素

果然是高手，一下子解决了问题，真棒，请结贴！！！

		自动登录	找回密码
密码			注册

[结贴] 关于GRID里面的单元格提示功能

浏览过的版块