EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容_jquery

1:这个东西是我抄的(抄的哪儿的我就想不起来了- -)弹出的窗没有样式 不是很好看

//扩展
$.extend($.fn.datagrid.methods, {
/**
* 开打提示功能
* @param {} jq
* @param {} params 提示消息框的样式
* @return {}
*/
doCellTip : function(jq, params) {
function showTip(data, td, e) {
if ($(td).text() == "")
return;
data.tooltip.text($(td).text()).css({
top : (e.pageY + 10) + 'px',
left : (e.pageX + 20) + 'px',
'z-index' : $.fn.window.defaults.zIndex,
display : 'block'
});
};
return jq.each(function() {
var grid = $(this);
var options = $(this).data('datagrid');
if (!options.tooltip) {
var panel = grid.datagrid('getPanel').panel('panel');
var defaultCls = {
'border' : '1px solid #333',
'padding' : '1px',
'color' : '#333',
'background' : '#f7f5d1',
'position' : 'absolute',
'max-width' : '200px',
'border-radius' : '4px',
'-moz-border-radius' : '4px',
'-webkit-border-radius' : '4px',
'display' : 'none'
}
var tooltip = $("<div></div>").appendTo('body');
tooltip.css($.extend({}, defaultCls, params.cls));
options.tooltip = tooltip;
panel.find('.datagrid-body').each(function() {
var delegateEle = $(this).find('> div.datagrid-body-inner').length
? $(this).find('> div.datagrid-body-inner')[0]
: this;
$(delegateEle).undelegate('td', 'mouseover').undelegate(
'td', 'mouseout').undelegate('td', 'mousemove')
.delegate('td', {
'mouseover' : function(e) {
if (params.delay) {
if (options.tipDelayTime)
clearTimeout(options.tipDelayTime);
var that = this;
options.tipDelayTime = setTimeout(
function() {
showTip(options, that, e);
}, params.delay);
} else {
showTip(options, this, e);
}
},
'mouseout' : function(e) {
if (options.tipDelayTime)
clearTimeout(options.tipDelayTime);
options.tooltip.css({
'display' : 'none'
});
},
'mousemove' : function(e) {
var that = this;
if (options.tipDelayTime) {
clearTimeout(options.tipDelayTime);
options.tipDelayTime = setTimeout(
function() {
showTip(options, that, e);
}, params.delay);
} else {
showTip(options, that, e);
}
}
});
});
}
});
},
/**
* 关闭消息提示功能
* @param {} jq
* @return {}
*/
cancelCellTip : function(jq) {
return jq.each(function() {
var data = $(this).data('datagrid');
if (data.tooltip) {
data.tooltip.remove();
data.tooltip = null;
var panel = $(this).datagrid('getPanel').panel('panel');
panel.find('.datagrid-body').undelegate('td',
'mouseover').undelegate('td', 'mouseout')
.undelegate('td', 'mousemove')
}
if (data.tipDelayTime) {
clearTimeout(data.tipDelayTime);
data.tipDelayTime = null;
}
});
}
});

调用方法1:

function doCellTip(){
$('#dg').datagrid('doCellTip',{'max-width':'100px'});
}
function cancelCellTip(){
$('#dg').datagrid('cancelCellTip');
}

调用方法2:

onLoadSuccess:function(data){
$('#dg').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000});
}

以上所述是小编给大家介绍的EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索easyui
docelltip
easyui docelltip、easyui tip、easyui datagrid tip、easyui tree tip、easyui tipposition,以便于您获取更多的相关知识。

时间: 2024-11-09 00:59:31

EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容_jquery的相关文章

鼠标移动到某个单元格上后,整个列都变色的实现方法_表单特效

                        [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 以上代码可以实现鼠标移动到单元格上,单元格变色,现在我想实现鼠标移动到某个单元格上后,整个列都变色不知道可以不可以实现呢? 如何定义表格的鼠标隔列变色行为 当鼠标经过时希望实现隔列变色(最好是反色) ,效果示例如下: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 代码已经帖上来,现在鼠标移动到单元格变色 phx.rows[i].cells[j].onmouseover=fun

怎么设置EXT4 GRID鼠标悬停在列上,弹出提示层显示列内的内容?

问题描述 RT,哪一个知道,找了好久了没搞定!--------------------------------------------鼠标放到某一行只能提示固定列,方法如下:listeners: { render: function(g) { //g.on("itemmouseenter", function(grid, row, col) { g.on("itemmouseenter", function(view,record,mode,index,e) { g

jquery easyui datagrid 只有部分列的单元格调用单击单元格事件

问题描述 jquery easyui datagrid 只有部分列的单元格调用单击单元格事件 jquery easyui datagrid 只有部分列的单元格调用单击单元格事件. 比如有姓名,年龄,性别3列.我要点击姓名下的单元格执行一些方法,但点击年龄和性别下的单元格则不执行方法 解决方案 http://www.cnblogs.com/youring2/archive/2013/03/01/2938661.html 解决方案二: EasyUI Datagrid 自定义列.Foolter及单元格

如何判断鼠标单击的单元格相对于单元格所在行的索引值

如何判断鼠标单击的单元格相对于单元格所在行的索引值 解决思路:        利用单元格的cellIndex属性即可实现 具体步骤: 代码示例: <table width="200" height="30" border="1">   <tr>     <td onClick="alert(this.cellIndex)">demo</td>     <td onClick

Excel2007在多个单元格中输入相同的内容和公式

  很多时候我们需要在Excel中多个单元格里面输入相同的数值,而且这些单元格可能是多个不相邻的位置,若一个一个手动输入那简直是太浪费时间了,有木有什么更好的方法可以一次性在这些单元格中输入相同的内容呢?本章就为大家详细讲解在Excel中如何在多个单元格中输入相同的内容和公式技巧! 实例如下,本次操作版本为Excel2007,此方法适应于各个版本. ①首先,选中需要输入相同内容的单元格.按"Ctrl + 鼠标左键"点选多个单元格; ②然后在最后一个选中的单元格中输入内容,如这里我输入&

excel表-poi如何判断excel单元格为合并单元格

问题描述 poi如何判断excel单元格为合并单元格 今天在用poi读取excel表格的时候发现使用cell.getArrayFormulaRange()并不能返回这个单元格的边界.请问该如何判断单元格为合并单元格并获取合并单元格的行数列数

鼠标放到图片上慢慢变大

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效观止|www.jscode.cn| --- 鼠标放到图片上慢慢变大,移开后图片又慢慢变小</title>   </head>   <body> <img id=MainImg onmouse

如何在一个Excel单元格内输入多行内容

有时候,我们想在一个Excel单元格中输入多行内容,可以根据不同情况选择下面的方法来实现: 方法一:如果有大量的单元格需要这样做,采取此种设置格式的方法:选中需要这种格式的单元格,执行"格式→单元格"命令,打开"单元格格式"对话框(如图),切换到"对齐"标签下,选中"自动换行"选项,确定返回即可. 以后,在此类单元格中输入超过列宽的字符时,系统自动按列宽分多行进行排列. 方法二:如果只有少量单元格需要这样做,采取此种手动的方法

echart-Echart 世界地图 鼠标放到地图上,显示国家不准确,怎么修改呢?

问题描述 Echart 世界地图 鼠标放到地图上,显示国家不准确,怎么修改呢? Echart 世界地图 鼠标放到地图上,显示国家不准确,怎么修改呢? 解决方案 http://www.mamicode.com/info-detail-915793.html