现在的位置: 首页 > easyui > Grid > datagrid > 正文
基于1.3.3版本tooltip的datagrid单元格tip实现
2013年05月25日 datagrid ⁄ 共 6554字 评论数 46 ⁄ 被围观 46,881 views+
文章目录
[隐藏]

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

实现代码

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

入参列表

doCellTip方法的参数包含以下属性:

名称 参数类型 描述以及默认值
onlyShowInterrupt string 是否只有在文字被截断时才显示tip,默认值为false,即所有单元格都显示tip。
specialShowFields Array 需要特殊定义显示的列,比如要求鼠标经过name列时提示standName列(可以是隐藏列)的内容,specialShowFields参数可以传入:[{field:'name',showField:'standName'}]。
position string tip的位置,可以为top,botom,right,left。
minWidth string tip的最小宽度(IE7+)。
maxWidth string tip的最大宽度(IE7+)。
width string tip的宽度,例如'200px'。
tipStyler object tip内容的样式,注意要符合jquery css函数的要求。
contentStyler object 整个tip的样式,注意要符合jquery css函数的要求。

使用示例

  1. function doCellTips(onlyShowInterrupt) {
  2.     $('#dg').datagrid('doCellTip', {
  3.         onlyShowInterrupt : onlyShowInterrupt,
  4.         position : 'bottom',
  5.         maxWidth : '200px',
  6.         specialShowFields : [ {
  7.             field : 'status',
  8.             showField : 'statusDesc'
  9.         } ],
  10.         tipStyler : {
  11.             'backgroundColor' : '#fff000',
  12.             borderColor : '#ff0000',
  13.             boxShadow : '1px 1px 3px #292929'
  14.         }
  15.     });
  16. }

效果演示

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

目前有 46 条留言 其中:访客:27 条, 博主:18 条 引用: 1

  1. 独行僧 : 2013年05月26日12:46:08  -49楼 @回复 回复
  2. 阿仁 : 2013年06月21日17:36:08  -48楼 @回复 回复
  3. kinglike : 2013年06月26日18:59:37  -47楼 @回复 回复
  4. arun : 2013年06月28日17:02:10  -46楼 @回复 回复
  5. newEU : 2013年08月12日09:06:56  -45楼 @回复 回复
  6. OUTMAN : 2013年11月16日19:40:31  -44楼 @回复 回复
  7. 小时候我可狠了 : 2013年11月23日15:13:35  -43楼 @回复 回复
  8. 小陈 : 2013年11月28日09:17:19  -42楼 @回复 回复
  9. H先生 : 2013年11月28日16:16:54  -41楼 @回复 回复
  10. 瓦哈哈 : 2013年12月09日16:12:55  -40楼 @回复 回复
  11. jj : 2014年03月08日17:04:28  -39楼 @回复 回复
  12. 无状态 : 2014年12月31日16:56:43  -38楼 @回复 回复
  13. ruien : 2015年03月26日14:06:52  -37楼 @回复 回复
  14. 小管 : 2015年04月13日11:16:30  -36楼 @回复 回复
  15. 管少 : 2015年05月15日11:13:26  -35楼 @回复 回复
  16. 小寒 : 2015年06月11日16:23:35  -34楼 @回复 回复
  17. sevilin : 2016年12月30日11:40:36  -33楼 @回复 回复
  18. 十八 : 2017年05月03日16:19:20  -32楼 @回复 回复
  19. 小a123喜欢你 : 2018年01月30日16:48:34  -31楼 @回复 回复

给我留言

留言无头像?


×