基于1.3.3版本tooltip的datagrid單元格tip實現 2013年05月25日???datagrid?? 共 6122字 ??評論數 26?? 被圍觀 7,033 views+ 文章目錄 [隱藏]

• 1實現代碼
• 2入參列表
• 3使用示例
• 4效果演示

在Easyui的1.3.3版本中，作者新增了tooltip組件，盡管樣式看起來也不咋的，但是終歸也是官方出品，同時其功能也算是比較豐富。之前我寫過一篇《擴展:datagrid鼠標經過提示單元格內容》那就是用純編碼生成的tip，更為丑陋，有了Easyui 1.3.3的tooltip，我們實現起來就很容易了，直接上代碼：

實現代碼

$.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

轉載于:https://www.cnblogs.com/8090sns/p/3644251.html

總結

以上是生活随笔為你收集整理的基于1.3.3版本tooltip的datagrid单元格tip实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。