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 id='celltip'></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 就是鼠标放到单元格上有个提示的功能的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:将悬停的颜色应用在行或者单元格上

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Easyui之datagrid实现点击单元格修改单元格背景颜色

    前段时间有个需求中有点击datagrid的单元格实现某种事件,调用datagrid的onclickCell这个方法很容易实现,但是体验不好啊,完全不知道自己刚才点击的是哪个单元格,然后就尝试单击单元格 ...

  3. EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。

    由于gridpanel的单元格里的文字太多时候,都由省略号代替,就想实现如题的功能,经过反复实验,终于搞定了!直接上代码: me.on('itemmouseenter', function (view ...

  4. easyui datagrid合并相同数据的单元格。

    /** * 根据作用域填充单元格 */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(&quo ...

  5. 在JTable单元格上 加入组件,并赋予可编辑能力 [转]

    表格(单元格放置组件) 对于JTable单元格的渲染主要是通过两个接口来实现的,一个是TableCellRenderer另一个是TableCellEditor,JTable默认是用的是DefaultC ...

  6. [办公应用]如何将excel合并单元格分拆后每个单元格上仍保留数据?

    合并单元格虽然美观,但是无法进行排序.筛选等操作. 只有合并单元格拆分后才可以按常规进行统计.但是普通拆分后,excel仅保留合并单元格数据到区域左上角的单元格. 解决方案:选定多个合并单元格,应用本 ...

  7. 002-poi-excel-导出设置单元格数据校验规则、筛选功能

    一.数据验证概述 推荐以下操作在2007之后操作 1.1.查看excel的数据验证 1.进入 2.设置规则 通过验证条件允许,可以看到是每个单元格默认只成立一种条件 1.2.POI代码开发-数据验证 ...

  8. layui 鼠标悬停单元格显示全部

    {field : 'subjectId',title : '主题id',align: 'center',edit : 'text',templet:'<div><span title ...

  9. [原]界面上有几个球队名字的列表,将鼠标放到球队名字上就变为红色背景,其他球队背景颜色为白色,点击一个球队的时候就将点击的球队变为fontSize=30字体(fontSize=‘’回到默认)。

    window.onload = function () {             var uls = document.getElementById('ui').getElementsByTagNa ...

随机推荐

  1. Slony-I双机备份

    测试环境:postgresql 9.3.5,slony-I2.2.3(application stack builder提供)以下参考网上教程亲自测试总结 ---------------------- ...

  2. C# 调用浏览器打开网址

    private void button1_Click(object sender, EventArgs e) { //调用系统默认的浏览器 System.Diagnostics.Process.Sta ...

  3. MVC中,加入的一个aspx页面用到AspNetPager控件处理办法

    今天项目遇到了如题所示的问题,按照官方的案例介绍做分页,简直要奔溃了, 使用URL重写,但是page总是1,根本不跳, 不使用URL重写,又出现,第一页是 http://aa.com/view_asp ...

  4. 深入了解session

    session在web开发中是一个非常重要的概念,这个概念很抽象,很难定义,也是最让人迷惑的一个名词,也是最多被滥用的名字之一,在不同的场合,session一次的含义也很不相同.这里只探讨HTTP S ...

  5. Python新手学习基础之条件语句——elif语句

    elif语句 (相当于C语言的else if) 在Python中,当我们需要有更多的判断条件时,我们往往会使用另外一种语法表达,即使用elif: if 判断条件1: 执行语句1 elif 判断条件2: ...

  6. C 语言链表操作例程 (待完善)

    #include<stdio.h>#include<malloc.h>#include<conio.h>#include<stdlib.h>#inclu ...

  7. DataTables自定义筛选器

    /* Custom filtering function which will search data in column four between two values */ $.fn.dataTa ...

  8. 中国IC业“芯”结:IC小国真能赶追韩美日么?

    集成电路是关系到国民经济和社会发展的战略性.基础性和先导性产业,是培育发展战略性新兴产业.推动信息化和工业化深度融合的核心与基础.因此,我 国历来就十分重视集成电路产业的培育和发展,在这方面投入了大量 ...

  9. Activity切换效果(overridePendingTransition)

    在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity ...

  10. 手游与App测试如何快速转型? —— 过来人科普手游与App测试四大区别

    随着智能设备的普及和移动互联网的兴起,各家互联网巨头纷纷在往移动端布局和转型,同时初创的移动互联网公司也都盯着这个市场希望分一杯羹.在这个大环境下,互联网的重心已经慢慢从Web端转向了移动端,而移动端 ...