onmouseover和onmouseout无法正常工作

时间:2015-01-10 04:39:13

标签: asp.net gridview

protected void OnRowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //btnTargetEmp.Attributes.Add("onmouseover", "alert('hi')");
        //btnTargetEmp.Attributes["onmouseover"] = "alert(no)";
        e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView2, "Select$" + e.Row.RowIndex);
        e.Row.ToolTip = "Click to select this row.";
        //string onmouseoverStyle = "this.style.backgroundColor='blue'";
        ////string onmouseoutStyle = "this.style.backgroundColor='lightbrown'";
        //string onmouseoverStyle1 = "this.style.backgroundColor='green'";
        //string onmouseoutStyle1 = "this.style.backgroundColor='lightbrown'";
        ////e.Row.Attributes.Add("onmouseover", onmouseoverStyle1);
        //e.Row.Attributes.Add("onmouseout", onmouseoutStyle1);
        e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='firebrick',this.style.cursor='pointer'");
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor");
        //e.Row.Attributes.Add("onmouseover", onmouseoverStyle);
        //e.Row.Attributes.Add("onmouseout", onmouseoutStyle1);
        //e.Row.BackColor = ColorTranslator.FromHtml("#f1c365"); 

    }
}

当我从gridview中选择行时,它可以正常工作但是当我再次打开gridview时,仍然会选择之前选择的行并且它的颜色会发生变化而我不想要这样。请帮忙 。 这是弹出窗口中gridview的.aspx文件代码。

     <asp:ModalPopupExtender ID="ModularPopupExtender2" runat="server" BehaviorID="modalbehavior2" PopupControlID="panel2"  TargetControlID="btnTargetEmp" CancelControlID="HyperLink1" BackgroundCssClass="Background2" OnCancelScript="clickCancel();"></asp:ModalPopupExtender>

        <asp:Panel ID="panel2" runat="server"  CssClass="Popup2" align="center">
            <asp:Button ID="btnTargetEmp" runat="server" Text="OK" style="display:none;"/>
            <asp:HyperLink ID="HyperLink1" runat="server" CssClass="ClosePopupCls" Font-Size="Large"><b>[x]</b></asp:HyperLink>
<h3 id="h1"> <b> EMPLOYEES RECORD </b></h3>
            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" OnSelectedIndexChanged="GridView2_SelectedIndexChanged" OnRowDataBound = "OnRowDataBound" >



                <Columns>
                    <asp:BoundField DataField="CAANO" HeaderText="CAANO" ReadOnly="True" SortExpression="CAANO" />
                    <asp:BoundField DataField="NAME" HeaderText="NAME" SortExpression="NAME" />
                    <asp:BoundField DataField="DESIGNATION" HeaderText="DESIGNATION" SortExpression="DESIGNATION" />
                    <asp:BoundField DataField="PG" HeaderText="PG" SortExpression="PG" />
                </Columns>

                <FooterStyle BackColor="#CCCCCC" />
                <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                <SortedAscendingCellStyle BackColor="#F1F1F1" />
                <SortedAscendingHeaderStyle BackColor="#808080" />
                <SortedDescendingCellStyle BackColor="#CAC9C9" />
                <SortedDescendingHeaderStyle BackColor="#383838" />

            </asp:GridView>


        </asp:Panel>    

1 个答案:

答案 0 :(得分:0)

你需要一点点jquery和2个样式。

Jquery的:

$('tr.row').click(
    function () {
     //your click code
    }).hover(
    // add/remove css class to highlight on mouse over/out
    function () { $(this).addClass('row-highlight'); },
    function () { $(this).removeClass('row-highlight'); });

修改你的gridview

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
OnSelectedIndexChanged="GridView2_SelectedIndexChanged" 
OnRowDataBound = "OnRowDataBound" RowStyle-CssClass="row">

你的css风格:

tr.row { 
   background-color:white;
} 
tr.row-highlight {  
   background-color: 'firebrick';
   cursor:pointer;
}   

您现在可以在属性后面注释掉您的代码。