GridView那点事之【鼠标划过该行实现高亮颜色显示】

最新推荐文章于 2021-05-08 15:15:13 发布

原创最新推荐文章于 2021-05-08 15:15:13 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GridView的360技巧分析专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种实现高效数据表展示与交互优化的方法，包括自增序号显示、鼠标移动时的颜色交替效果，以及隐藏指定列等功能，旨在提高用户在大量数据中的浏览和核对效率。

当表格中的数据很多的时候，如果没有高亮显示，用户在浏览数据的时候通常会很头疼。尤其是需要核对某一行数据信息的时候，我们应该怎么实现这个数据表格效果呢。

protected void GridViewPlan_RowDataBound(object sender, GridViewRowEventArgs e)//产品计划表的样式
        {
            if (e.Row.RowIndex != -1)//实现自增序号
            {
                int id = (e.Row.RowIndex + 1) + GridViewPlanDetail.PageIndex * GridViewPlanDetail.PageSize;
                e.Row.Cells[0].Text = id.ToString();
            }
            if (e.Row.RowType == DataControlRowType.DataRow) //判断是否是DataRow，以防止鼠标经过Header也有效果
            {
                //鼠标移动到每项时颜色交替效果
                e.Row.Attributes.Add("OnMouseOut", "this.style.backgroundColor='White';this.style.color='#003399'");
                e.Row.Attributes.Add("OnMouseOver", "this.style.backgroundColor='#6699FF';this.style.color='#8C4510'");
                //设置悬浮鼠标指针形状为"小手"
                e.Row.Attributes["style"] = "Cursor:hand";
            }

【或者方法2】

双击GridView的OnRowDataBound事件；
在后台的GridView1_RowDataBound()方法添加代码，最后代码如下所示：
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        int i;
        //执行循环，保证每条数据都可以更新
        for (i = 0; i < GridView1.Rows.Count; i++)
        {
            //首先判断是否是数据行
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //当鼠标停留时更改背景色
                e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#00A9FF'");
                //当鼠标移开时还原背景色
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
            }
        }

}

            //隐藏列方法
            if ((e.Row.RowType == DataControlRowType.DataRow) || (e.Row.RowType == DataControlRowType.Header) || (e.Row.RowType == DataControlRowType.Footer))
            {
                e.Row.Cells[6].Visible = false; //隐藏ID列
            }
        }