我要实现的功能:在Gridview里有全选/反选,全选时改变其背景色,单选(1:选择行时改变该行的背景色并且该行的checkbox要被选中2.点击gridview里的checkbox时改变整行的背景色)

解决方案 »

  1.   

    好多功能啊。。
    滑过变色 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                //鼠标滑过时,改变颜色
                e.Row.Attributes.Add("onmouseover", "myc = this.style.backgroundColor;this.style.backgroundColor='#507CD1'");
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=myc");            e.Row.Cells[0].Visible = false;
            }
    单击变色
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %><!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>
    </head>
    <script language="javascript">
    function yourfunction(obj){
                 for(var i=0;i<22;i++)
                 {
                     document.getElementById(i).style.backgroundColor="#400000";
                 }
                 document.getElementById(obj).style.backgroundColor="red";              
            }    
    function yourfunction2(obj){
                  alert(obj);            
            } 
    </script>
    <body>
        <form runat="server">
        <div>
            <asp:GridView runat="server" AutoGenerateColumns="False" DataKeyNames="au_id"
                DataSourceID="SqlDataSource1"  OnRowCreated="GridView1_RowDataBound" EnableSortingAndPagingCallbacks="True" >
                <Columns>
                    <asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" />
                    <asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" />
                    <asp:BoundField DataField="au_fname" HeaderText="au_fname" SortExpression="au_fname" />
                    <asp:BoundField DataField="phone" HeaderText="phone" SortExpression="phone" />
                    <asp:BoundField DataField="address" HeaderText="address" SortExpression="address" />
                    <asp:BoundField DataField="city" HeaderText="city" SortExpression="city" />
                    <asp:BoundField DataField="state" HeaderText="state" SortExpression="state" />
                    <asp:BoundField DataField="zip" HeaderText="zip" SortExpression="zip" />
                    <asp:CheckBoxField DataField="contract" HeaderText="contract" SortExpression="contract" />
                </Columns>
                <SelectedRowStyle BackColor="#400000" BorderStyle="Double" />
            </asp:GridView>
            <asp:SqlDataSource runat="server" ConnectionString="<%$ ConnectionStrings:pubsConnectionString %>"
                SelectCommand="SELECT * FROM [authors]"></asp:SqlDataSource>
        
        </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 Default4 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.GridView1.SelectedIndex = 0;
        }
        protected   void   GridView1_RowDataBound(object   sender,   GridViewRowEventArgs   e)
        { 
            if (e.Row.RowType == DataControlRowType.DataRow) 
            { 
                for (int i = 0; i <= GridView1.Rows.Count; i++) 
                {
                    e.Row.Attributes.Add("onclick", "yourfunction(" +i+ ");");
                    e.Row.Attributes.Add("id",""+i+"");
                    e.Row.Attributes.Add("ondblclick", "yourfunction2(" + i + ");");
                } 
            } 
        } 
      
    }
    window.onload = function(){
                var grid = document.getElementById("GridView1").children[0].children;
                for(var i=1;i<grid.length;i++){
                    grid[i].style.cursor="pointer";
                    grid[i].onclick=function(){
                        for(var i=1;i<grid.length;i++){
                            grid[i].style.backgroundColor="white";
                        }
                        this.style.backgroundColor="red";
                    }
                }
            }全选
    一个个搜
      

  2.   

    单选还是不能实现我要的效果,单击时不管选中行的哪一列都能改变该行的颜色并且还要checkbox被选中,求高手帮忙!
      

  3.   


    protected   void   GridView1_RowDataBound(object   sender,   GridViewRowEventArgs   e) 

          if   (e.Row.RowType   ==   DataControlRowType.DataRow) 
          { 
                  CheckBox   cb   =   (CheckBox)e.Row.Cells[模版列索引].FindControl( "CheckBox的id "); 
                  if(cb.checked) 
                    { 
                            e.Row.BackColor   =   Color.Red; 
                      } 
          } 
    }
      

  4.   


    var checkboxid="";
    function checkboxCheck(id){checkboxid="tr"+id; if(document.getElementById(id).checked){
      
      
    $("#"+checkboxid).css("background-color","#F7F7F7"); }else{

    $("#"+checkboxid).css("background-color","White"); }}function AllCheck()
    {
    var a = document.getElementsByName("ckSP");   
    for (var   i=0;   i<a.length;   i++)   
    {   
        a[i].checked=true;
        
         $("#"+"tr"+a[i].id).css("background-color","#F7F7F7");
         
    }
     document.getElementById("selectAll").onclick=NotAllCheck;
    }function NotAllCheck()
    {
    var a = document.getElementsByName("ckSP");   
    for (var   i=0;   i<a.length;   i++)   
    {   
        a[i].checked=false;
         $("#"+"tr"+a[i].id).css("background-color","White"); }
    document.getElementById("selectAll").onclick=AllCheck;}
      

  5.   

    GridView实例源码
      

  6.   

    如果有的话那更好啦,一个单击的(只要我选中行,行的背景色要变,在该行里的checkbox要被选中),一个是全选的(所有checkbox被选中,所有行的背景色都要变)我一直在纠结这个问题,不知道怎么实现,希望你能帮忙
      

  7.   

      e.Row.Attributes.Add("onmousedown", "javascript:if(this.bgColor=='#c4d2ea'){this.bgColor='#F0F0E8';}else{this.bgColor='#c4d2ea';}");
                    e.Row.Attributes.Add("onclick", cb.ClientID + ".checked=(!" + cb.ClientID + ".checked);");这样写可以实现单击行变色,checkbox被选中,但不是不能全选,点击checkbox时也不会选中,只改变了背景色
       e.Row.Attributes.Add("onclick", "javascript:if(this.bgColor=='#c4d2ea'){this.bgColor='#F0F0E8';}else{this.bgColor='#c4d2ea';}");
    这样与上面的正好相反,我都不知要怎么改了
      

  8.   

    本帖最后由 net_lover 于 2011-08-25 08:52:51 编辑
      

  9.   

    参考:
    http://www.cnblogs.com/insus/articles/1411613.html
      

  10.   

      var table = "<%=gvShow.ClientID %>";我这句话会报错:
    “/”应用程序中的服务器错误。
    --------------------------------------------------------------------------------控件包含代码块(即 <% ... %>),因此无法修改控件集合。 
    说明: 执行当前 Web 请求期间,出现未经处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息。
    不知道怎么改啊