您的位置:首页 > 其它

操作gridview,选中行时改变背景色且checkbox被选中,隔行变色,全选变色

2011-09-08 09:57 483 查看
css:
<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";
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