GridView鼠标单击选中行

最新推荐文章于 2020-04-17 19:05:35 发布
最新推荐文章于 2020-04-17 19:05:35 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： asp.net javascript 文章标签： webform server object random function xhtml

页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestWeb.gridview.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var lastNode = null;
        function SetColor1(t, evt) {
            var obj = window.event ? event.srcElement : evt.target;
            if (obj.tagName && (obj.tagName == "TABLE" || obj.tagName == "THEAD" || obj.tagName == "TBODY" || obj.tagName == "TFOOTER")) {
                return;
            }
            if (obj.tagName != "TR") {
                obj = obj.parentNode;
            }
            if (obj == t.rows[0]) return;
            if (lastNode) {
                lastNode.style.backgroundColor = lastNode.getAttribute("oldColor");
            }
            obj.setAttribute("oldColor", obj.style.backgroundColor);
            obj.style.backgroundColor = "#FF0000";
            lastNode = obj;
        }

        var lastClickNode = null;
        function SetColor2(oTr) {
            if (lastClickNode) {
                lastClickNode.style.backgroundColor = lastClickNode.getAttribute("oldColor");
            }
            oTr.setAttribute("oldColor", oTr.style.backgroundColor);
            oTr.style.backgroundColor = "#FF0000";
            lastClickNode = oTr;
        }
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h2>
        实现方法一</h2>
    <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">
    </asp:GridView>
    <h2>
        实现方法二</h2>
    <asp:GridView ID="GridView2" runat="server" OnRowDataBound="GridView2_RowDataBound">
        <AlternatingRowStyle BackColor="#9BCD9B" />
        <RowStyle BackColor="#EED2EE" />
    </asp:GridView>
    </form>
</body>
</html>

 

后台cs代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TestWeb.gridview
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        //测试数据
        String[] testColor = { "#FFB90F", "#DDA0DD", "#B5B5B5", "#90EE90", "#5D478B", "#2E8B57" };
        Random rd = new Random();
        protected void Page_Load(object sender, EventArgs e)
        {
            GridView1.DataSource = GridView2.DataSource = this.CreateMengxianhuiDataSource();
            GridView1.DataBind();
            GridView2.DataBind();
            GridView1.Attributes.Add("onclick", "SetColor1(this,event)");
 
        }

        protected System.Data.DataTable CreateMengxianhuiDataSource()
        {
            System.Data.DataTable dt = new System.Data.DataTable();
            System.Data.DataRow dr;
            dt.Columns.Add(new System.Data.DataColumn("id", typeof(System.Int32)));
            dt.Columns.Add(new System.Data.DataColumn("Name", typeof(System.String)));
            dt.Columns.Add(new System.Data.DataColumn("Count", typeof(System.Double)));
            dt.Columns.Add(new System.Data.DataColumn("CreateDate", typeof(System.DateTime)));

            System.Random rd = new System.Random();
            for (int i = 0; i < 10; i++)
            {
                dr = dt.NewRow();
                dr[0] = i + i;
                dr[1] = "【孟子E章】" + i.ToString();
                dr[2] = System.Math.Ceiling(rd.NextDouble() * 1000);
                dr[3] = DateTime.Now.AddDays(rd.Next(100) - rd.Next(100));
                dt.Rows.Add(dr);
            }
            return dt;
        }


        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("style", "background-color:" + testColor[rd.Next(testColor.Length - 1)]);
            }
        }
        protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onclick", "SetColor2(this)");
            }
        }
 
    }
}

以上为完整代码，拷贝复制到项目中即可用。

