1

当我将鼠标悬停在我的 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);

            }
        }
4

3 回答 3

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>
于 2012-09-18T21:57:29.277 回答
2

使用 的RowStyle-CssClass属性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; }

于 2012-09-18T21:59:22.810 回答
1

你可以试试这个。。 

.mGrid tr:not(.pgr):hover{background-color:#FFFFCC;color:white;}
于 2012-09-18T21:54:55.893 回答