jQuery poshytip实现页面不可视区域内的字段信息通过提示框展示

效果如图所示

其中提示框里的内容是页面不可视区域的字段信息。
下面记录如何实现此功能。

1. 引入poshytip插件
在官网下载插件zip包，放到工程路径后引入

<!-- Tooltip classes 提示框主题文件-->
<link rel="stylesheet" href="${ctx}/js/tip/tip-skyblue/tip-skyblue.css" type="text/css" />
<!-- jQuery and the Poshy Tip plugin files -->
<script type="text/javascript" src="${ctx}/js/tip/jquery.poshytip.js"></script>
<!--jQuery自定义的插件，用来判断td是否显示在浏览器窗口-->
<script type="text/javascript" src="${ctx}/js/jquery.visable.js"></script>

2. 自定义插件jQuery.visable.js
定义一个全局方法用来判断表格列是否隐藏在滚动条不可见区域

(function($){
  $.extend({
    //矩形的碰撞检测
    /**
     * x1,y1 第一个矩形的左上角
     * x2,y2 第一个矩形的右下角
     * x3,y3 第二个矩形的左上角
     * x4,y4 第二个矩形的右下角
     * 其中第一个矩形是指表格行的某一列，第二个矩形指滚动条滚动的距离后界面可视部分形成的矩形
     * 当滚动条在最左侧时，x3=0，x4=x3+界面能够看到的表格宽度。当滚动条滚动到最右边是。x3=滚动的距离，x4=x3+界面能够看到的表格宽度。
     * return Boolean false=>碰撞,返回false，表示表格列在不可视区域，需要显示。
     */
    isCollsion: function(x1, y1, x2, y2, x3, y3, x4, y4){
      if(
        (x1 > x3 && x1 > x4) ||
        (x3 > x1 && x3 > x2) ||
        (y1 > y3 && y1 > y4) ||
        (y3 > y1 && y3 > y2)
      ){
        return false;
      }else{
        return true;
      }
    }
  });

  /**
   * opt中包含了两个参数，元素实际位置的偏移
   *
   * return Boolean 是否在可视范围之内
   */
  $.fn.isVisable = function(opt){
        opt = $.extend({
          offsetTop: 0, //网页中元素比实际位置在垂直方向的偏移
          offsetLeft: 0, //网页中元素比实际位置在水平方向的偏移
          addTop: 0, //元素左上角坐标y轴偏移
          addRight: 0, //元素右下角坐标x轴偏移
          addBottom: 0, //元素右下角坐标y轴偏移
          addLeft: 0, //元素左上角坐标x轴偏移
        }, opt);//定义一些参数
        var me = $(this),
            srcInfo = {
              begin_left: (me.offset().left + opt.offsetLeft + opt.addLeft),
              begin_top: (me.offset().top + opt.offsetTop + opt.addTop)
            }
            srcInfo.end_left = (srcInfo.begin_left + me.width() + opt.addRight);
            srcInfo.end_top = (srcInfo.begin_top + me.height() + opt.addBottom);

            winInfo = {
              begin_left: $(window).scrollLeft() + 70,
              //获取滚动条的水平位置，滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。这里用$(window)是以整个浏览器的最左边来计算滚动后不可视区域的字段。而我们实际希望是根据页面表格最左边来计算不可视区域的字段。误差就是通常页面左侧是一个菜单栏，这个差值大概是70，于是上面添加了偏移70。相应的end_left就要减去70。
              begin_top: $(window).scrollTop()//获取垂直滚动条的距离
            }
            winInfo.end_left = (winInfo.begin_left + $(window).width() - 70);
            winInfo.end_top = (winInfo.begin_top + $(window).height());

        //检测是否”碰撞“”
        return $.isCollsion(
          srcInfo.begin_left, srcInfo.begin_top, srcInfo.end_left, srcInfo.end_top,
          winInfo.begin_left, winInfo.begin_top, winInfo.end_left, winInfo.end_top
        );
  }
})($);

