logo

一个 GridView 全选、单选、点击改变背景颜色的例子

作者:孟宪会 阅读:879 发表于:2011-08-24 21:16:50

查看效果

全部代码

ASPX 代码
<%@ Page Language="C#" EnableEventValidation="false" %>

<%@ Import Namespace="System.Net" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<script runat="server">
  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.AddSeconds(rd.Next(Int32.MaxValue));
      dt.Rows.Add(dr);
    }
    
return dt;
  }


  protected
void Page_Load(object sender, EventArgs e)
  {
    
if (!Page.IsPostBack)
    {

      GridView1.DataSource
= CreateMengxianhuiDataSource();
      GridView1.DataBind();

    }
  }


  protected
void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  {
    
if (e.Row.RowType == DataControlRowType.Header)
    {
      CheckBox h
= e.Row.FindControl("h") as CheckBox;
      h.Attributes.Add(
"onclick", "SelectAll(this)");
    }
    
else if (e.Row.RowType == DataControlRowType.DataRow)
    {
      e.Row.Attributes.Add(
"onclick", "CheckTr(this,event)");
      e.Row.Attributes.Add(
"class", e.Row.RowIndex % 2 == 0 ? "odd" : "even");
      e.Row.Attributes.Add(
"oldClass", e.Row.RowIndex % 2 == 0 ? "odd" : "even");
      e.Row.Attributes.Add(
"onmouseover", "lastBackgroundColor=this.className;this.className='current'");
      e.Row.Attributes.Add(
"onmouseout", "this.className=lastBackgroundColor;");
    }
  }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  
<title></title>
  
<style type="text/css">
    .checked
{ background: #F00; }
    .odd
{ background: #72FE95; }
    .even
{ background: #B8E2EF; }
    .current
{ background: #FFDD75; }
  
</style>
  
<script type="text/javascript">
    
var table = "<%=GridView1.ClientID %>";
    
var oldBg;
    
function SelectAll(ele) {
      t
= document.getElementById(table);
      
for (i = 1; i < t.rows.length; i++) {
        t.rows[i].cells[
0].children[0].checked = ele.checked;
        
if (t.rows[i].cells[0].children[0].checked) {
          t.rows[i].className
= "checked";
        }
        
else {
          t.rows[i].className
= t.rows[i].getAttribute("oldClass");
        }
      }
    }

    
function CheckTr(tr, evt) {
      ele
= evt.target || event.srcElement;
      
if (ele.tagName && ele.tagName != "INPUT")
        tr.cells[
0].children[0].checked = !tr.cells[0].children[0].checked;
      
if (tr.cells[0].children[0].checked) {
        lastBackgroundColor
= tr.className = "checked";
      }
      
else {
        lastBackgroundColor
= tr.className = tr.getAttribute("oldClass");
      }
    }
  
</script>
</head>
<body>
  
<form id="form1" runat="server">
  
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">
    
<Columns>
      
<asp:TemplateField>
        
<HeaderTemplate>
          
<asp:CheckBox ID="h" runat="server" />
        
</HeaderTemplate>
        
<ItemTemplate>
          
<asp:CheckBox ID="d" runat="server" />
        
</ItemTemplate>
      
</asp:TemplateField>
      
<asp:BoundField DataField="Name" HeaderText="姓名" />
      
<asp:BoundField DataField="Name" HeaderText="姓名" />
      
<asp:BoundField DataField="Name" HeaderText="姓名" />
    
</Columns>
  
</asp:GridView>
  
</form>
</body>
</html>