基于1.3.3版本tooltip的datagrid单元格tip实现
生活随笔
收集整理的這篇文章主要介紹了
基于1.3.3版本tooltip的datagrid单元格tip实现
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
基于1.3.3版本tooltip的datagrid單元格tip實現(xiàn) 2013年05月25日???datagrid?? 共 6122字 ??評論數(shù) 26?? 被圍觀 7,033 views+ 文章目錄 [隱藏] $.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')??? ?? ????????});??? ?? ????}??? ?? });?? $('#dg').datagrid('doCellTip', ?? ????{ ?? ????????onlyShowInterrupt:false, ?? ????????position:'bottom', ?? ????????tipStyler:{'backgroundColor':'#fff000',?borderColor:'#ff0000',?maxWidth:'50px',?boxShadow:'1px?1px?3px?#292929'}, ?? ????????contentStyler:{backgroundColor:'#333',?paddingLeft:'5px'} ?? ????});??
- 1實現(xiàn)代碼
- 2入?yún)⒘斜?/li>
- 3使用示例
- 4效果演示
在Easyui的1.3.3版本中，作者新增了tooltip組件，盡管樣式看起來也不咋的，但是終歸也是官方出品，同時其功能也算是比較豐富。之前我寫過一篇《擴展:datagrid鼠標經(jīng)過提示單元格內(nèi)容》那就是用純編碼生成的tip，更為丑陋，有了Easyui 1.3.3的tooltip，我們實現(xiàn)起來就很容易了，直接上代碼：
實現(xiàn)代碼
使用示例
效果演示
http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html
轉(zhuǎn)載于:https://www.cnblogs.com/8090sns/p/3644251.html
總結
以上是生活随笔為你收集整理的基于1.3.3版本tooltip的datagrid单元格tip实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android manifest属性总结
- 下一篇： jquery 源码分析九 - Sizzl