在gridview中将鼠标移动到一行上显示详细信息？答案

【问题标题】：Display details on moving mouse over a row in gridview?在gridview中将鼠标移动到一行上显示详细信息？
【发布时间】：2013-08-28 13:37:24
【问题描述】：

我正在使用网格视图，如果我将鼠标指向每一行，我需要在弹出窗口中的表格/网格中显示特定细节。我已经尝试了以下相同的代码，它正在工作，但在弹出窗口中只显示一行。：

 protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        PopupControlExtender pce = e.Row.FindControl("PopupControlExtender1") as PopupControlExtender;

        string behaviorID = "pce_" + e.Row.RowIndex;
        pce.BehaviorID = behaviorID;

        Image img = (Image)e.Row.FindControl("Image1");

        string OnMouseOverScript = string.Format("$find('{0}').showPopup();", behaviorID);
        string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID);

        img.Attributes.Add("onmouseover", OnMouseOverScript);
        img.Attributes.Add("onmouseout", OnMouseOutScript);
    }
}


 [System.Web.Services.WebMethodAttribute(),
    System.Web.Script.Services.ScriptMethodAttribute()]
    public static string GetDynamicContent(string contextKey)
    {
        string constr = ConfigurationSettings.AppSettings["ConnectionInfo"];
        SqlConnection con = new SqlConnection(constr);
        con.Open();
        string query = "SELECT * FROM Table1 WHERE field1 = '" + contextKey + "' ";

        SqlDataAdapter da = new SqlDataAdapter(query, con);
        DataTable table = new DataTable();

        da.Fill(table);

        StringBuilder b = new StringBuilder();
    b.Append("<table border='1' style='background-color:#f3f3f3; ");
    b.Append("width:350px; font-size:10pt; font-family:Verdana;' cellspacing='0' cellpadding='3'>");

    b.Append("<tr style = 'background-image: url(Images/HeaderGlassBlack.jpg); background-repeat:repeat; color:#FFC700; '><td style='width:50px;'><b>Employee</b></td>");
    b.Append("<td style='width:80px;'><b>KPI Name</b></td>");
    b.Append("<td style='width:80px;'><b>Business</b></td>");
    b.Append("<td style='width:80px;'><b>Description</b></td>");

    b.Append("<td style='width:50px;'><b>Plan Live</b></td>");
    b.Append("<td style='width:80px;'><b>Actual Live</b></td>");
    b.Append("<td style='width:80px;'><b>Plan Q1</b></td>");
    b.Append("<td style='width:80px;'><b>Actual Q1</b></td></tr>");

    b.Append("<tr>");
    b.Append("<td>" + table.Rows[0]["Emp_Name"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["kpi_name"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["Bus_Name"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["Description"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["PLAN_LIVE"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["ACTUAL_LIVE"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["PLAN_Q1"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["ACTUAL_Q1"].ToString() + "</td>");


    b.Append("</tr>");

    b.Append("</table>");

    return b.ToString();
}

我知道我需要遍历数据集以填充动态表中的所有值，但我不知道如何实现这一点。有人可以帮忙吗？

【问题讨论】：

你能创建html表格吗？
是的，我正在生成 html 表。可能我需要计算在 dataadapter 中生成的行数并使用该计数循环遍历 html 表。
不工作。我什至尝试绑定 gridview 而不是 html table，希望所有行都会有界但没有用。

标签： asp.net gridview mouseover

【解决方案1】：

你可以试试这段代码

b.Append("<table>");
//Here you add attributes of table
.... 
foreach(var row in table.Rows)
{

    b.Append("<tr>");
    b.Append("<td>");
    b.Append(row["Emp_Name"].ToString());
    b.Append("</td>"); 
    //here you add your differents cells
    .......
    b.Append("</tr>");
}
//Close your table
b.Append("</table>");

....

【讨论】：

Thnx 糖果。您的解决方案有效！但是，我必须进行一项更改，我在 Foreach 条件中使用了 DataRow insted of var。非常感谢。
我很乐意帮助你 Hitesh 谢谢

【解决方案2】：

为什么不用AjaxToolkit 的hover menu？

【讨论】：