Gridview鼠标移入高亮显示,以及整行选择获取数据弹窗。

先些几个javascript方法:
HeightLight.js:

 1 function onmouseoutColor1(source)
 2 {
 3     source.style.backgroundColor='#fffbd6';
 4     source.style.color='black';
 5 }
 6 
 7 function onmouseoverColor1(source)
 8 {
 9     source.style.backgroundColor='#990000';
10     source.style.color='#FFFFFF';
11 }
12 
13 function onmouseoutColor2(source)
14 {
15     source.style.backgroundColor='#FFFFFF';
16     source.style.color='black';
17 }
18 
19 function onmouseoverColor2(source)
20 {
21     source.style.backgroundColor='#990000';
22     source.style.color='#ffffff';
23 }

 

分别控制鼠标移入移出的颜色变换。
GridView里面记得要加上这个：

<asp:CommandField    ShowSelectButton="True"   SelectText=" "  Visible="false"> 
                         <ItemStyle  Width="10px"  />
</asp:CommandField > 

 

SelectText为空就好,不加有时javascript会报错.另外,Page指令里面的EnableEventValidation="false".是否自动触发回调函数,
不设置为false好像会报个javascript的错误.让他等于false对以后的代码没有什么影响,有人说好像用了之后不能更新和删除,我试了
下,可以的.放心用吧.
下面是后台PageLoad代码:

    protected void Page_Load(object sender, EventArgs e)
    {
        //加載前臺高亮顯示腳本
        if (ClientScript.IsClientScriptBlockRegistered(this.GetType(),"HighLight"))
        {
            Page.ClientScript.RegisterClientScriptInclude("HighLight", "scripts/HeightLight.js");
        }

        if (!IsPostBack)
        {
            //一定要把OFFICE_ID放到DataKeyNames集合中，不然取不到隱藏列的值。（2003可以取到,2005,2008取出来是空值。）
           gvShow.DataKeyNames = new string[] { "OFFICE_ID" };
           BindgvShow();
        }
    }

 

行绑定事件:

 1 private int lineNO = 0;//0为奇数列，1为偶数列
 2 protected void gvShow_RowDataBound(object sender, GridViewRowEventArgs e)
 3     {
 4         //int lineNO = 0;//0为奇数列，1为偶数列
 5         //加載鼠標移入，移出事件。
 6         switch (e.Row.RowType)
 7         {
 8             case DataControlRowType.Header:
 9                 e.Row.BackColor = Color.FromArgb(153, 0, 0);
10                 e.Row.ForeColor = Color.White;
11                 break;
12             case DataControlRowType.DataRow:
13                 if (lineNO == 0)
14                 {
15                     e.Row.BackColor = Color.FromArgb(255, 251, 214);
16                     e.Row.Attributes.Add("style", "cursor:pointer;");
17                     e.Row.Attributes.Add("onmouseout", "onmouseoutColor1(this);");
18                     e.Row.Attributes.Add("onmouseover", "onmouseoverColor1(this);");
19 
20                     lineNO = 1;
21                 }
22                 else
23                 {
24                     e.Row.BackColor = Color.White;
25                     e.Row.Attributes.Add("style", "cursor:pointer;");
26                     e.Row.Attributes.Add("onmouseout", "onmouseoutColor2(this);");
27                     e.Row.Attributes.Add("onmouseover", "onmouseoverColor2(this);");
28 
29                     lineNO = 0;
30                 }
31                 break;
32         }
33     }

 

当行绑定的时候把初始颜色,和javascript鼠标移入移出事件绑定到控件.其中
e.Row.Attributes.Add("style", "cursor:pointer;");
这句代码使得鼠标移入GridView就变成一个手指的样子,让用户一看就知道该GridView支持点击.

另外想取隐藏列的值.在cs和vs2003里可以直接取道,vs2005,vs2008不行,本人多次调试发现每次传出的是个"",
即null值,随即用了别的方法:gvShow.DataKeyNames = new string[] { "OFFICE_ID" };
加载时把GridView的DataKeyNames 绑定你要取的隐藏列.这样就可以在后面代码中轻松取道值了,以下会详细解说.

好了,下面是行创建事件:

 protected void gvShow_RowCreated(object sender, GridViewRowEventArgs e)
2     {
3         //选择整行
4         if (e.Row.RowType == DataControlRowType.DataRow)
5         {
6             e.Row.Attributes.Add("onClick", "javascript:__doPostBack('" + gvShow.ID + "','Select$" + e.Row.RowIndex + "');");
7         }
8     }

 

用于将控件ID和每行的下标绑定,只要哪行被onClick,便会发出去一条javascript代码.

最后我们编辑SelectIndexChange事件：

 1 protected void gvShow_SelectedIndexChanged(object sender, EventArgs e)
 2     {
 3         if (((GridView)sender).SelectedRow!=null)
 4         {
 5            //取DateKey集合里面的值。
 6             string selectOfficeID = gvShow.DataKeys[gvShow.SelectedIndex].Value.ToString();
 7            //将值传出、
 8            Response.Redirect("www.google.com?officeId="+selectOfficeID );
 9         }
10     }

 

好了,虽然看上去麻烦,不过效果还会问不错哦,可以随时改变颜色.可以整行选择,选择了以后还可以连接或者弹窗,
弹窗了以后还可以传值,好像基本功能都做到了.看似代码多,其实整合以下.把代码封装到框架里面,应该会控制在
10行以下吧,!我也是刚刚弄出来,先弄上来分享分享,待会还要整合到框架里面给他们封装好,让他们直接调用.就到
这吧.

 效果图如下：