GridView实现点击变色的winform效果
1.在GridView中加入ridiobutton控件
<asp:GridView ID="GridView1" runat="server"
DataSourceID="ObjectDataSource1" SkinID="common" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="depId" HeaderText="部门编号" SortExpression="depId"/>
<asp:BoundField DataField="depName" HeaderText="部门名称" SortExpression="depName"/>
<asp:BoundField DataField="principal" HeaderText="负责人" SortExpression="principal"/>
<asp:BoundField DataField="depMemo" HeaderText="备注" SortExpression="depMemo" />
<asp:TemplateField InsertVisible="False">
<ItemTemplate>
<input id='<%#"select_" + DataBinder.Eval(Container, "dataitem.depId")%>' name="select" type="radio" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
2.在GridView的RowDataBound事件里写入变色代码DataSourceID="ObjectDataSource1" SkinID="common" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="depId" HeaderText="部门编号" SortExpression="depId"/>
<asp:BoundField DataField="depName" HeaderText="部门名称" SortExpression="depName"/>
<asp:BoundField DataField="principal" HeaderText="负责人" SortExpression="principal"/>
<asp:BoundField DataField="depMemo" HeaderText="备注" SortExpression="depMemo" />
<asp:TemplateField InsertVisible="False">
<ItemTemplate>
<input id='<%#"select_" + DataBinder.Eval(Container, "dataitem.depId")%>' name="select" type="radio" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataRowView row = (DataRowView)e.Row.DataItem;
string id = row["depId"].ToString();
e.Row.Attributes.Add("onclick", "select" + id + "checked=true;");
}
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "if(this!=prev){c=this.style.backgroundColor;this.style.backgroundColor='#D8F3C6'}");//当鼠标停留时更改背景色
e.Row.Attributes.Add("onmouseout", "if(this!=prev){this.style.backgroundColor=c}");//当鼠标移开时还原背景色
e.Row.Attributes["style"] = "Cursor:hand";//设置悬浮鼠标指针形状为"小手"
//DataRowView row = (DataRowView)e.Row.DataItem;
//string id = row["depId"].ToString();
//e.Row.Attributes.Add("onclick", "select_" + e.Row.Cells[0].Text + ".checked=true;");
e.Row.Attributes.Add("onclick", "select_" + e.Row.Cells[0].Text + ".checked=true;selectx(this)");
}
}
3.在前台js脚本写控制函数{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataRowView row = (DataRowView)e.Row.DataItem;
string id = row["depId"].ToString();
e.Row.Attributes.Add("onclick", "select" + id + "checked=true;");
}
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "if(this!=prev){c=this.style.backgroundColor;this.style.backgroundColor='#D8F3C6'}");//当鼠标停留时更改背景色
e.Row.Attributes.Add("onmouseout", "if(this!=prev){this.style.backgroundColor=c}");//当鼠标移开时还原背景色
e.Row.Attributes["style"] = "Cursor:hand";//设置悬浮鼠标指针形状为"小手"
//DataRowView row = (DataRowView)e.Row.DataItem;
//string id = row["depId"].ToString();
//e.Row.Attributes.Add("onclick", "select_" + e.Row.Cells[0].Text + ".checked=true;");
e.Row.Attributes.Add("onclick", "select_" + e.Row.Cells[0].Text + ".checked=true;selectx(this)");
}
}
<script language="javascript" type="text/javascript" >
var prev=null;
function selectx(row) /*改变选中行的颜色还原为选中行的颜色*/
{
if(prev!=null)
{
prev.style.backgroundColor='#E4F7D8';
}
row.style.backgroundColor='#8EC26F';
prev=row;
}
</script>
最后,记得在后台用Request.Form["select"]来接收选中的值。另外,想效果好些就把那radiobuttou给隐藏了。var prev=null;
function selectx(row) /*改变选中行的颜色还原为选中行的颜色*/
{
if(prev!=null)
{
prev.style.backgroundColor='#E4F7D8';
}
row.style.backgroundColor='#8EC26F';
prev=row;
}
</script>