asp.net gridview pager hover

Question

當我將鼠標懸停在我的gridview上時，我應用css來突出顯示鼠標移過的行。這將得到應用於傳呼機以及位於我的gridview的頂部和底部。我可以不是應用顏色樣式CSS到尋呼機行嗎？ 感謝 達摩

CSS

.mGrid tr:hover{background-color:#FFFFCC;color:white;} 

HTML

<asp:GridView ID="GridViewMain" OnRowDataBound="RowDataBound" OnPageIndexChanging="GridViewMain_PageIndexChanging" 
    runat="server" AllowPaging="True" PageSize="5" PagerSettings-Position="TopAndBottom" 
    CssClass="mGrid" 
    PagerStyle-CssClass="pgr" 
    AlternatingRowStyle-CssClass="alt" 
    OnRowCreated="GridViewMain_RowCreated"> 
</asp:GridView> 

代碼隱藏到一個下拉添加到尋呼機

protected void GridViewMain_RowCreated(object sender, GridViewRowEventArgs e) 
     { 
      if (e.Row.RowType == DataControlRowType.Pager) 
      { 
       DropDownList GridViewMainddl = new DropDownList(); 
       //adds variants of pager size 
       GridViewMainddl.Items.Add("5"); 
       GridViewMainddl.Items.Add("10"); 
       GridViewMainddl.Items.Add("20"); 
       GridViewMainddl.Items.Add("50"); 
       GridViewMainddl.Items.Add("100"); 
       GridViewMainddl.Items.Add("200"); 
       GridViewMainddl.Items.Add("500"); 
       GridViewMainddl.Items.Add("All"); 
       GridViewMainddl.AutoPostBack = true; 
       //selects item due to the GridView current page size 
       ListItem li = GridViewMainddl.Items.FindByText(GridViewMain.PageSize.ToString()); 
       if (li != null) 
        GridViewMainddl.SelectedIndex = GridViewMainddl.Items.IndexOf(li); 
       GridViewMainddl.SelectedIndexChanged += new EventHandler(GridViewMainddl_SelectedIndexChanged); 
       //adds dropdownlist in the additional cell to the pager table 
       Table pagerTable = e.Row.Cells[0].Controls[0] as Table; 
       TableCell cell = new TableCell(); 
       cell.Style["padding-left"] = "15px"; 
       cell.Controls.Add(new LiteralControl("Page Size:")); 
       cell.Controls.Add(GridViewMainddl); 
       pagerTable.Rows[0].Cells.Add(cell); 

      } 
     } 

Answer 1

使用RowStyle-CssClass屬性GridView將類應用於網格中的數據行。然後在樣式表中使用該類來應用懸停樣式。

GridView控件：

<asp:GridView ID="GridViewMain" 
    OnRowDataBound="RowDataBound" 
    OnPageIndexChanging="GridViewMain_PageIndexChanging" 
    runat="server" 
    AllowPaging="True" 
    PageSize="5" 
    PagerSettings-Position="TopAndBottom" 
    CssClass="mGrid" 
    PagerStyle-CssClass="pgr" 
    AlternatingRowStyle-CssClass="alt data-row" 
    RowStyle-CssClass="data-row" 
    OnRowCreated="GridViewMain_RowCreated"> 
</asp:GridView> 

風格：

.mGrid tr.data-row:hover { background-color:#FFFFCC; color:white; }

Answer 2

你可以試試這個..

.mGrid tr:not(.pgr):hover{background-color:#FFFFCC;color:white;} 

Answer 3

你可以實現你的GridView的這種使用Row_DataBound事件。您可以選擇只包含數據的cellls並且不包括在尋呼機..試試這個

protected void RowDataBound(Object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType == DataControlRowType.DataRow) 
    { 
     e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#FFFFCC'"); 
     e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle"); 
    } 
} 

如果你不想使用內聯樣式..那麼你也可以使用ClassNames ..但是你需要添加一些jQuery代碼到你的頁面中。 在頁面的頭部部分只是包括這一點，它應該很好。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<style type="text/css"> 
    .hoverClass 
    { 
     background-color: Red !important; 
     color: Green !important; 
    } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PostBack); 
     PostBack(); 
    }); 

    function PostBack() { 
     $('tbody tr:gt(1)').mouseover(function() { 
      $(this).addClass('hoverClass'); 
     }).mouseout(function() { 
     $(this).removeClass('hoverClass'); 
     }); 
    } 
</script>