首页 > 技术文章 > EasyUI TreeGrid 悬浮效果

oumi 2018-11-19 14:49 原文

 1 /* 鼠标悬停扩展*/
 2 (function (hasgrid) {
 3 
 4     if (hasgrid) {
 5         /**
 6          * 表格提示
 7          */
 8         $.extend($.fn.datagrid.methods, {
 9             tooltip: function (jq, fields) {
10                 return jq.each(function () {
11                     var panel = $(this).datagrid('getPanel');
12                     if (fields && typeof fields == 'object' && fields.sort) {
13                         $.each(fields, function () {
14                             var field = this;
15                             bindEvent($('.datagrid-body td[field=' + field + '] .datagrid-cell', panel));
16                         });
17                     } else {
18                         bindEvent($(".datagrid-body .datagrid-cell", panel));
19                     }
20                 });
21 
22                 function bindEvent(jqs) {
23                     jqs.mouseover(function () {
24                         var content = $(this).text();
25                         if (content && content != "") {
26                             $(this).tooltip({
27                                 content: content,
28                                 trackMouse: true,
29                                 deltaX: 15,
30                                 deltaY: -5,
31                                 onShow: function () {
32                                     $(this).tooltip('tip').css({
33                                         backgroundColor: '#f7f5d1',
34                                         borderColor: 'black'
35                                     });
36                                 }
37                             }).tooltip('show');
38                         }
39                     });
40                 }
41             }
42         });
43     };
44 })($.fn.datagrid);

用法

   onLoadSuccess: function (data) {
                $(this).datagrid('tooltip');
            }

 

推荐阅读