easyui添加删除tooltip
/**
* 扩展两个方法
*/
$.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添加删除tooltip的更多相关文章
- EasyUI datagrid 删除的时候无法正确找到重复记录row index的问题
EasyUI datagrid 删除的时候无法正确找到重复记录row index的问题: 如果无法正确找到重复记录的row index,就需要进行注意添加的时候所进行的 操作:如果添加的时候就是添加的 ...
- WPF下的Richtextbox中实现表格合并,添加删除行列等功能
.Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...
- 编辑 Ext 表格(一)——— 动态添加删除行列
一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除. (1) 动态添加表格的行 gridS ...
- Angular-表单动态添加删除
angular本身不允许去操作DOM,在angular的角度来说,所有操作都以数据为核心,剩下的事情由angular来完成.所以说,想清楚问题的根源,解决起来也不是那么困难. 前提 那么,要做的这个添 ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [CentOS]添加删除用户
摘要 在安装CentOS的时候,我们只设置了root,类似windows的超级管理员.当然我们在工作的时候,为了安全考虑,不可能对外开发root,一方面是从安全的角度,另一方面也是方便管理. 添加删除 ...
- iOS仿网易新闻栏目拖动重排添加删除效果
仿网易新闻栏目选择页面的基本效果,今天抽了点时间教大家如何实现UICollectionView拖动的效果! 其实实现起来并不复杂,这里只是基本的功能,没有实现细节上的修改,连UI都是丑丑的样子,随手画 ...
- 百度地图API示例之添加/删除工具条、比例尺控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- Android 动态添加删除ExpandableListView的item的例子
这个例子可以学习到如下几点: 1.通过自定义Dialog(单独布局的xml文件进行弹出显示) 2.通过menu点击监听添加,删除view中的items 3.点击ExpandableListView中g ...
随机推荐
- angularjs中ng-repeat的使用
第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-de ...
- 异步任务,HttpContext.Current为null解决办法
最近在开发一个后台管理系统项目,为了提高登录的速度,就把记录登录日志放到一个异步任务里面. Action taskAction = () => { SaveLog(); }; Task task ...
- react-keeper
通过 react-keeper 替换掉 react-router 解决 页面缓存问题.
- ES6 class 基本使用
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- Patterns-Observer
http://book.javanb.com/java-design-patterns/index.html Java深入到一定程度,就不可避免的碰到设计模式(design pattern)这一概念, ...
- UNIX网络编程卷2进程间通信读书笔记(一)—概述
http://blog.chinaunix.net/uid-12868584-id-92807.html 写的灰常好,我就转载了 一.什么是进程间通信 IPC是进程间通信的简称,所谓进程通信,就是不同 ...
- Ubuntu下开启root登陆--并开启SSH登录验证
Ubuntu下开启root登陆亲手安装过Ubuntu的童鞋都知道,默认安装只会添加一个普通用户名和密码,而超级用户权限则是利用sudo命令来执行.在Ubuntu下使用root登陆或者在shell中用s ...
- Android 自己定义View (四) 视频音量调控
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24529807 今天没事逛eoe,看见有人求助要做一个以下的效果,我看以下一哥们说 ...
- Python OS 文件
Python OS 文件: 1 os.access(path, mode) 检验权限模式 2 os.chdir(path) 改变当前工作目录 3 os.chflags(path, flags) 设置路 ...
- 调用Android自带日历功能
Android手机配备有一个内置的日历应用程序.第三方应用程序可以利用日历内容提供商接口读取用户的日历信息和安排在日历新的事件.这个日历可以直接同步用户的谷歌日历. 不幸的是,没有文档和Android ...