ASP.NET GridView鼠标停留变色,行单击显示详细记录的事件处理

本文介绍如何使用C#实现GridView的交互优化,包括鼠标悬停时行变色、鼠标点击行时显示详细信息等效果。通过添加RowDataBound事件、JavaScript函数及辅助列等操作,实现了美观且实用的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在使用C#写MIS系统时实现一个功能,GridView绑定了数据后,我想在鼠标停留到GridView数据行时,行变色突出显示该行,并且鼠标点击该行时,将该行对应的数据显示在GridView下面的控件中。


参考网上的一些相关的资料和解决方法后,我的实现步骤是:

1.增加GridView的GVSelect_RowDataBound事件
protected void GVSelect_RowDataBound(object sender,GridViewRowEventArgs e)
    {
        if (e.Row.RowType ==DataControlRowType.DataRow)
        {
            //当鼠标停留时更改背景色
            e.Row.Attributes.Add("onmouseover","c=this.style.backgroundColor;this.style.backgroundColor='#8EC26F'");
            //当鼠标移开时还原背景色
            e.Row.Attributes.Add("onmouseout","this.style.backgroundColor=c");
            //设置悬浮鼠标指针形状为"小手"
            e.Row.Attributes["style"] ="Cursor:hand";
 
            //单击/双击 事件
            e.Row.Attributes.Add("OnClick", "ClickEvent('" + e.Row.Cells[10].FindControl("btnDetial").ClientID + "')");
           
    //
注:OnClick参数是指明为鼠标单击时间,后个是调用javascript的ClickEvent函数
        }
}

2在页面的HTML里添加javascript函数,用来响应鼠标点击事件,因为ASP客户端不能主动调用服务端的函数,我在这里在Gridview添加一个辅助Button列,然后在ClickEvent(cId)函数中,调用这个Button的单击事件。
<scriptlanguage="javascript">
    function ClickEvent(cId)
    {
        //调用LinkButton的单击事件,btnBindData是LinkButton的ID
        document.getElementById(cId).click();
    }
</script>

3.响应事件
   protected void gdvTaskList_RowCommand(object sender, GridViewCommandEventArgs e)
    {
         if (e.CommandName == "Detail")
         {
  //在这里对你需要的数据信息进行输出
         SetClientInfo();//我的处理函数
    }
    }
 
GridView鼠标停留变色和单击处理事件,当鼠标在GridView的行上停留时,将该行变色,当单击该行时,做相应处理,记得要在<gridview ></gridview> 之间 加上RowDataBound=GVSelect_RowDataBound 属性


注释:
添加辅助列方法
<asp:TemplateField ItemStyle-CssClass="showcell" HeaderStyle-CssClass="showcell">
<ItemTemplate>
               <asp:LinkButton runat="server" ID="btnDetial" CommandName="Detail"  CommandArgument='<%# Eval("ID") %>'>辅助列</asp:LinkButton>
</ItemTemplate>
 </asp:TemplateField>

样式:
.showcell{
  DISPLAY:none;
 }

单击行后改变行样式,需在页面增加
<script language="javascript">
var prevselitem=null;
    function selectx(row)
    {
        if(prevselitem!=null)
        {
            prevselitem.style.backgroundColor='#ffffff';
        }
        row.style.backgroundColor='#8EC26F';
        prevselitem=row;   
    } 
</script>

调用方法,将后台语句
//单击/双击 事件
e.Row.Attributes.Add("OnClick", "ClickEvent('" + e.Row.Cells[10].FindControl("btnDetial").ClientID + "')");
改为:
e.Row.Attributes.Add("OnClick", "ClickEvent('" + e.Row.Cells[10].FindControl("btnDetial").ClientID + "');selectx(this)");

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值