我正在尝试在鼠标悬停时显示有关表单的更多信息。我在谷歌的帮助下编写了一切代码仍然无法显示请让我知道我在哪里犯了错误
我的aspx代码是
<div id="divGrid" style="width: auto; float: left">
<div>
<asp:GridView ID="gvEdit" runat="server" BorderStyle="Solid" BorderColor="lightblue" CssClass="grid" OnRowDataBound="gvEdit_RowDataBound" FooterStyle-CssClass="footer" GridLines="None" BorderWidth="2px" PagerSettings-Visible="true" ShowFooter="true" PagerSettings-Position="Top" AllowSorting="true" OnSorting="gvEdit_Sorting" ShowHeaderWhenEmpty="true" EmptyDataText="No Record found" AutoGenerateColumns="False" DataKeyNames="slno" OnRowCreated="gvEdit_RowCreated" OnDataBound="gvEdit_DataBound" OnPageIndexChanging="gvEdit_PageIndexChanging" Width="100%" AllowPaging="True" PageSize="50" OnRowCommand="gvEdit_RowCommand">
<HeaderStyle HorizontalAlign="Center" BackColor="#086A87" ForeColor="White" />
<FooterStyle BackColor="#086A87" />
<RowStyle BackColor="#ffffff" ForeColor="DarkBlue" />
<AlternatingRowStyle BackColor="#b3e5fc" ForeColor="DarkBlue" />
<PagerSettings Position="Top" />
<PagerStyle Height="65px" HorizontalAlign="Center" CssClass="pagecounthead" />
<PagerTemplate>
<table align="center" style="width: 100%;" class="pagecounthead" cellpadding="0" cellspacing="0" border="0">
<tr style="background-color: #fff">
<td align="left" style="text-align: left; font-weight: 600; font-size: 24px; width: 15%; padding-left: 0px">Form List</td>
<td align="center" style="width: 45%;">
<asp:Panel ID="pnelred" runat="server">
<table align="center" width="99%">
<tr>
<td style="background-color: #fff; text-align: right; padding-left: 0px">
<asp:ImageButton ToolTip="First Page" CommandName="Page" CommandArgument="First" runat="server" ID="ImgeBtnFirst" ImageUrl="../Images/First.jpg" />
</td>
<td style="background-color: #fff; text-align: right">
<asp:ImageButton ToolTip="Previous Page" CommandName="Page" CommandArgument="Prev" runat="server" ID="ImgbtnPrevious" ImageUrl="../Images/Previous.jpg" />
</td>
<td style="width: 25%; background-color: #fff; text-align: center">
<asp:Label ID="lblpageindx" CssClass="labelBold" Text="Page : " runat="server"></asp:Label>
<asp:DropDownList ToolTip="Goto Page" ID="ddlPageSelector" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlPageSelector_SelectedIndexChanged" CssClass="combo_common_nowidth hide">
</asp:DropDownList>
</td>
<td style="background-color: #fff; text-align: left">
<asp:ImageButton ToolTip="Next Page" CommandName="Page" CommandArgument="Next" runat="server" ID="ImgbtnNext" ImageUrl="../Images/Next.jpg" />
</td>
<td style="background-color: #fff; text-align: left">
<asp:ImageButton ToolTip="Last Page" CommandName="Page" CommandArgument="Last" runat="server" ID="ImgbtnLast" ImageUrl="../Images/Last.jpg" />
</td>
</tr>
</table>
</asp:Panel>
</td>
<td style="width: 40%; text-align: right; padding-right: 10px; padding-left: 0px">
<asp:Panel runat="server" ID="s" DefaultButton="Button1">
<asp:TextBox ID="txtsearch" runat="server" CssClass="txtbox" />
<asp:FilteredTextBoxExtender ID="fteCardHolderName" runat="server" TargetControlID="txtsearch"
FilterType="LowercaseLetters,UppercaseLetters,Numbers,Custom" ValidChars=" -">
</asp:FilteredTextBoxExtender>
<asp:Button ID="Button1" Text="Search" runat="server" CssClass="searchbtn pad" CommandName="s" />
<asp:Button ID="Button2" Text="Reset" runat="server" CssClass="resetbtn" OnClick="Reset_Click" />
</asp:Panel>
</td>
</tr>
</table>
</PagerTemplate>
<Columns>
<asp:BoundField DataField="form_key" HeaderText="FilingID" HeaderStyle-CssClass="hide" ItemStyle-CssClass="hide" FooterStyle-CssClass="hide" />
<asp:BoundField DataField="business_key" HeaderText="BusinessKey" HeaderStyle-CssClass="hide" ItemStyle-CssClass="hide" FooterStyle-CssClass="hide" />
<asp:BoundField DataField="ref_no" HeaderText="Reference" HeaderStyle-Width="11%" HeaderStyle-CssClass="borderright" SortExpression="ref_no" HeaderStyle-Font-Overline="false" />
<asp:BoundField DataField="fum" HeaderText="Period" HeaderStyle-Width="15%" HeaderStyle-CssClass="borderright" ItemStyle-Width="8%" SortExpression="fum" />
<asp:BoundField DataField="filing_type" HeaderText="Filing Type" HeaderStyle-CssClass="borderright" HeaderStyle-Width="10%" SortExpression="filing_type" />
<asp:BoundField DataField="business_name" HeaderText="Business" HeaderStyle-CssClass="borderright" HeaderStyle-Width="16%" />
<asp:BoundField DataField="filing_status" HeaderText="Status" HeaderStyle-CssClass="borderright" HeaderStyle-Width="11%" SortExpression="filing_status" />
<asp:TemplateField HeaderStyle-Width="7%" HeaderStyle-CssClass="borderright" HeaderText="View">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="lnkBtnViewDetails_Click" Text='<%#Eval("form_details")%>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="10%" HeaderStyle-CssClass="nopad" FooterText="Total Number of filing" FooterStyle-CssClass="fontcolor" ItemStyle-CssClass="txtcenter" HeaderText="Schedule1" ItemStyle-Width="6.9%">
<ItemTemplate>
<a id="wrapper1" href="Schedule12290.aspx?key=<%#Eval("form_key") %>" target="_blank">
<img src="<%#Eval("schedule1") %>" alt="" class="hover" />
<p class="text">Download Schedule 1</p>
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="5%" HeaderText="Copy" HeaderStyle-CssClass="nopad" ItemStyle-CssClass="txtcenter">
<ItemTemplate>
<asp:ImageButton ID="lnkDuplicate" runat="server"
ImageUrl="~/Images/grid/file_duplicate.png" OnClick="lnkbtnDuplicate_Click" ToolTip="Copy / Duplicate filing" CssClass='<%#Eval("duplicate") %>' OnClientClick="javascript:return confirm('Are you sure you want to copy from previous years filing?');" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="3%" HeaderText="Edit" ItemStyle-CssClass="txtcenter" HeaderStyle-CssClass="nopad" FooterStyle-CssClass="fontcolor txtcenter">
<ItemTemplate>
<asp:ImageButton ID="lnkBtnContinue" runat="server"
ImageUrl="~/Images/grid/edit3.png" OnClick="imgBtnContinue_Click" ToolTip="Edit" CssClass='<%# Eval("continue")%>' />
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="total" runat="server"></asp:Label>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="8%" HeaderText="Delete" ItemStyle-CssClass="txtcenter" HeaderStyle-CssClass="nopad" FooterStyle-CssClass="hide">
<ItemTemplate>
<asp:ImageButton ID="imgBtnDel" runat="server"
ImageUrl="~/Images/grid/delBlue.png" OnClick="imgBtnDelete_Click" ToolTip="Delete" CssClass='<%#Eval("delete") %>' OnClientClick="javascript:return confirm('Do you want to delete this file permanently?');" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle CssClass="line" />
</asp:GridView>
</div>
</div>
<div runat="server" id="divDetail" onmouseover="highlight(this, event)"
onmouseout="highlight(this, event)">
</div>
javascript代码
<script type="text/javascript">
var iRowIndex; // THE ROW INDEX OF THE GRIDVIEW, TO KEEP THE ROW HIGHLIGHTING
// WHEN THE MOUSE IS ON ANOTHER CONTROL.
function MouseEvents(objRef, evt, desc) {
if (evt.type == "mouseover") {
objRef.style.cursor = 'pointer'
objRef.style.backgroundColor = "#EEE";
ShowDiv(desc, evt.pageY);
}
else {
objRef.style.backgroundColor = "#FFF";
iRowIndex = objRef.rowIndex;
HideDiv();
}
}
function ShowDiv(desc, pos) {
// SHOW THE DIV WITH DESCRIPTIONS NEXT TO THE SELECTED GRIDVIEW ROW.
document.getElementById('divDetail').style.display = 'block';
document.getElementById('divDetail').innerHTML = desc;
document.getElementById('divDetail').style.marginTop = pos - 25 + 'px';
}
function HideDiv() { document.getElementById('divDetail').style.display = 'none'; }
function highlight(objRef, evt) {
if (evt.type == "mouseover") {
objRef.style.display = 'block';
document.getElementById('gvEdit').rows[iRowIndex].style.backgroundColor = "#EEE";
}
else {
if (evt.type == "mouseout") {
document.getElementById('gvEdit').rows[iRowIndex].style.backgroundColor = "#FFF";
objRef.style.display = 'none';
}
}
}
和我的css
<style type="text/css">
body
{
font-family:Arial, Tahoma;
font-size:15px;
}
#divDetail
{
float:left;
font:inherit;
font-size:13px;
padding:2px 5px;
width:auto;
border:solid 2px #CCC;
-moz-border-radius:0 7px 7px 0; -webkit-border-radius:0 7px 7px 0;
border-radius:0 7px 7px 0;
display:none;
color:#333;
}
#divDetail p {
font:inherit;
}
#divDetail a
{
font:inherit;
float:right;
background-color:#357AE8;
color:#FFF;
text-decoration:none;
border:solid 1px #2F5BB7;
border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;
padding:3px;
}
</style>
和我的后端代码aspx.cs
protected void gvEdit_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
String vd = System.String.Empty;
vd = "Vehicle Details";
Form objForm = new Form2290.Form();
objForm.FormID = DataBinder.Eval(e.Row.DataItem, "form_key").ToString();
BAL_F2290 objfrmkey = new BAL_F2290();
DataTable dt = objfrmkey.getmouseover(objForm);
if (dt.Rows.Count > 0)
{
foreach (DataRow ldr in dt.Rows)
{
vd = vd + "Reference : " + DataBinder.Eval(e.Row.DataItem, "ref_no").ToString();
vd = vd + "Vin : " + dt.Rows[0]["vin"];
vd = vd + "Category : " + dt.Rows[0]["category"];
vd = vd + "Is_Logging : " + dt.Rows[0]["is_logging"];
vd = vd + "Is_Agricultural : " + dt.Rows[0]["is_agricultural"];
vd = vd + "Weight : " + dt.Rows[0]["weight_current"];
vd = vd + "Tax_amt : " + dt.Rows[0]["tax_amt"];
}
e.Row.Attributes.Add("onmouseover", "MouseEvents(this, event, '" + vd + "')");
e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event, '" + DataBinder.Eval(e.Row.DataItem, "ref_no").ToString() + "')");
}
}
}
另一个重点是我没有收到任何错误
答案 0 :(得分：0)
您执行此操作的方式非常复杂，并且确实不需要这样。您可以在GridView中创建隐藏列并将其绑定到所需的属性您的数据源包含详细信息数据。然后使用非常小的jQuery，您可以循环遍历GridView - ＆gt;行。提取隐藏的评论 - ＆gt;将行悬停的工具提示设置为此值，或创建一些其他事件，显示带有注释的自定义弹出式div。
看看这是多么简单：
代码背后：
public partial class aGridViewDetailsHover : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
GridView1.DataSource = this.GetUsers();
GridView1.DataBind();
}
}
private List<MyUser> GetUsers()
{
var u1 = new MyUser { Name = "User1 Name", Surname = "User1 Surname", HiddenComment = "Hidden Comment For User 1" };
var u2 = new MyUser { Name = "User2 Name", Surname = "User2 Surname", HiddenComment = "Hidden Comment For User 2" };
var u3 = new MyUser { Name = "User3 Name", Surname = "User3 Surname", HiddenComment = "Hidden Comment For User 3" };
return new List<MyUser> { u1, u2, u3 };
}
}
public class MyUser
{
public string Name { get; set; }
public string Surname { get; set; }
public string HiddenComment { get; set; }
}
<强> .ASPX：
<head runat="server">
<title></title>
<style type="text/css">
.hiddencol { display: none; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#GridView1 tr').each(function () {
var tr = $(this);
var children = $(tr).children();
var commentTd = children[2];
var comment = $(commentTd).html();
if (comment != "")
{
$(tr).prop("title", comment);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name" />
<asp:BoundField DataField="Surname" />
<asp:BoundField DataField="HiddenComment" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" />
</Columns>
</asp:GridView>
</div>
</form>
</body>