`

基于1.3.3版本tooltip的datagrid单元格tip实现

 
阅读更多
 

在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也不咋的,但是终归也是官方出品,同时其功能也算是比较丰富。之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了,直接上代码:

实现代码

 
  1. $.extend($.fn.datagrid.methods, {      
  2.     /**
  3.      * 开打提示功能    
  4.      * @param {} jq    
  5.      * @param {} params 提示消息框的样式    
  6.      * @return {}    
  7.      */     
  8.     doCellTip:function (jq, params) {      
  9.         function showTip(showParams, td, e, dg) {      
  10.             //无文本,不提示。      
  11.             if ($(td).text() == ""return;      
  12.                
  13.             params = params || {};   
  14.             var options = dg.data('datagrid');      
  15.             showParams.content = '<div class="tipcontent">' + showParams.content + '</div>';      
  16.             $(td).tooltip({      
  17.                 content:showParams.content,      
  18.                 trackMouse:true,      
  19.                 position:params.position,      
  20.                 onHide:function () {      
  21.                     $(this).tooltip('destroy');      
  22.                 },      
  23.                 onShow:function () {      
  24.                     var tip = $(this).tooltip('tip');      
  25.                     if(showParams.tipStyler){      
  26.                         tip.css(showParams.tipStyler);      
  27.                     }      
  28.                     if(showParams.contentStyler){      
  29.                         tip.find('div.tipcontent').css(showParams.contentStyler);      
  30.                     }   
  31.                 }      
  32.             }).tooltip('show');      
  33.      
  34.         };      
  35.         return jq.each(function () {      
  36.             var grid = $(this);      
  37.             var options = $(this).data('datagrid');      
  38.             if (!options.tooltip) {      
  39.                 var panel = grid.datagrid('getPanel').panel('panel');      
  40.                 panel.find('.datagrid-body').each(function () {      
  41.                     var delegateEle = $(this).find('> div.datagrid-body-inner').length ? $(this).find('> div.datagrid-body-inner')[0] : this;      
  42.                     $(delegateEle).undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove').delegate('td[field]', {      
  43.                         'mouseover':function (e) {   
  44.                             //if($(this).attr('field')===undefined) return;      
  45.                             var that = this;   
  46.                             var setField = null;   
  47.                             if(params.specialShowFields && params.specialShowFields.sort){   
  48.                                 for(var i=0; i<params.specialShowFields.length; i++){   
  49.                                     if(params.specialShowFields[i].field == $(this).attr('field')){   
  50.                                         setField = params.specialShowFields[i];   
  51.                                     }   
  52.                                 }   
  53.                             }   
  54.                             if(setField==null){   
  55.                                 options.factContent = $(this).find('>div').clone().css({'margin-left':'-5000px', 'width':'auto', 'display':'inline', 'position':'absolute'}).appendTo('body');      
  56.                                 var factContentWidth = options.factContent.width();      
  57.                                 params.content = $(this).text();      
  58.                                 if (params.onlyShowInterrupt) {      
  59.                                     if (factContentWidth > $(this).width()) {      
  60.                                         showTip(params, this, e, grid);      
  61.                                     }      
  62.                                 } else {      
  63.                                     showTip(params, this, e, grid);      
  64.                                 }    
  65.                             }else{   
  66.                                 panel.find('.datagrid-body').each(function(){   
  67.                                     var trs = $(this).find('tr[datagrid-row-index="' + $(that).parent().attr('datagrid-row-index') + '"]');   
  68.                                     trs.each(function(){   
  69.                                         var td = $(this).find('> td[field="' + setField.showField + '"]');   
  70.                                         if(td.length){   
  71.                                             params.content = td.text();   
  72.                                         }   
  73.                                     });   
  74.                                 });   
  75.                                 showTip(params, this, e, grid);   
  76.                             }   
  77.                         },      
  78.                         'mouseout':function (e) {      
  79.                             if (options.factContent) {      
  80.                                 options.factContent.remove();      
  81.                                 options.factContent = null;      
  82.                             }      
  83.                         }      
  84.                     });      
  85.                 });      
  86.             }      
  87.         });      
  88.     },      
  89.     /**
  90.      * 关闭消息提示功能    
  91.      * @param {} jq    
  92.      * @return {}    
  93.      */     
  94.     cancelCellTip:function (jq) {      
  95.         return jq.each(function () {      
  96.             var data = $(this).data('datagrid');      
  97.             if (data.factContent) {      
  98.                 data.factContent.remove();      
  99.                 data.factContent = null;      
  100.             }      
  101.             var panel = $(this).datagrid('getPanel').panel('panel');      
  102.             panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')      
  103.         });      
  104.     }      
  105. });  

入参列表

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函数的要求。

使用示例

 
  1. $('#dg').datagrid('doCellTip',   
  2.     {   
  3.         onlyShowInterrupt:false,   
  4.         position:'bottom',   
  5.         tipStyler:{'backgroundColor':'#fff000', borderColor:'#ff0000', maxWidth:'50px', boxShadow:'1px 1px 3px #292929'},   
  6.         contentStyler:{backgroundColor:'#333', paddingLeft:'5px'}   
  7.     });  

效果演示

http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html

分享到:
评论

相关推荐

    easyui datagrid单元格tip实现

    在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了

    RFID_Tools_1.3.3

    功能没有阉割的老版本

    GO工具and编译器 1.3.3版本1

    GO工具and编译器 1.3.3版本 官方原版下载 原滋原味

    GO工具and编译器 1.3.3版本2

    GO工具and编译器 1.3.3版本 官方原版下载 原滋原味

    commons-fileupload-1.3.3&commons-fileupload-1.3.3架包和代码.rar

    标题中的"commons-fileupload-1.3.3&commons-fileupload-1.3.3架包和代码.rar"提到了Apache Commons FileUpload的1.3.3版本的库及其源码。Apache Commons FileUpload是一个Java库,专门用于处理HTTP协议中的多部分...

    GO工具and编译器 1.3.3版本3

    GO工具and编译器 1.3.3版本 官方原版下载 原滋原味 注意:最后一个分卷扣2分

    下载王APP 最新v1.3.3版本 包含短视频去水印、4K/1080P高清视频下载等功能

    这个是安卓手机上的下载工具「下载王」APP的最新v.1.3.3版本,新增双11领红包优惠券功能,给好友发福利码,后台下载列表新增批量删掉等功能。

    jquery-easyui-1.3.3

    在版本1.3.3中,EasyUI 继续保持着其易用性和强大的特性,使得开发人员能够更高效地实现页面布局、数据展示、用户交互等功能。 1. **基础组件** jQuery EasyUI 提供了一系列基础组件,如对话框(dialog)、表单...

    Odyssey-1.3.3免墙下载

    IOS14越狱,Odyssey-1.3.3 最新版 免墙下载 稳定不重启

    jasperreports-1.3.3与iReport1.3.3初级使用

    在1.3.3版本中,iReport增强了对JasperReports库的支持,提供了更多预设的组件和样式,使得设计报表的过程更加简便。 三、安装与配置 3.1 安装JasperReports和iReport 首先,你需要下载JasperReports 1.3.3和...

    jQuery EasyUI 1.3.3 源码

    7. **响应式设计**:虽然EasyUI在1.3.3版本时对响应式设计的支持可能不够完善,但开发者可以通过自定义CSS和JavaScript来实现一定程度的移动设备适配。 深入研究jQuery EasyUI 1.3.3的源码,可以帮助开发者理解其...

    jquery-easyui-1.3.3-api.rar

    1.3.3版本的API中详细描述了如何配置DataGrid,包括列定义、数据源绑定、事件处理等。 2. **Combobox**:Combobox实现了下拉选择框的功能,可实现输入提示、下拉列表显示等。开发者可以通过API控制其显示选项、联动...

    最新easyUi1.3.3版官方API中文版

    - 表格(datagrid):EasyUI的表格组件支持数据分页、排序、过滤和编辑,可以与后端数据库无缝对接,实现数据的动态展示。 - 下拉框(combobox):提供了下拉选择功能,可与其他组件结合,实现联动效果。 - ...

    ServBay 1.3.3版本(支持PHP8.4开发版)

    ServBay还提供各种工具和功能,帮助您有效地开发和测试您的Web应用程序,如集成调试、版本控制和协作工具。无论你是初学者还是专业的Web开发人员,ServBay都可以帮助你简化Web开发工作流程,提高你的工作效率。现在...

    commons-fileupload-1.3.3.zip

    Apache Struts2 Commons FileUpload反序列化远程代码执行漏洞安全公告 安全公告编号:CNTA-2018-... 目前,Apache公司已发布了新版本(Struts 2.5.12及以上版本,包括Commons FileUpload库的修补版本1.3.3)修复了该漏洞

    commons-fileupload-1.3.3

    Apache Commons FileUpload 1.3.3版本的使用,不仅可以简化Java应用程序的文件上传实现,还能提高上传的稳定性和安全性。通过深入了解和熟练运用,开发者可以更高效地处理各种文件上传场景,提升应用的功能性和用户...

    xvidcore-1.3.3.tar.gz

    本次我们关注的是Xvidcore的1.3.3版本,这是官方发布的原版源码,确保了其稳定性和可靠性。 1. **Xvid编码技术** Xvid编码技术是基于MPEG-4 ASP(Advanced Simple Profile)标准的,它能够以相对较低的数据速率...

    mybatis-1.3.3.zip 增强版本

    在本增强版本中,mybatis-1.3.3.zip提供了比原版更加强大的功能和优化,使得开发人员在处理数据库操作时更加高效便捷。 1. **动态SQL**:MyBatis的核心特性之一就是其强大的动态SQL支持。通过使用IF、WHERE、SET等...

    1.3.3前端包用于版本升级,没有私服

    "1.3.3前端包"通常指的是一个特定版本的前端项目或库,这个版本号"1.3.3"表明它是经过多次迭代和改进后的产物。在描述中提到的“用于版本升级”,意味着当前项目或应用需要更新到这个特定版本,以获取新的功能、修复...

Global site tag (gtag.js) - Google Analytics