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

/**
* 扩展两个方法
*/
$.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': '2px',
'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);
//showTip(options, this, e);
options.tipDelayTime = setTimeout(function () {
showTip(options, that, e);
}, params.delay);
}
});
});

}

});
},
/**
* 关闭消息提示功能
*
* @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;
}
});
}
});

easyui -grid每列绑定tooltip的更多相关文章

  1. WPF使用附加属性绑定,解决data grid列绑定不上的问题

    背景 需要对datagrid的列header添加自定义属性,然后绑定,并根据不同的列header绑定不同的值,传统的加扩展类太麻烦,而附加属性的特点更适用于这种场景. 1.xaml 代码 <Da ...

  2. 让easyui datagrid支持bootstrap的tooltip

    让easyui datagrid支持bootstrap的tooltip 发表于 下午 1:53 by ylpro.net & 分类 Java. Easyui在1.3.3版本之前是不支持tool ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 列运算

    jQuery EasyUI 数据网格 - 列运算 在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列.一个运算列通常包含一些从一个或多个其他列运算的值. 首先,创建一个可 ...

  4. ExtJs 日期相加,Grid表格列可编辑

    1.日期相加: Ext.Date.add(new Date(), Ext.Date.DAY, 15) 2.Grid表格列可编辑: {    header : "实际已交货量",   ...

  5. [WinForm] DataGridView 绑定 DT && ComboBox 列绑定 Dict

    一  需求介绍 一般像枚举类型的数据,我们在数据库里存储着诸如(1.2.3.4-)或者("001"."002"."003"-)此类,但是界面 ...

  6. C# 控制datagridview的combox属性的列绑定数据

    //datagridvie列绑定list的数据 List<User> listChange = GetChange();//查询数据库内容,保存到list this.datagridvie ...

  7. Datagridview 列绑定

    Datagridview 列绑定 dataGridView1.Columns.Clear(); dataGridView1.Columns.Add("id", "id&q ...

  8. easyui datagrid的列编辑

    [第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去   看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第 ...

  9. 向GridView的模板列绑定OnClientClick的函数时出现了奇怪的问题

    原文:向GridView的模板列绑定OnClientClick的函数时出现了奇怪的问题 GridView的一个模板列中的内容是按钮,需要实现以下的效果: GridView分页显示数据,点击编辑按钮(模 ...

随机推荐

  1. json字符串 与 json对象 的相互转换

    var obj=JSON.parse(jsonstr); // 将json字符串转换成json对象 var str=JSON.stringify(jsonobj); // 将json对象转换成json ...

  2. python版本管理--pyenv

    python版本环境管理 下载依赖 yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readli ...

  3. 【Linux】替换文本中的字符

    替换单个文本中的字符,有两种方法,如下详解 VIM替换 打开文件 vim test.txt 替换 :%s/原字符串/替换字符串/gg 直接替换 sed -i 's/原字符串/替换字符串/g' `ls ...

  4. H5 Canvas | 基本操作

    <canvas> - 定义使用 JavaScript 的图像绘制. p.s. ×150. getContext是DOM对象的方法,也就是原生js方法,不能用jQuery对象直接获取 ——— ...

  5. Redis使用经验

    首先,缓存的对象有三种: 1:数据库中单条的的数据(以表名跟id作为key永久保存到Redis),在有更新的地方都要更新缓存(不适用于需要经常更新的数据): 2:对于一些不分页,不需要实时(需要多表查 ...

  6. 在Docker里使用(支持镜像继承的)supervisor管理进程(转)

    这篇文章是受 dockboard 之托帮忙翻译的与 docker 有关的技术文章.译自 Using Supervisor with Docker to manage processes (suppor ...

  7. 理解lvalue和rvalue

    今天看C++模板的资料,里面说到lvalue,rvalue的问题,这个问题以前也看到过,也查过相关资料,但是没有考虑得很深,只知道rvalue不能取地址,不能赋值等等一些规则.今天则突然有了更深层次的 ...

  8. 让网页自动调用双核浏览器的极速模式(<meta name="renderer" content="webkit">)

    背景:最近做了一个网站,传单服务器之后,每次打开都是乱码,不对啊,我在本地测得明明是排版很整齐啊,然后发现,360用的是“兼容模式”打开的,这就尴尬了,用户一打开就是乱码,这用户体验得有多差!用户可不 ...

  9. C#音视频网络流解码:H264视频和ACC音频

    下面两种方式是直接翻译过来的,还有问题,比如指针的使用和值的传入.考虑C#和C++的差异,还是要抱着怀疑的态度去看待,不一定是对的. H264视频解码网络流: using FFmpeg.AutoGen ...

  10. jquery.validate.js 验证框架详解

    项目中遇到这个js框架 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...