扩展:datagrid鼠标经过提示单元格内容
2015-03-24 14:02
387 查看
$.extend($.fn.datagrid.methods, { /** * 开打提示功能 * @param {} jq * @param {} params 提示消息框的样式 * @return {} */ doCellTip:function (jq, params) { function showTip(showParams, td, e, dg) { //无文本,不提示。 if ($(td).text() == "") return; params = params || {}; var options = dg.data('datagrid'); showParams.content = '<div class="tipcontent">' + showParams.content + '</div>'; $(td).tooltip({ content:showParams.content, trackMouse:true, position:params.position, onHide:function () { $(this).tooltip('destroy'); }, onShow:function () { var tip = $(this).tooltip('tip'); if(showParams.tipStyler){ tip.css(showParams.tipStyler); } if(showParams.contentStyler){ tip.find('div.tipcontent').css(showParams.contentStyler); } } }).tooltip('show'); }; return jq.each(function () { var grid = $(this); var options = $(this).data('datagrid'); if (!options.tooltip) { var panel = grid.datagrid('getPanel').panel('panel'); 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[field]', { 'mouseover':function (e) { //if($(this).attr('field')===undefined) return; var that = this; var setField = null; if(params.specialShowFields && params.specialShowFields.sort){ for(var i=0; i<params.specialShowFields.length; i++){ if(params.specialShowFields[i].field == $(this).attr('field')){ setField = params.specialShowFields[i]; } } } if(setField==null){ options.factContent = $(this).find('>div').clone().css({'margin-left':'-5000px', 'width':'auto', 'display':'inline', 'position':'absolute'}).appendTo('body'); var factContentWidth = options.factContent.width(); params.content = $(this).text(); if (params.onlyShowInterrupt) { if (factContentWidth > $(this).width()) { showTip(params, this, e, grid); } } else { showTip(params, this, e, grid); } }else{ panel.find('.datagrid-body').each(function(){ var trs = $(this).find('tr[datagrid-row-index="' + $(that).parent().attr('datagrid-row-index') + '"]'); trs.each(function(){ var td = $(this).find('> td[field="' + setField.showField + '"]'); if(td.length){ params.content = td.text(); } }); }); showTip(params, this, e, grid); } }, 'mouseout':function (e) { if (options.factContent) { options.factContent.remove(); options.factContent = null; } } }); }); } }); }, /** * 关闭消息提示功能 * @param {} jq * @return {} */ cancelCellTip:function (jq) { return jq.each(function () { var data = $(this).data('datagrid'); if (data.factContent) { data.factContent.remove(); data.factContent = null; } var panel = $(this).datagrid('getPanel').panel('panel'); panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove') }); } });
传入参数列表:
doCellTip方法的参数包含以下属性:
名称 | 参数类型 | 描述以及默认值 |
---|---|---|
onlyShowInterrupt | string | 是否只有在文字被截断时才显示tip,默认值为false,即所有单元格都显示tip。 |
specialShowFields | Array | 需要特殊定义显示的列,比如要求鼠标经过name列时提示standName列(可以是隐藏列)的内容,specialShowFields参数可以传入:[{field:'name',showField:'standName'}]。 |
position | string | tip的位置,可以为top,botom,right,left。 |
tipStyler | object | tip内容的样式,注意要符合jquery css函数的要求。 |
contentStyler | object | 整个tip的样式,注意要符合jquery css函数的要求。 |
$('#dg').datagrid('doCellTip', { onlyShowInterrupt:false, position:'bottom', tipStyler:{'backgroundColor':'#fff000', borderColor:'#ff0000', maxWidth:'50px', boxShadow:'1px 1px 3px #292929'}, contentStyler:{backgroundColor:'#333', paddingLeft:'5px'} });
效果展示:
http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html
相关文章推荐
- easyui扩展:datagrid鼠标经过提示单元格内容(6)
- 扩展:datagrid鼠标经过提示单元格内容
- 扩展:datagrid鼠标经过提示单元格内容
- 扩展:easyui datagrid鼠标经过提示单元格内容
- 扩展:datagrid鼠标经过提示单元格内容
- EasyUI datagrid 列包含超链接以及鼠标经过提示单元格内容
- datagrid鼠标经过提示单元格内容
- easyUi datagrid鼠标经过提示单元格内容
- 怎么设置GridView的单元格在内容显示超过长度的时候用省略号代替而不是换行当鼠标移上去的时候将影藏的内容提示出来
- 这样控制DataGrid的单元格内内容自动隐藏,鼠标移上时显示全部
- EasyUI Datagrid 鼠标悬停显示单元格内容
- EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
- 鼠标经过时,展示提示内容
- Easyui 表格datagrid 的单元格内容显示方式扩展
- [easyui]datagrid鼠标移动显示单元格内容
- Silverlight DataGrid 数据绑定鼠标移入到内容项时显示类似ToolTip提示文本
- ExtJS中Grid的单元格内容提示扩展
- EasyUI Datagrid 鼠标悬停显示单元格内容
- EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。
- EasyUI Datagrid 鼠标悬停显示单元格内容