62,264
社区成员
发帖
与我相关
我的任务
分享<%@ Page Language="C#" AutoEventWireup="true" CodeFile="1.aspx.cs" Inherits="设置属性_GridviewBackgroundColor" %>
<!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 id="Head1" runat="server">
<title>会员列表</title>
<link href="~/CSS/Gridview.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//把事件放在onload里,
//使用<%=%>方式输出GridView的ID是因为某些情况下(如使用了MasterPage)会造成HTML中ID的变化
//颜色值推荐使用Hex,如 #f00 或 #ff0000
window.onload = function(){
GridViewColor("<%=GridView1.ClientID%>","#fff","#eee","#6df","#fd6");
}
//参数依次为(后两个如果指定为空值,则不会发生相应的事件):
//GridView ID, 正常行背景色,交替行背景色,鼠标指向行背景色,鼠标点击后背景色
function GridViewColor(GridViewId, NormalColor, AlterColor, HoverColor, SelectColor){
//获取所有要控制的行
var AllRows = document.getElementById(GridViewId).getElementsByTagName("tr");
//设置每一行的背景色和事件,循环从1开始而非0,可以避开表头那一行
for(var i=1; i<AllRows.length; i++){
//设定本行默认的背景色
AllRows[i].style.background = i%2==0?NormalColor:AlterColor;
//如果指定了鼠标指向的背景色,则添加onmouseover/onmouseout事件
//处于选中状态的行发生这两个事件时不改变颜色
if(HoverColor != ""){
AllRows[i].onmouseover = function(){if(!this.selected)this.style.background = HoverColor;}
if(i%2 == 0){
AllRows[i].onmouseout = function(){if(!this.selected)this.style.background = NormalColor;}
}
else{
AllRows[i].onmouseout = function(){if(!this.selected)this.style.background = AlterColor;}
}
}
//如果指定了鼠标点击的背景色,则添加onclick事件
//在事件响应中修改被点击行的选中状态
if(SelectColor != ""){
AllRows[i].onclick = function(){
this.style.background = this.style.background==SelectColor?HoverColor:SelectColor;
this.selected = !this.selected;
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<asp:GridView ID="GridView1" BorderColor="Black" OnRowDataBound="GridView1_RowDataBound" AllowPaging="True" runat="server" AutoGenerateColumns="False" Font-Size="12px" Width="549px" OnPageIndexChanging="GridView1_PageIndexChanging">
<Columns>
<asp:BoundField DataField="UserID" HeaderText="编号" />
<asp:BoundField DataField="Username" HeaderText="账号" />
<asp:BoundField DataField="RealName" HeaderText="姓名" />
<asp:BoundField DataField="Userphone" HeaderText="电话" />
<asp:BoundField DataField="Useraddress" HeaderText="住址" />
<asp:BoundField DataField="Userpostcode" HeaderText="邮编" />
<asp:CommandField HeaderText="删除" ShowDeleteButton="True" />
</Columns>
<HeaderStyle BackColor="Azure" Font-Size="12px" HorizontalAlign="Center" />
<RowStyle HorizontalAlign="Center" />
<PagerStyle HorizontalAlign="Center" />
</asp:GridView>
<br />
</div>
</form>
</body>
</html>
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.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class 设置属性_GridviewBackgroundColor : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bind();
}
}
/// <summary>
/// 绑定数据
/// </summary>
public void bind()
{
string sqlStr = "select * from Myusers";
DataSet myds = Common.dataSet(sqlStr);
GridView1.DataSource = myds;
GridView1.DataKeyNames = new string[] { "UserID" };
GridView1.DataBind();
}
/// <summary>
/// 在 GridView 控件中的某个行被绑定到一个数据记录时发生。此事件通常用于在某个行被绑定到数据时修改该行的内容。
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
//遍历所有行设置边框样式
foreach (TableCell tc in e.Row.Cells)
{
tc.Attributes["style"] = "border-color:Black";
}
//用索引来取得编号
if (e.Row.RowIndex != -1)
{
int id = GridView1.PageIndex * GridView1.PageSize + e.Row.RowIndex + 1;
e.Row.Cells[0].Text = id.ToString();
}
}
/// <summary>
/// 在单击页导航按钮时发生,但在 GridView 控件执行分页操作之前。此事件通常用于取消分页操作。
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
bind();
}
/// 在单击 GridView 控件内某一行的 Delete 按钮(其 CommandName 属性设置为“Delete”的按钮)时发生,但在 GridView 控件从数据源删除记录之前。此事件通常用于取消删除操作。
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
string sqlStr = "delete from Myusers where UserID=" + Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value) + "";
Common.ExecuteSql(sqlStr);
bind();
}
}