Javascript实现GridView无刷新选择一行
用Javascript可以实现对GridView中某一行选择，而无需进行页面的刷新。
首先要在GridView的onrowdatabound的event handler中为GridView中的每一行onclick绑定event handler (Javascript)。假如GridView代码如下：
<asp:GridView runat="server" id="GridViewCategory" AutoGenerateColumns="False"
Width="100%" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid"
BorderWidth="3px" CellPadding="4" CellSpacing="2"
ForeColor="Black" onrowdatabound="GridViewCategory_RowDataBound">
<RowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Description" HeaderText="Category" />
Columns>
<FooterStyle BackColor="#CCCCCC" />
<PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
asp:GridView>
onrowdatabound的event handler代码如下：
protected void GridViewCategory_RowDataBound(object sender, GridViewRowEventArgs e)
{
try
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.ID = e.Row.Cells[0].Text;
e.Row.Attributes.Add("onclick", "GridView_selectRow(this, '" + e.Row.Cells[0].Text + "')");
}
}
catch (Exception ex)
{
throw new ApplicationException(ex.Message);
}
}
最后，GridView中每一行的onclick event handler的Javascript代码如下：
<script type="text/javascript">
var lastRowSelected;
function GridView_selectRow(row, description) {
if (lastRowSelected != row) {
if (lastRowSelected != null) {
lastRowSelected.style.backgroundColor = 'White';
lastRowSelected.style.color = 'Black';
}
}
row.style.backgroundColor = '#000099';
row.style.color = 'White';
lastRowSelected = row;
document.getElementById("<%=TextBoxCategory.ClientID%>").value = description;
}
script>
