easyUI的doCellTip 就是鼠标放到单元格上有个提示的功能
2014-12-19 10:15
288 查看
1:这个东西是我抄的(抄的哪儿的我就想不起来了- -)弹出的窗没有样式 不是很好看
$('#dg').datagrid('doCellTip',{'max-width':'100px'});
}
function cancelCellTip(){
$('#dg').datagrid('cancelCellTip');
}
onLoadSuccess:function(data){
$('#dg').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000});
}
就这么着吧!!!
//扩展 $.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; } }); } }); 调用方法1: function doCellTip(){
$('#dg').datagrid('doCellTip',{'max-width':'100px'});
}
function cancelCellTip(){
$('#dg').datagrid('cancelCellTip');
}
调用方法2:
onLoadSuccess:function(data){
$('#dg').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000});
}
就这么着吧!!!
相关文章推荐
- EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
- EXT 鼠标放到GridPanel的行的某一个单元格显示tip
- EasyUI datagrid 列包含超链接以及鼠标经过提示单元格内容
- 扩展:easyui datagrid鼠标经过提示单元格内容
- easyui扩展:datagrid鼠标经过提示单元格内容(6)
- easyUi datagrid鼠标经过提示单元格内容
- 一个列用render渲染的时候,如果列宽度不够,内容多出的部分会被隐藏,无法显示。这时需要一个鼠标滑过提示全部内容的tip功能。
- Android studio 设置函数功能悬浮提示(鼠标放到上班提示参数和功能)
- Eclipse 调试时打开变量的鼠标悬浮提示功能
- eclipse(MyEclipse)关闭鼠标移动提示代码功能和自定义快捷键代码提示设置的...
- 鼠标放到图片上会滑出提示文字代码
- JFreeChart当鼠标停留在热点提示自定义信息功能
- POI设置单元格内容下拉框选择和单元格提示功能
- Extjs Grid 鼠标位置tip提示
- 扩展:datagrid鼠标经过提示单元格内容
- 在CTreeView中给CtreeCtrl增加提示(tip)的功能
- VC中鼠标经过按钮弹出功能提示(TIPS)
- 鼠标放到控件上 DIV悬浮提示效果(四种)
- 为gridview的每个单元格添加鼠标悬停提示文本(tooltip)
- Extjs Grid 鼠标位置tip提示