Jquery easyui datagrid 添加提示的js代码

tooltip 当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。

1.绑定tooltip

$('#desc_table').datagrid({ 

     // 加载成功后执行        

     onLoadSuccess : function(data) {

          // div id="tbdiv " class="table"

          $( '#tbdiv table').on('mouseover' ,

                 function(e) {

                     var dom = e.target;

                     if (dom.tagName == "DIV" && $(dom).text() != "" ) {

                         $(dom).tooltip({

                             position : 'top',

                             content : '<span style="">' + $(dom).text() + '</span>',

                             onShow : function() {

                          }

                      });

                      $(dom).tooltip( 'show');

                      }

            delete dom;

           });

       }

});

2.对datagrid进行扩展

     /**

 * Datagrid扩展方法tooltip 基于Easyui 1.3.3，可用于Easyui1.3.3+

 * 简单实现，如需高级功能，可以自由修改

 * 使用说明:

 *   在easyui.min.js之后导入本js

 *   代码案例:

 *         $("#dg ").datagrid({....}). datagrid('tooltip '); 所有列

 *         $("#dg ").datagrid({....}). datagrid('tooltip ',['productid',' listprice']); 指定列

 * @author  ____′↘夏悸

 */

$.extend($.fn.datagrid.methods, {

     tooltip : function (jq, fields) {

           return jq.each( function () {

               var panel = $( this).datagrid( 'getPanel');

               if (fields && typeof fields == 'object' && fields.sort) {

                   $.each(fields, function () {

                         var field = this;

                        bindEvent($( '.datagrid-body td[field=' + field + '] .datagrid-cell', panel));

                   });

              } else {

                   bindEvent($( ".datagrid-body .datagrid-cell", panel));

              }

          });

           function bindEvent(jqs) {

              jqs.mouseover( function () {

                    var content = $( this).text();

                   $( this).tooltip({

                        position : 'top',

                        content : content,

                        trackMouse : true,

                        onHide : function () {

                             $( this).tooltip( 'destroy');

                        }

                   }).tooltip( 'show');

              });

          }

     }

});

调用时：如果时也可放在datagrid的

             onLoadSuccess : function(data) {

                   $( '#desc_table').datagrid('tooltip' ,[

                         'metadatavermark','metadataname' ,

                         'metadatasemanticmark','metadataontologytag' ,'metadatabt'

                   ]);

              }

转载于:https://my.oschina.net/u/1412205/blog/415123