Javascript实现GridView无刷新选择一行
2011-07-08 08:44
363 查看
以前在网上找过不少方法,但不是不好用就是要刷新页面,昨天把以前做的一个需要刷新选中行的代码修改了一下,还挺好用,拿出来大家分享一下,有需要改进之处,欢迎指正!
实现方式:通过javascript进行控制,点击行中任何一个位置,改行被选中变色。
1、首先在.aspx页面块中添加javascript
<script type="text/javascript">
var prevselitem=null;
function selectx(row)
{
if(prevselitem!=null)
{
prevselitem.style.backgroundColor='#ffffff';
}
row.style.backgroundColor='PeachPuff';
prevselitem=row;
}
</script>
2、然后修改GridView,添加事件OnRowDataBound,如:
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" Width="100%" PageSize="12" OnRowDataBound="GridView1_RowDataBound">
//省略...
</asp:GridView>
3、最后在.aspx.cs页面中添加
protected void GridView1_RowDataBound(object sender,GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "if(this!=prevselitem){this.style.backgroundColor='#Efefef'}");//当鼠标停留时更改背景色
e.Row.Attributes.Add("onmouseout", "if(this!=prevselitem){this.style.backgroundColor='#ffffff'}");//当鼠标移开时还原背景色
e.Row.Attributes.Add("onclick", e.Row.ClientID.ToString() + ".checked=true;selectx(this)");
}
}
OK!
实现方式:通过javascript进行控制,点击行中任何一个位置,改行被选中变色。
1、首先在.aspx页面块中添加javascript
<script type="text/javascript">
var prevselitem=null;
function selectx(row)
{
if(prevselitem!=null)
{
prevselitem.style.backgroundColor='#ffffff';
}
row.style.backgroundColor='PeachPuff';
prevselitem=row;
}
</script>
2、然后修改GridView,添加事件OnRowDataBound,如:
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" Width="100%" PageSize="12" OnRowDataBound="GridView1_RowDataBound">
//省略...
</asp:GridView>
3、最后在.aspx.cs页面中添加
protected void GridView1_RowDataBound(object sender,GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "if(this!=prevselitem){this.style.backgroundColor='#Efefef'}");//当鼠标停留时更改背景色
e.Row.Attributes.Add("onmouseout", "if(this!=prevselitem){this.style.backgroundColor='#ffffff'}");//当鼠标移开时还原背景色
e.Row.Attributes.Add("onclick", e.Row.ClientID.ToString() + ".checked=true;selectx(this)");
}
}
OK!
相关文章推荐
- javascript实现GridView模版列中CheckBox的值的选择性选择
- 使用javascript实现GridView无刷新选中行(变色)
- C#实现通过单击gridview中的选择其中的一行数据
- 使用javascript实现GridView无刷新选中行(变色)
- Javascript实现GridView,表头固定,表体有滚动条可滚动
- 笔记:不写一行代码,实现 DropDownList 和 GridView 联动
- 【转载】利用JavaScript实现GridView中表头CheckBox的全选功能
- JavaScript实现的选择排序算法实例分析
- GridView跨页选择多行数据,并循环添加一行DataSet数据
- 一款javascript实现的超炫的下拉选择框
- GridView绑定radiobutton以后实现唯一选择,互斥
- [分享]精心收集的3款JavaScript实现的日期时间选择控件
- JavaScript 弹出窗体点击按钮返回选择数据的实现
- GridView CheckBox 实现全选,跨页 CheckBox选择
- JavaScript实现城市选择控件的效果
- JavaScript 实现日历式日期选择
- 【Vegas原创】GridView跨页选择多行数据,并循环添加一行DataSet数据
- javascript实现通过拼音首字母快速选择下拉列表
- 用Javascript实现RadioButtonList的取消选择功能
- 用javascript实现文本框和"选择"按扭之间的间距