[原创]gridview与浮动层的结合运用

这是后台代码:

 #region 页面事件处理程序 --- gridView事件
    //数据列绑定时
    protected void gvList_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            string s = getDivHtml(Convert.ToInt32(e.Row.Cells[9].Text));

            

            e.Row.Attributes["onmouseover"] = "ItemOver(this)";

            e.Row.Attributes.Add("onMouseDown", "showIt(event,'" + s + "');");

        }
    }

    /// <summary>
    /// 通过当前行的ID获取当前行的全部信息并将起显示在TABLE上面
    /// </summary>
    /// <param name="id"></param>
    /// <returns></returns>
    protected string getDivHtml(int id)
    {
        string s; 
        ErpDailyReport report = new ErpDailyReport();
        ErpReportBLL objErpReportBLL = ErpReportBLL.GetInstance("HHTspUserTspServer");

        report = objErpReportBLL.GetReportByReportID(id) as ErpDailyReport;

        s = "<table id=" + "divtable" + ">";
        s += "<tr><td>工作成果</td><td width=" + "200" + " style=" + "table-layout:fixed;word-wrap:break-word;word-break:break-all" + ">" + report.REPORT_RESULT + "</td></tr>";
        s += "<tr><td>工作量</td><td width=" + "200" + " style=" + "table-layout:fixed;word-wrap:break-word;word-break:break-all" + ">" + report.REPORT_LOAD + "</td></tr>";
        s += "<tr><td>未完成原因</td><td width=" + "200" + " style=" + "table-layout:fixed;word-wrap:break-word;word-break:break-all" + ">" + report.REPORT_MATTER + "</td></tr>";
        s += "<tr><td> 希望解决问题</td><td width=" + "200" + " style=" + "table-layout:fixed;word-wrap:break-word;word-break:break-all" + ">" + report.REPORT_HOPE + "</td></tr>";
        s += "<tr><td>其他</td><td width=" + "200" + " style=" + "table-layout:fixed;word-wrap:break-word;word-break:break-all" + ">" + report.REPORT_REMARK + "</td></tr>";
        s += "</table>";

        return s;
    }

这是前台代码:

<!--浮动标签-->
<div id="ad" style="  position: absolute; background-color:#E7ECF0;visibility: hidden; border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid;"></div>
   <!--浮动标签结束-->

JavaScript代码:

function showIt(event,s)
{
    

    if (!event)
        {
            var event = window.event;
        }
    var dscpobj = document.getElementById('ad');
    
    dscpobj.innerHTML=s;
    
     if(dscpobj.style.visibility == 'visible')
    {
        dscpobj.style.visibility = 'hidden';
    }else
    {
        dscpobj.style.visibility = 'visible';
    }
    if (!dscpobj)
        {
            return;
        }
    var xfix = 0;
    var yfix = 0;
    var yall = 768;

    var divTable= document.getElementById('divtable');
    dscpobj.style.width=divTable.style.width;
    dscpobj.style.height=divTable.style.height;
     

    if (document.documentElement.scrollTop || document.documentElement.scrollLeft)
        {
            xfix = document.documentElement.scrollLeft;
            yfix = document.documentElement.scrollTop;
            yall = document.documentElement.clientHeight;
        }
    else 
    if (document.body.scrollTop || document.body.scrollLeft)
        {
            xfix = document.body.scrollLeft;
            yfix = document.body.scrollTop;
            yall = document.body.clientHeight;
        }
    if ((yall-event.clientY)<150)
        {
            dscpobj.style.top = event.clientY + yfix - 75 +'px';
        }
    else
        {
            dscpobj.style.top = event.clientY + yfix + 16 +'px';
        }
        
        if(event.clientX>700)
        {
        dscpobj.style.left = event.clientX + xfix - 200+'px';
        }else
        {
        dscpobj.style.left = event.clientX + xfix + 16+'px';
        }

//    dscpobj.style.display = 'block';
    showingdscp = 1;
}