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

最新推荐文章于 2022-08-06 18:12:36 发布

zzr494684778

最新推荐文章于 2022-08-06 18:12:36 发布

阅读量4k

点赞数

分类专栏： asp.net 文章标签： asp server table function object input

本文链接：https://blog.csdn.net/zzr494684778/article/details/6759009

版权

asp.net 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

        }