easyUi datagrid鼠标经过提示单元格内容

此文章是基于　　EasyUI+Knockout实现经典表单的查看、编辑

 

一. jquery.cellTip.js

/**
 * 扩展两个方法
 */
using('datagrid', function(){
    $.extend($.fn.datagrid.methods, {
        /**
         * 开打提示功能
         * @param {} jq
         * @param {} params 提示消息框的样式
         * @return {}
         */
        doCellTip: function(jq, params){
            function showTip(data, td, e){
                if ($(td).text() == "") 
                    return;
                data.tooltip.text($(td).text()).css({
                    top: (e.pageY + 10) + 'px',
                    left: (e.pageX + 20) + 'px',
                    'z-index': $.fn.window.defaults.zIndex,
                    display: 'block'
                });
            };
            return jq.each(function(){
                var grid = $(this);
                var options = $(this).data('datagrid');
                if (!options.tooltip) {
                    var panel = grid.datagrid('getPanel').panel('panel');
                    var defaultCls = {
                        'border': '1px solid #333',
                        'padding': '2px',
                        'color': '#333',
                        'background': '#f7f5d1',
                        'position': 'absolute',
                        'max-width': '200px',
                        'border-radius' : '4px',
                        '-moz-border-radius' : '4px',
                        '-webkit-border-radius' : '4px',
                        'display': 'none'
                    }
                    var tooltip = $("<div id='celltip'></div>").appendTo('body');
                    tooltip.css($.extend({}, defaultCls, params.cls));
                    options.tooltip = tooltip;
                    panel.find('.datagrid-body').each(function(){
                        var delegateEle = $(this).find('> div.datagrid-body-inner').length ? $(this).find('> div.datagrid-body-inner')[0] : this;
                        $(delegateEle).find('td').each(function(i){
                            var ele = $(this).parent();
                            // 适用于treegrid
                            if($(this).find('td').length > 0)
                                ele = $(this);
                            $(ele).undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove').delegate('td', {
                                'mouseover': function(e){
                                    if (params.delay) {
                                        if (options.tipDelayTime) 
                                            clearTimeout(options.tipDelayTime);
                                        var that = this;
                                        options.tipDelayTime = setTimeout(function(){
                                            showTip(options, that, e);
                                        }, params.delay);
                                    }
                                    else {
                                        showTip(options, this, e);
                                    }
                                    
                                },
                                'mouseout': function(e){
                                    if (options.tipDelayTime) 
                                        clearTimeout(options.tipDelayTime);
                                    options.tooltip.css({
                                        'display': 'none'
                                    });
                                },
                                'mousemove': function(e){
                                    var that = this;
                                    if (options.tipDelayTime) 
                                        clearTimeout(options.tipDelayTime);
                                    //showTip(options, this, e);
                                    options.tipDelayTime = setTimeout(function(){
                                            showTip(options, that, e);
                                        }, params.delay);
                                }
                            });
                        });
                        
                    });
                    
                }
                
            });
        },
        /**
         * 关闭消息提示功能
         *
         * @param {}
         *            jq
         * @return {}
         */
        cancelCellTip: function(jq){
            return jq.each(function(){
                var data = $(this).data('datagrid');
                if (data.tooltip) {
                    data.tooltip.remove();
                    data.tooltip = null;
                    var panel = $(this).datagrid('getPanel').panel('panel');
                    panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')
                }
                if (data.tipDelayTime) {
                    clearTimeout(data.tipDelayTime);
                    data.tipDelayTime = null;
                }
            });
        }
    });
});

 

二. 测试页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>datagrid鼠标经过提示单元格内容</title>
    <%@ include file="/common/head.jsp"%>
 </head>
 <body>
    <div style="margin:10px 0;">
    <a href="#" onclick="doCellTip()">显示提示消息</a>
    <a href="#" onclick="cancelCellTip()">禁止消息显示</a>
    <div id="info"></div>
    </div>

    <table id="test" class="easyui-datagrid" style="width:100%;height:520px;" data-options="fitColumns:true, singleSelect:true, rownumbers:true">
        <thead>
      <tr>
        <th data-options="field:'direction', width:150, align:'center'">direction</th>
      </tr>
    </thead>
    </table>

    <%@ include file="/common/foot.jsp"%>
    <script type="text/javascript" src="content/js/jquery-plugin/cellTip/jquery.cellTip.js"></script>
    <script type="text/javascript">    
    function doCellTip(){
        $('#test').datagrid('doCellTip', {'cls':{'max-width':'200px'}});
    }
    function cancelCellTip(){
        $('#test').datagrid('cancelCellTip');
    }

    $(function(){
        var data = ${data};
        ko.bindingViewModel(new viewModel(data));
    });
        using(['messager', 'datagrid'], function(){
            $('#test').datagrid({
        onLoadSuccess: function(data){
            $(this).datagrid('doCellTip', {'cls':{'max-width':'600px'}, 'delay':500});
        }
        });
        });
    </script>
  </body>
</html>