poshytip实现页面记录未展示的部分通过提示框展示

效果如图所示

其中提示框里的内容是滚动条右边看不到的字段信息。记录如何实现此功能。页面用的easyui。

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
定义一个jquery全局方法用来判断表格列是否隐藏在滚动条不可见区域

(function($){
  $.extend({
    //矩形的碰撞检测
    /**
     * x1,y1 第一个矩形的左上角
     * x2,y2 第一个矩形的右下角
     * x3,y3 第二个矩形的左上角
     * x4,y4 第二个矩形的右下角
     * 其中第一个矩形是指表格行的某一列，第二个矩形指滚动条滚动的距离形成的矩形
     * 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(),
              //获取滚动条的水平位置，滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。
              begin_top: $(window).scrollTop()//获取垂直滚动条的距离
            }
            winInfo.end_left = (winInfo.begin_left + $(window).width());
            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. 对jquery easyui的datagrid进行基本封装。

datagrid添加两个基本属性。

//封装grid基本参数
$.extend($.fn.datagrid.defaults, {
    //自定义两个属性
    showTips:false, //自动显示可视区域看不到列
    tipsAll:false, //竖向显示表格所有的数据，依赖showTips
    //自定义一个函数
    onMouseHoverTip:function(target){
        //表格自动提示
        var tipsAll = $(target).datagrid("options").tipsAll;
        var html = $(target.parentElement).find(".datagrid-row")
        .each(function(){
            this.tipsAll = tipsAll;
            $(this).poshytip({
                className: 'tip-skyblue',
                followCursor: true,
            //  showOn: 'none',
                bgImageFrameSize: 9,
                offsetX: 0,
                slide: false,
                showTimeout: 3000,
                content:function() {
                    var heads = $(this).parents('div.datagrid-body').prev().find('tr.datagrid-header-row td');
                    var tipsAll = this.tipsAll;
                    var mutilTds = [];
                    $(this).find('td').each(function(index){
                        var isVisable = $(this).isVisable();
                        if(tipsAll||!isVisable){
                            mutilTds.push(
                                    '<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){
                        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是datagrid的方法。
    onLoadSuccess : function(value){
        var opts = $(this).datagrid("options");
        if(opts.showTips){
            opts.onMouseHoverTip(this);
        }
    }
});

第三步里面的代码需要自行去理解，其实这里就是组装如何显示的提示框的内容。

4. 页面使用
使用的时候只需要在原有的datagrid使用里添加两个属性就可以实现提示框，即showTips:true tipsAll:false 。在datagrid的页面加载完成以后，触发onLoadSuccess方法。方法里判断showTips是否为true，如果是，就在元素的mouseover事件添加提示条啦，完成

$(function(){
    $("table.appGrid").eq(0).datagrid({
                url:_ctx+'/lnt/xxx/xxx',
                multiSort:false,
                fitColumns:false,
                showTips:true, //行内容转竖排提示.
                tipsAll:false, //只显示不可视区域内容
                remoteSort: false,
                queryForm:$("form.appForm").eq(0).get(0),
                pageSize:50,
                columns:[[
                    {field:'_',width:40,formatter:function(v,r){if(r.FCN &&r.FCN.length==8) return 'M1';return 'CPU';}},
                    {field:'RN',title:'计数',align:'center',width:80,sortable:true}

                ]]
    });
});