1

when i hover over my gridview, i apply css to highlight the row the mouse is over. this gets applied to the pager aswell though which is located on the top and bottom of my gridview. can i not apply the color style css to the pager row? thanks Damo

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>

Code Behind to add a dropdown to the pager

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

グリッドビューの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 コードを少し追加する必要があります。ページのヘッド セクションにこれを含めるだけで、うまく動作します..

<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 に答える