实现代码:
- /**
- * 扩展两个方法
- */
- $.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});
- }
效果演示:
http://www.easyui.info/easyui/demo/datagrid/066.html
更新日志
2013-05-25
Easyui 1.3.3版本推出了tooltip,可以基于tooltip更为容易地实现该功能,请参见《基于1.3.3版本tooltip的datagrid单元格tip实现》
管理员 世纪之光 : 2012年12月27日16:24:30 地下1层
管理员 世纪之光 : 2012年12月28日13:47:34 地下3层
管理员 世纪之光 : 2014年07月19日22:34:21 地下1层
管理员 世纪之光 : 2014年08月04日09:24:14 地下1层
管理员 世纪之光 : 2014年08月07日20:46:21 地下3层
管理员 世纪之光 : 2014年10月27日21:43:35 地下1层
管理员 世纪之光 : 2015年10月28日09:34:38 地下1层
管理员 世纪之光 : 2016年03月19日15:36:24 地下3层
管理员 世纪之光 : 2015年11月06日13:31:03 地下1层