[翻译]GridView中单击TextBox后使所在的行高亮

摘要：本文翻译自AzamSharp 的文章Highlighting Rows with TextBox OnFocus

地址是：http://gridviewguy.com/ArticleDetails.aspx?articleID=194。在保证原文意思的基础上有些地方用了自己的理解来翻译。

 

介绍：作者（原文中的”I”,下同）以前曾写过如何实现当鼠标经过GridView的一个行时使其变成高亮。在另外一篇文章中作者介绍了如何实现让GridView当中的行可以当其被单击的时候变成高亮。在这个文章中，作者会介绍如何实现当GridView控件当中的一个TextBox获得焦点后其所在的行变成高亮。

 

相关：

当鼠标移过的时候GridView的行改变：这篇文章描述怎么实现当鼠标指针指向一个行的时候让其颜色发生变化。

当鼠标单击的时候GridView的行改变：这篇文章描述当用户单击一个行的时候如何改变其颜色。

 

数据库：

在本文中作者用到一个名为“School”的数据库。这个数据库包含一个叫Users的表，里面记录用户的信息。此表的具体结构请参见下图：

 

 

数据填充到GridView:

第一步需要做的是填充GridView控件，下面的BindData方法是用来连接数据库并且把需要的数据装入到GridView控件当中的。此方法如下所示：

 1private void BindData()
 2
 3{
 4
 5SqlConnection myConnection 
 6
 7= new SqlConnection("Server=localhost;Database=School;Trusted_Connection=true");
 8
 9SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Users", myConnection);
10
11DataSet ds = new DataSet();
12
13ad.Fill(ds); 
14
15// assign the data source 
16
17gvUsers.DataSource = ds;
18
19gvUsers.DataBind(); 
20
21}
22

下一步需要做的就是填加一个TextBox控件到GridView控件里，这个TextBox控件就是要实现的当其获得焦点时使其所在的行变成高亮。

填加一个有TextBox控件的模板列：

为了填加一个TextBox到GridView里我们需要建立一个模板列。大多数情况下作者（包括我在内）还是建议用模板列来代替数据绑定列的，因为摸板列里的控件你是可以通过编程的方法访问到的，比如FindControl（注：此处为根据自己的理解所译，原文为：The reason is that by using the Template Column you can refer to the column by finding the control which exists inside the column）。而数据绑定的列只能以索引的方式来访问，这样如果你以后要再插入一个列的话，那么相关的列的索引值就会发生变化。我们插入到GridView的摸板列的代码如下所示：

 1<asp:GridView ID="gvUsers" runat="server" CellPadding="4" Font-Names="Verdana" ForeColor="#333333" GridLines="None" OnRowDataBound="gvUsers_RowDataBound">
 2
 3<Columns>
 4
 5<asp:TemplateField HeaderText="Points">
 6
 7<ItemTemplate>
 8
 9<asp:TextBox ID="txtPoint" runat="server" />
10
11</ItemTemplate>
12
13</asp:TemplateField>
14
15<asp:TemplateField HeaderText="First Name"> 
16
17<ItemTemplate>
18
19<asp:Label ID="lblFirstName" runat="server" Text='<%# Eval("FirstName") %>' />
20
21</ItemTemplate>
22
23</asp:TemplateField>
24
25<asp:TemplateField HeaderText="Address">
26
27<ItemTemplate>
28
29<asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>' />
30
31</ItemTemplate>
32
33</asp:TemplateField> 
34
35</Columns>
36
37<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
38
39<RowStyle CssClass="RowStyleBackGroundColor" ForeColor="#333333" />
40
41<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
42
43<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
44
45<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
46
47<AlternatingRowStyle CssClass="RowAlternateStyleBackGroundColor" />
48
49</asp:GridView>
50
51

现在，我们运行一下程序来看看GridView中的数据，此数据是我们虚拟出来的。

 

 

你可能留意到了作者应用了CSS，此CSS如下所示：

.RowStyleBackGroundColor

{}{

background-color:#FFFBD6; 

}

.RowAlternateStyleBackGroundColor 

{}{

background-color:White; 

}

.HighLightRowColor 

{}{

background-color:Yellow; 

}

最后我们需要实现的就是当GridView里的TextBox获得焦点的时候让其所在的行变成高亮的功能。

用JavaScript实现高亮：

我们需要在TextBox获得焦点的时候让其所在的行变成高亮。我们可以填加客户端”OnFoucs”事件到TextBox控件中。这个获得焦点的时间当控件获得焦点的时候被触发。让我们来看看如下的代码是如何填加这个事件到TextBox控件当中的。

 

<asp:TextBox onFocus="ChangeColor()" ID="txtPoint" runat="server" />

 

方法ChangeColor()的实现如下。同样，你会注意到有一个变量oldRowColor被声明成public用来记录上一个颜色的名。属性window.event.srcElement是用来获得出发这个事件控件的名。obj.parentElement.parentElement会返回<tr>标记代表当前行已经被创建完毕。后面的"HighLightRowColor"值被赋给被高亮的那一行的obj类类型。

<script language="javascript">

var oldRowColor; 

// this function is used to change the backgound color 

function ChangeColor() 

{

var obj = window.event.srcElement;

if(obj.tagName == "INPUT" && obj.type == "text") 

{

obj = obj.parentElement.parentElement;

oldRowColor = obj.className; 

obj.className = "HighLightRowColor";

} 

}

到目前为止还没有完成，我们需要实现onBlur事件来实现当用户焦点离开控件时发生的动作，代码如下：

 

<asp:TextBox onBlur="ResetColor()" onFocus="ChangeColor()" ID="txtPoint" runat="server" />

 

下面的代码是方法ResetColor的实现。

// this function is used to reset the background color 

function ResetColor() 

{

var obj = window.event.srcElement;

if(obj.tagName == "INPUT" && obj.type == "text") 

{

obj = obj.parentElement.parentElement;

obj.className = oldRowColor; 

} 

}

ResetColor简单地把类的名通过公共变量oldRowColor赋给了类的名。这个方法把列恢复成原来的颜色。

 

 

现在运行这个程序然后把鼠标移到GridView里的文本框上，那么这一行就变成了高亮状态。这个功能当你有包含大量记录的GridView控件提供给用户更好的体验是很有用的。而当用户在输入数据时，当他们想确定正在输入的是哪行数据的时候是很管用的。

 

总结：

高亮状态的行可以通过很多不同的方法来实现并且也取决于程序的环境。本文作者并没有提及当GridView处于编辑状态时的情况。

I hope you liked the article, happy coding!