anguslzh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GridView 行单击与双击事件
01-08
GridView 行单击与双击事件，功能：单击选中行 双击打开详细页面 说明：
GridView中点击某行的任意位置就选中该行
weixin_30732825的博客
05-22 325
GridView中点击某行的任意位置就选中该行 2007-07-03 17:38:23 分类： 第一步：添加选择列 　　　　点击GridView右边小尖头，双击CommandField,选中＂选择＂，添加，将起设置为不可见； 第二步：处理＂ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证＂，在源文件中添加＂...
GridView单击行
weixin_30885111的博客
12-10 82
1.使用GridView提示选择到的行，可选择多行 问题？ 怎么样才能单击此行，其它的以前选择行取消选择状态呢。 步骤1.给GridView的创建RowCreated事件。具体代码如下： protected void gv_typelist_RowCreated(object sender, GridViewRowEventArgs e) { if (e.Row.RowT...
gridview 行单击事件
weixin_30438813的博客
12-13 89
是传递gridview选中行的值吗？假设你gridview的ID是gridview11、在gridview1的属性-行为的AutoGenerateSelectButton这项选择为true2、在gridview1的事件SelectedIndexChanged属性双击，在自动生成的方法里面添加//你可以截取选中行的其他列的属性，只要修改GridR.Cell[i]属性即可protecte...
GridView行选择事件,单击GridView中某一行任意位置提出这条记录
曾俊的博客
09-27 8329
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
10-29
在JavaScript和ASP.NET中，实现GridView控件的单选效果，并自动设置交替行、选中行和鼠标移动行的背景色是一项常见的需求。这有助于提高用户界面的可读性和交互性。以下是如何通过JS实现这一功能的详细步骤： 1. **...
gridview选中变色实现方法,.net
03-09
- **多行选中**：允许用户同时选择多行，并对选中行进行特殊标记或操作。 - **响应式设计**：确保在不同设备和屏幕尺寸下的显示效果一致。 #### 总结 通过以上介绍，我们了解到如何在.NET中使用ASP.NET的GridView...
GridView使用集合
11-12
1、JavaScript设置GridView行的背景颜色，单偶行的背景颜色，鼠标停留行背景，鼠标选中时的行背景 2、GridView的JavaScript中的行单击，双击、删除提示框、快捷键事件 3、GridView设置属性，单元格文本颜色，单元格...
GridView的行单击事件 选中行的数据提取
weixin_43530314的博客
04-17 1084
找了好久，第1点非常重要 1、在gridview1的 属性-行为的 AutoGenerateSelectButton 这项选择为true 2、在gridview1的事度件SelectedIndexChanged 属性 双击，在自动生成的方法里回面添加 //你可以截取选中行的其他列的属性，只要修改GridR.Cell[i]属性即答可 protected void GridView1_Selected...
GridView的点击事件
05-10
GridView的点击事件 GridView的点击事件 GridView的点击事件
android gridview默认显示部分数据，点击按钮显示全部，再点击回到默认状态，选中变颜色
03-29
gridview中先确定有两行，每行三列，放第五个数据之后动态给list添加一个“更多分类”的按钮，点击“更多分类之后”展开显示全部，并且在最后加上“收起”的按钮，在点击“收起”之后回到两行的状态并且出现“更多分类”按钮，隐藏“收起”按钮。并且“更多分类”、“收起”和被选中变色
GridView 单击选择行，双击打开详细页面，鼠标移到某行上变色
逆水行舟
07-17 4131
protected void gvwDepartment_RowDataBound(object sender, GridViewRowEventArgs e) {//判断是否是数据行 if (e.Row.RowState == DataControlRowState.Edit) { // 编辑状态 e.Row.At
[转载]GridView中点击某行的任意位置就选中该行
weixin_30632883的博客
09-04 287
原文链接：http://www.cnblogs.com/Echo529/p/4521701.html GridView中点击某行的任意位置就选中该行 分类： 第一步：添加选择列 　　　　点击GridView右边小尖头，双击CommandField,选中＂选择＂，添加，将起设置为不可见； 第二步：处理＂ClientScriptManager.RegisterForEve...
DEV GridView 单击行选中/取消选中
mqney.com的博客
12-16 3333
/// /// 单击行，选中/不选中行中的checkbox（直接选checkbox不容易控制状态） /// 循环所有行，处理数据 /// /// /// private void gridView_recheckItem_RowClick(object sender, DevExpress.Xt
GridView行的单击/双击事件
web开发自学
07-26 672
为GridView的行添加单击/双击事件： 一：单击/双击事件一般情况下是不能同时使用的，点加行事件有几种方式：protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { for (int i = 0; i &lt; GridView1.Rows.Count + 1; i++) { ...
[原创]扩展GridView实现多选（全选）、点击行任意位置选择行、选中变色、添加双击事件等...
weixin_30498807的博客
06-05 225
本文适合asp.net初学者阅读，高手达人可以无视。 主要功能： a.隔行色（颜色可自定义） b.点击行任意位置选择行 c.点击已选中行任意位置取消选择 d.选中行变色（颜色可自定义） e.多选全选功能 f.添加双击响应事件 GridView控件功能非常强大，但在具体应用中很多时候无法满足特殊需求。例如我前段时间做自己网站(网站制作学习吧)。在编写后台管理版块期间。由于是文章站，列...
GridView单击事件和长按事件遇到的问题
小寒的博客
03-31 427
GridView单击事件和长按事件遇到的问题 最开始只使用了单击事件，后来增加需求，增加了长按功能，但是一直没有效果，百度，自己找资料，最终找到原因，特记录下来 1，单击事件 gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public...
C#光标移动到GridView某一行及选中某一行
weixin_30338481的博客
06-23 1096
//鼠标移动表格行变色功能 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { //首先判断是不是数据行 if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Cells[0].Attributes.Add("style"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值