3. 自定义easyui datagrid 属性和方法。
通过给datagrid添加属性来启动提示框。文件命名为easyui_extend.js

//封装grid基本参数
$.extend($.fn.datagrid.defaults, {
    queryForm:null,
    fitColumns:true,
    border:false,
    nowrap:false,
    fit:true,
    showTips:false, //自动显示可视区域看不到列
    tipsAll:false, //竖向显示表格所有的数据，不仅仅是不可视区域的字段。依赖showTips

    striped:true,
    loadMsg:'加载中...',
    pagination:true,
    rownumbers:true,
    pageNumber:1,
    pageSize:20,
    pageList:[10,20,30,40,50,100],
    singleSelect:false,
    ctrlSelect:true,
    queryParams:{},
    sortName:null,
    sortOrder:'asc',
    multiSort:false,
    remoteSort:true,
    //省略一些方法定义。
    onMouseHoverTip:function(target){
        //表格自动提示
        //获取datagrid的tipsAll属性，上面定义了，所以可以在datagrid里使用
        var tipsAll = $(target).datagrid("options").tipsAll;
        //html是表格的行元素。
        var html = $(target.parentElement).find(".datagrid-row")
        .each(function(){
            this.tipsAll = tipsAll;
            $(this).poshytip({
                className: 'tip-skyblue',
                followCursor: true,
                bgImageFrameSize: 9,
                offsetX: 0,
                slide: false,
                showTimeout: 3000,
                content:function() {
                    //heads是表格的字段名称行元素，通过浏览器审查元素查看具体的html代码来查找写
                    var heads = $(this).parents('div.datagrid-body').prev().find('tr.datagrid-header-row td');
                    var tipsAll = this.tipsAll;
                    var mutilTds = [];
                    //$(this)指数据行元素，遍历每一个td字段元素
                    $(this).find('td').each(function(index){
                        //$(this)指数据行里的数据列元素
                        var isVisable = $(this).isVisable();//数据列是否在不可视区域。
                        if(tipsAll||!isVisable){
                            mutilTds.push(
                                    //把字段名和值拼接html字符串
                                    '<td align="right" style="width:100px;">'+heads.eq($(this).index()).text()+':</td>'
                                    +'<td style="word-wrap:break-word;word-break:break-all;">'+$(this).find('div').html()+'</td>'
                            );
                        }
                    });
                    if(mutilTds.length>0){
                        //组装提示框里需要展示的html字符串。
                        var cols = parseInt(mutilTds.length/10);
                        if(mutilTds.length%10>0) cols = cols+1;
                        if(cols==0) cols = 1;
                        var html = '<table style="width:'+cols*200+'px;">';
                        html +="<tr>";
                        for(var i=0;i<mutilTds.length;i++){
                            html += mutilTds[i];
                            if((i+1)%cols == 0){
                                html += "</tr><tr>";
                            }
                        }
                        if(html.endWith('</tr><tr>')) html  = html.substring(0,html.length-5);
                        else {
                            html +='</tr>';
                        }
                        html+='</table>';
                    }
                    return html;
                }
            });
        })
        html.mouseover(function(value){
            $(this).poshytip('show'); 
        }).mouseout(function(value){
          //  $(this).poshytip('hide'); 
        });
    },
    //onLoadSuccess方法启动提示框的入口。
    onLoadSuccess : function(value){
        var opts = $(this).datagrid("options");
        if(opts.showTips){
            opts.onMouseHoverTip(this);
        }
    }
});

4. 页面使用提示框。
当页面请求完成数据的加载后，onLoadSuccess触发，启动提示框(类似监听)。此时鼠标进入表格数据就会有把未在可视区域的字段通过提示框显示出来。

<div data-options="region:'center'">
    <table class="appGrid"></table>
</div>

$("table.appGrid").eq(0).datagrid({
                url:_ctx+'/test/list',
                rownumbers:true,
                multiSort:false,
                queryForm:$("form.appForm").eq(0).get(0),
                fitColumns:false,
                showTips:true, //行内容转竖排提示
                tipsAll:false, //只显示不可视区域内容