1. 首頁
  2. 問答
  3. Gridview onmouseover詳細信息

Gridview onmouseover詳細信息

2016-06-08 108 views
0

我試圖在鼠標上顯示有關表單的更多信息。我寫的代碼都與谷歌的幫助下我仍無法顯示，請讓我知道我犯的錯誤Gridview onmouseover詳細信息

我的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'; 
      } 
     } 
    }

and my 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() + "')"); 

      } 
     } 
    }

一個更重要的一點是我沒有得到任何錯誤

來源

2016-06-08 Venus Vikki

回答

0

你這樣做的方式是非常複雜的，它真的沒有按您可以在您的GridView中創建一個隱藏列，並將其綁定到您的數據源中包含詳細信息數據的必需屬性。然後使用非常小的jQuery，您可以遍歷GridView的行 - >提取hidd en - >將行懸停的工具提示設置爲該值，或者創建一些其他事件來顯示自定義彈出式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>

來源

2016-06-08 12:55:01

相關問題

 相關問題