/**
* 扩展两个方法
*/
$.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;
}
});
}
});
使用事项:
扩展了两个方法,功能的实现基于jQuery的delegate函数,所以请用1.4.2版本之后的jQuery,可以自定义消息框的样式,将参数传入doCellTip方法即可。
onLoadSuccess:function(data){
$('#test').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000});
}
转载来至:[url] http://www.easyui.info/archives/796.html[/url]
分享到:
相关推荐
ASP.NET应用:DataGrid使用最佳实践(ASP.NET应用:DataGrid使用最佳实践代码)
ASP.NET应用:DataGrid使用最佳实践
FLEX4 s:dataGrid单元格弹出可文本,就是单击单元格弹出自己定义的一个组件,
ASP.NET应用:DataGrid使用最佳实践视频(高清晰,适合初学者)
Datagrid键盘事件响应
NULL 博文链接:https://tongqiuyan.iteye.com/blog/1214121
利用richfaces的组件显示数据,有效,方便,各位夺下
NULL 博文链接:https://tongqiuyan.iteye.com/blog/1217727
DataGrid双击事件&取值 请用vs2012打开
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
datagrid设行背景色示例,提供了继承好的datagrid子类,
在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了
在Silverlight中通过ItemsSource给DataGrid赋值
主要介绍了C#实现给DataGrid单元行添加双击事件的方法,较为详细的分析了C#给DataGrid单元添加双击事件的步骤及相关实现代码,具有一定参考借鉴价值,需要的朋友可以参考下
datagrid curentchange事件
flex中的datagrid的分页定位以及高亮显示
datagrid自定义列,这是一个不错的例子,对爱好C#的同学们,可以参考参考
原理就是ArrayCollection的filterFunction的使用。是根据老外一个帖子改的,其他下载地址在 :http://www.zuidaima.com/share/1714555305004032.htm
axui-datagrid 演示: : 安装npm install axui-datagrid跑步git clone https://github.com/jsdevkr/axui-datagrid.gitcd axui-datagridnpm inpm start特征大数据冻结行/列多头加载中 行选择器 内联编辑 足部总结 ...