GirdView模板列鼠标停留显示层

这个小功能类似于：放在浏览器的某个标签上，显示一个小框

我的思路如下：

1、确定层的位置；

2、GridView每一行都需要在绑定数据之前添加鼠标悬停、鼠标离开事件；

3、层中绑定数据；

确定层的位置，当然离不开JS，我这里写了一个PopupBox.js文件，内容如下：

var popAction = "";
var popupTimeout
var boxTimeout
var menuTimeOut
var thisEvent = null;

document.onclick = setupEvent;
function setupEvent(e) { thisEvent = e; }

function getEvent() {
    var e = window.event;
    if (!e) e = thisEvent;
    return (e);
}

function adjustPosition(e, element) {
    wnd_height = document.body.clientHeight;
    wnd_width = document.body.clientWidth;
    tooltip_width = (element.style.pixelWidth) ? element.style.pixelWidth : element.offsetWidth;
    tooltip_height = (element.style.pixelHeight) ? element.style.pixelHeight : element.offsetHeight;

    offset_y = (e.clientY + tooltip_height - document.body.scrollTop + 30 >= wnd_height) ? -5 - tooltip_height : 5;

    element.style.left = Math.min(wnd_width - tooltip_width - 5, Math.max(3, e.clientX + 6)) + document.body.scrollLeft + 'px';
    element.style.top = e.clientY + offset_y + document.body.scrollTop + 'px';
    element.style.display = "block";
}

function displayLater(menuId) {
    document.getElementById(menuId).style.filter = "alpha(opacity=100)";
}

function displayDiv(menuId, popAction, timeOut) {
    var menu;

    menuId = (menuId) ? menuId : "popmenu";

    e = getEvent();

    if ((menu = document.getElementById(menuId)) != null) {

        if (timeOut) {
            menu.style.filter = "alpha(opacity=0)";
            adjustPosition(e, menu)
            popupTimeout = window.setTimeout("displayLater('" + menuId + "')", timeOut)
        }
        else
            adjustPosition(e, menu)
        menu.popAction = popAction;
    }
    e.cancelBubble = true;
    return (false);
}

function closeDiv(menuId) {
    window.clearTimeout(popupTimeout);
    menuId = (menuId) ? menuId : "popmenu";
    if ((menu = document.getElementById(menuId)) != null) {
        menu.style.display = "none";
    }
    return (true);
}

function dispBox(userId) {
    // document.getElementById("popupBox").innerHTML = "<img width=\"220\" height=\"180\" src=\"CustomerDetail.aspx?customerid=" + customerID + "\"></img>";
    if (userId != "") {
        document.getElementById("popupBox").innerHTML = userId;
        document.onmousemove = adjustPiePosition;
        return (displayDiv("popupBox", null, 1050))
    }
}

function dispMissionBox() {
    document.onmousemove = adjustPiePosition;
    return (displayDiv("divMission", null, 1050))
}

function adjustPiePosition(e) {
    if (document.getElementById) {
        if (!e)
            e = window.event;
        adjustPosition(e, document.getElementById("popupBox"))
    }
}

function cancelBox() {
    document.onmousemove = null;
    return (closeDiv("popupBox"))
}

function getElementPos(elementId) {
    var ua = navigator.userAgent.toLowerCase();
    var isOpera = (ua.indexOf('opera') != -1);
    var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
    var el = document.getElementById(elementId);
    if (el.parentNode === null || el.style.display == 'none') {
        return false;
    }
    var parent = null;
    var pos = [];
    var box;
    if (el.getBoundingClientRect) {
        //IE
        box = el.getBoundingClientRect();
        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
        return { x: box.left + scrollLeft, y: box.top + scrollTop };

    } else if (document.getBoxObjectFor) {
        // gecko
        box = document.getBoxObjectFor(el);
        var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) : 0;
        var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) : 0;
        pos = [box.x - borderLeft, box.y - borderTop];

    } else { // safari & opera
        pos = [el.offsetLeft, el.offsetTop];
        parent = el.offsetParent;
        if (parent != el) {
            while (parent) {
                pos[0] += parent.offsetLeft;
                pos[1] += parent.offsetTop;
                parent = parent.offsetParent;
            }
        }
        if (ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && el.style.position == 'absolute')) {
            pos[0] -= document.body.offsetLeft;
            pos[1] -= document.body.offsetTop;
        }
    }
    if (el.parentNode) {
        parent = el.parentNode;
    } else {
        parent = null;
    }
    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
        pos[0] -= parent.scrollLeft;
        pos[1] -= parent.scrollTop;
        if (parent.parentNode) {
            parent = parent.parentNode;
        } else {
            parent = null;
        }
    }
    return { x: pos[0], y: pos[1] };
}

这个文件先准备好，接着进行第二步，GridView行事件绑定，它有一个RowDataBound事件，具体用法如下：

//GridView绑定行
        protected void gvCustomer_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate)
                {
                    string userId = e.Row.Cells[2].Text.ToString();

                    ((LinkButton)e.Row.FindControl("lnkshowName")).Attributes.Add("onmouseover", "dispBox('" + CreatePopTable(userId) + "')");
                    ((LinkButton)e.Row.FindControl("lnkshowName")).Attributes.Add("onmouseout", "cancelBox()");
                }
            }
        }

细心的你肯定可以发现，dispBox、cancelBox方法就是PopupBox.js里面的方法，dispBox方法里面还有一个参数是什么呢？很明显，这还是一个方法，这个方法到底有什么作用，请看下面：

private string CreatePopTable(string userId)
        {
            DataTable dt = GetStaffWeekDetail(userId);
            string strDate = DateTime.Now.ToString("yyyy-MM-dd");
            DateTime dTime = Convert.ToDateTime(strDate);
            string dateRange = useBusiness.GetWeekRange(dTime);

            if(dt != null)
            {
                string strHTML;
                strHTML = "<table cellpadding=1 cellspacing=1 class=Ntable>";
                strHTML += "<tr><th colspan=10 align=center class=SkyTDTopLine>" + dateRange + "工作安排</th></tr>";
                strHTML += "<tr align=center class=SkyTDLine style=white-space:nowrap;background-color:Aquamarine><td>序号</td><td>姓名</td><td>工作类型</td><td>所属项目</td><td>所属任务</td><td>角色</td><td>本周个人工作计划</td><td>本周计划工时</td><td>实际完成工时</td><td>剩余计划工时</td></tr>";

                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    int m = i + 1;
                    strHTML += "<tr class=SkyTDLine>";
                    strHTML += "<td>" + m + "</td>";
                    for (int j = 0; j < dt.Columns.Count; j++)
                    {
                        strHTML += "<td>" + dt.Rows[i][j].ToString() + "</td>";
                    }
                    strHTML += "</tr>";
                }
                strHTML += "</table>";

                return strHTML;
            }

            return null;
        }

这个方法的第一行获取数据（层中需要展示的数据），如何展示？记得以前学习HTML时，都是标签组建表格，同样的方法，把从后台数据库取出的数据放入到表格中，最后返回String，最后把String赋给要显示DIV对象的innerHTML属性即可。

前台

引用PopupBox.js，否则后台不能调用dispBox

<style type="text/css">
       .popbox
       {
	       border-right: ghostwhite thin outset; 
	       border-top: ghostwhite thin outset; 
	       border-left: ghostwhite thin outset;
	       position: absolute; 
	       border-bottom: ghostwhite thin outset;
	       z-index:999;
        }
    </style>

 <div class="popbox" id="popupBox" style="display: none; background-color: white">
    </div>

到这里，这个效果就可以出来了，最后分享下效果图：