asp.net gridview 寻呼机悬停

Question

当我将鼠标悬停在我的 gridview 上时，我应用 css 来突出显示鼠标所在的行。这也适用于寻呼机，尽管它位于我的网格视图的顶部和底部。我可以不将颜色样式 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

你可以试试这个。。

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

Answer 2

您可以使用 gridview 的 Row_DataBound 事件来实现这一点。您可以只选择包含数据的单元格，而不能在其中包含寻呼机。试试这个

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 代码.. 在您页面的 head 部分中仅包含此内容，它应该也可以正常工作..

<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>

Answer 3

使用GridView 的RowStyle-CssClass 属性将类应用于网格中的数据行。然后在样式表中使用该类来应用悬停样式。

网格视图：

<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; }