操作gridview,选中行时改变背景色且checkbox被选中,隔行变色,全选变色
2011-09-08 09:57
483 查看
css:
js:
后台:
<style type="text/css"> .checked { background: #c0c0ff; } .odd { background: #72FE95; } .even { background: #B8E2EF; } .current { background: #FFDD75; } </style>aspx页面
<asp:GridView ID="gvShow" runat="server" AutoGenerateColumns="False" HeaderStyle-BackColor="#93BEE2" BorderColor="#93BEE2" Width="364px" OnRowDataBound="gvShow_RowDataBound"> <Columns> <asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID="CheckAll" runat="server" Text="全选" ToolTip="按一次全選,再按一次取消全選"/> </HeaderTemplate> <HeaderStyle Width="50px"/> <ItemTemplate> <asp:CheckBox runat="server" ID="ckbChose"/> </ItemTemplate> <ItemStyle Width="30px" CssClass="txt"/> </asp:TemplateField> <asp:TemplateField HeaderText="部门"> <ItemTemplate> <asp:Label runat="server" ID="lblDep" Text='<%# Eval("PE_DEPA")%>'></asp:Label> </ItemTemplate> <ItemStyle Width="100px" CssClass="txt" /> </asp:TemplateField> <asp:TemplateField HeaderText="人员工号"> <ItemTemplate> <asp:Label runat="server" ID="lblCode" Text='<%# Eval("PE_ID") %>'></asp:Label> </ItemTemplate> <ItemStyle Width="120px" CssClass="txt"/> </asp:TemplateField> <asp:TemplateField HeaderText="人员名称"> <ItemTemplate> <asp:Label runat="server" ID="lblName" Text='<%# Eval("PE_NAME") %>' Width="100px"></asp:Label> </ItemTemplate> <ItemStyle CssClass="txt"/> </asp:TemplateField> </Columns> <EmptyDataTemplate> <table align="center" cellpadding="0" cellspacing="1" width="364px" > <tr style="background-color:#93BEE2"> <td style= "height:25px; width:30px;" ><b>选择</b></td> <td style=" height:25px;"><b>部门</b></td> <td style=" height:25px; width:120px;" ><b>人员工号</b></td> <td style=" height:25px;" ><b>人员名称</b></td> </tr> <tr> <td colspan ="7" align ="center" style=" height:25px;" ><asp:Label runat="server" ID="lblEmptyData" ForeColor="red" Text="暂且没有记录信息!" ></asp:Label></td> </tr> </table> </EmptyDataTemplate> <HeaderStyle BackColor="#93BEE2"></HeaderStyle> </asp:GridView>
js:
<script type="text/javascript"> var table = "<%=gvShow.ClientID %>"; var oldBg; function SelectAll(ele) { t = document.getElementById(table); for (i = 1; i < t.rows.length; i++) { t.rows[i].cells[0].children[0].checked = ele.checked; if (t.rows[i].cells[0].children[0].checked) { t.rows[i].className = "checked"; } else { t.rows[i].className = t.rows[i].getAttribute("oldClass"); } } } function CheckTr(tr, evt) { ele = evt.target || event.srcElement; if (ele.tagName && ele.tagName != "INPUT") tr.cells[0].children[0].checked = !tr.cells[0].children[0].checked; if (tr.cells[0].children[0].checked) { oldBg = tr.className = "checked"; } else { oldBg = tr.className = tr.getAttribute("oldClass"); } } </script>
后台:
//鼠标移动事件加单击事件 protected void gvShow_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { CheckBox h = e.Row.FindControl("CheckAll") as CheckBox; h.Attributes.Add("onclick", "SelectAll(this)"); } else if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onclick", "CheckTr(this,event)"); //e.Row.Attributes.Add("class", e.Row.RowIndex % 2 == 0 ? "odd" : "even"); //e.Row.Attributes.Add("oldClass", e.Row.RowIndex % 2 == 0 ? "odd" : "even"); e.Row.Attributes.Add("onmouseover", "oldBg=this.className;this.className='current'"); e.Row.Attributes.Add("onmouseout", "this.className=oldBg;"); e.Row.Attributes["style"] = "Cursor:hand"; } }
相关文章推荐
- jsp制作复合表头并循环产生表格内容,控制隔行变色、鼠标经过改变背景色等操作
- jQuery操作Gridview全选,点击checkbox变色,隔行变色,鼠标悬停变色!
- GridView单机行变色并且第一列的checkbox选中
- 全选,取消全选gridview中的checkbox, 点击某一项的checkbox时,自动识别是否应该将checkAll设为选中还是非选中
- 改变gridview选中项背景色
- GridView控件与CheckBox结合,实现全选功能,同时实现删除选中的多行数据 .
- 在GridView中加入CheckBox实现全选以及提交CheckBox选中的相关内容
- GridView中点击CheckBox选中一行来改变此行的颜色
- DeveXpress ASPxGridView实现checkbox全选反选(自带的ShowSelectCheckBOx)并获取选中checkbox对应的值集合
- GridView控件(七)——改变通过CheckBox选中的行的样式
- GridView控件与CheckBox结合,实现全选功能,同时实现删除选中的多行数据
- [原创]扩展GridView实现多选(全选)、点击行任意位置选择行、选中变色、添加双击事件等
- javascript表格操作大全:表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。(IE、火狐都兼容)
- javascript表格操作大全:表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。(IE、火狐都兼容)
- GridView选中改变背景色
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
- Bootstrap table 点击行改变背景色,点击列选中或者取消选中checkbox,根据某个属性隐藏显示某个字段
- 鼠标移到隔行变色的表格上,有背景变化,并且点击的时候选中复选框和背景色
- 扩展GridView实现多选(全选)、点击行任意位置选择行、选中变色、添加双击事件等