easyui -grid每列绑定tooltip
/**用法:*/
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的更多相关文章
- WPF使用附加属性绑定,解决data grid列绑定不上的问题
背景 需要对datagrid的列header添加自定义属性,然后绑定,并根据不同的列header绑定不同的值,传统的加扩展类太麻烦,而附加属性的特点更适用于这种场景. 1.xaml 代码 <Da ...
- 让easyui datagrid支持bootstrap的tooltip
让easyui datagrid支持bootstrap的tooltip 发表于 下午 1:53 by ylpro.net & 分类 Java. Easyui在1.3.3版本之前是不支持tool ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 列运算
jQuery EasyUI 数据网格 - 列运算 在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列.一个运算列通常包含一些从一个或多个其他列运算的值. 首先,创建一个可 ...
- ExtJs 日期相加,Grid表格列可编辑
1.日期相加: Ext.Date.add(new Date(), Ext.Date.DAY, 15) 2.Grid表格列可编辑: { header : "实际已交货量", ...
- [WinForm] DataGridView 绑定 DT && ComboBox 列绑定 Dict
一 需求介绍 一般像枚举类型的数据,我们在数据库里存储着诸如(1.2.3.4-)或者("001"."002"."003"-)此类,但是界面 ...
- C# 控制datagridview的combox属性的列绑定数据
//datagridvie列绑定list的数据 List<User> listChange = GetChange();//查询数据库内容,保存到list this.datagridvie ...
- Datagridview 列绑定
Datagridview 列绑定 dataGridView1.Columns.Clear(); dataGridView1.Columns.Add("id", "id&q ...
- easyui datagrid的列编辑
[第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去 看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第 ...
- 向GridView的模板列绑定OnClientClick的函数时出现了奇怪的问题
原文:向GridView的模板列绑定OnClientClick的函数时出现了奇怪的问题 GridView的一个模板列中的内容是按钮,需要实现以下的效果: GridView分页显示数据,点击编辑按钮(模 ...
随机推荐
- PHP5.3下加速器ZendGuardLoader安装 (LNMP/lnmpa)
PHP5.3下加速器ZendGuardLoader安装 (LNMP/lnmpa) 由于Zend新产品ZendGuardLoader的面世,Zend Optimizer已经不支持php5.3了,官方给出 ...
- ZT:没有谁的成功是横空出世
这世上,没有谁的成功是横空出世. 你看到的胸有成竹,是别人犯过错后的顿悟: 你看到的举重若轻,是别人跌过跤后的自省: 你看到的闪亮光环,是一个人咬牙走了很久的夜路,才为自己点亮的一盏灯. 你以为自己输 ...
- 引用类型之object和date详解
引用类型的值是引用类型的实例,js中的引用类型是一种数据类型,用于将数据和功能组织在一起(也可叫对象定义,因为描述一类对象具有的属性和方法) 1.Object类型 大多数引用类型都是object类型, ...
- LR打不开浏览器的解决方法
很久没用LoadRunner了,今天想复习一下,免得技能生疏,安装了一个LR11,跑一下,竟然打不开IE浏览器: 这时肯定是靠谷哥跟度娘的,经过一轮搜索,可以解决打开IE了,但录制不了解决,又 ...
- JMeter3.0配置
解压apache-jmeter-3.0.zip文件至c盘,本文解压至C:\jmeter3目录下. 桌面上选择“我的电脑”(右键),高级, 环境变量, 在“系统变量”--->“新建”, 在变量名中 ...
- Android出现“Read-only file system”解决办法
操作设备文件系统上的文件结果遇到"... Read-only file system". 解决办法: 1. 最简单的,adb remount 2. 不行的话,adb shell s ...
- 【Hibernate步步为营】--锁机制具体解释
上篇文章具体讨论了hql的各种查询方法.在讨论过程中写了代码演示样例.hql的查询方法类似于sql,查询的方法比較简单,有sql基础的开发者在使用hql时就会变得相当的简单. Hibernate在操作 ...
- JavaScript经常使用代码段
把例如以下代码增加<body>区域中: 后退 前进 <!--<input type="button" value="后退" onClic ...
- Fragment的陷阱
以前做过的一个项目,Fragment嵌套高德地图,当再次进入Fragment的时候,会出现奇怪的现象.嵌套的地图会出现滑动不动的情况,起先还以为是高德的bug呢,经过一番研究,终确定这是一个坑. 先对 ...
- 数据库对m³等特殊符号的支持
目前我只遇到过m³这个特殊符号,会影响正常使用. 比如,我在数据库中搜索: select * from table where container='10m³'; 即使数据库中对应的值,但也无法搜索出 ...