<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"; } }