Jquery实现GridView隔行变色，鼠标经过变色，单击或者选中变色

zoukankan html css js c++ java

Jquery实现GridView隔行变色，鼠标经过变色，单击或者选中变色

在Jquery实现GridView实现全选的功能基础上(Jquery实现Gridview全选功能 )，再做扩展，实现GridView隔行变色，鼠标经过变色，单击事件或者checkbox选中时变色功能

HTML代码：

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <style type="text/css">
    tr.odd {
      background-color: #fff;
    }
    tr.even {
      background-color: #EFF3FB;
    }
    tr.over {
      background: #bcd4ec; /*这个将是鼠标高亮行的背景色*/
      cursor: pointer;
    }
    tr.select {
      background-color: #9461BF;/*这个将是选中高亮行的背景色*/
      cursor: pointer;
    }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"
      AutoGenerateColumns="False" OnPreRender="GridView1_PreRender">
      <Columns>
        <asp:TemplateField>
          <HeaderTemplate>
            <input id="chkAll" type="checkbox" /></HeaderTemplate>
          <ItemTemplate>
            <input id="chkItem" value='<%# Eval("id") %>' runat="server" type="checkbox" />
          </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True"
          SortExpression="id" HeaderStyle-Width="30px" ItemStyle-Width="30px">
          <HeaderStyle Width="30px"></HeaderStyle>
          <ItemStyle Width="30px"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="productid" HeaderText="productid" SortExpression="productid"
          HeaderStyle-Width="120px" ItemStyle-Width="120px">
          <HeaderStyle Width="120px"></HeaderStyle>
          <ItemStyle Width="120px"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="productname" HeaderText="productname" SortExpression="productname"
          HeaderStyle-Width="100px" ItemStyle-Width="100px">
          <HeaderStyle Width="100px"></HeaderStyle>
          <ItemStyle Width="100px"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="categoryid" HeaderText="categoryid" SortExpression="categoryid"
          HeaderStyle-Width="120px" ItemStyle-Width="120px">
          <HeaderStyle Width="120px"></HeaderStyle>
          <ItemStyle Width="120px"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="createtime" HeaderText="createtime" SortExpression="createtime"
          HeaderStyle-Width="150px" ItemStyle-Width="150px">
          <HeaderStyle Width="150px"></HeaderStyle>
          <ItemStyle Width="150px"></ItemStyle>
        </asp:BoundField>
      </Columns>
      <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    </asp:GridView>
  </div>
  <input id="btnClient" type="button" value="客服端获取选择记录" />
  <br />
  <asp:Button ID="btnServer" runat="server" Text="服务端获取选择记录" OnClick="btnServer_Click" />
  <br />
  <asp:TextBox ID="txtResult" runat="server" Height="110px" TextMode="MultiLine" Width="548px"></asp:TextBox>
  </form>

  <script language="javascript" type="text/javascript">
    $(function() {
      //奇数行显示颜色
      $('#<%=GridView1.ClientID %> >tbody >tr:odd').addClass("odd");
      //偶数行显示颜色
      $('#<%=GridView1.ClientID %> >tbody >tr:even').addClass("even");
      //鼠标单击行事件，同时联动CHECKBOX
      $('#<%=GridView1.ClientID %> >tbody >tr').click(function() {
        var isSelect = $(this).hasClass("select");
        $(this)[isSelect ? "removeClass" : "addClass"]("select")
                .find(":checkbox").attr('checked', !isSelect);
      })
      .mouseover(function() { $(this).addClass("over"); })
      .mouseout(function() { $(this).removeClass("over"); });

      //全选按钮选择，如果全选按钮为选择状态，遍历GRIDVIEW下面的第一列的CHECKBOX,设置选择状态
      $("#chkAll").click(function() {
        $('#<%=GridView1.ClientID %> >tbody >tr >td >input:checkbox').attr('checked', this.checked);
        //全选按钮联动行选中颜色
        $("#<%=GridView1.ClientID %> >tbody>tr")[!this.checked ? "removeClass" : "addClass"]("select");
      });

      //遍历GRIDVIEW下面的第一列的CHECKBOX的选择状态如果选中状态和CHECKBOX个数相同则全选为选中状态，否则都为不选中状态
      $('#<%=GridView1.ClientID %> >tbody >tr >td >input:checkbox').click(function() {
        var expr1 = '#<%=GridView1.ClientID %> >tbody >tr >td >input:checkbox:checked';
        var expr2 = '#<%=GridView1.ClientID %> >tbody >tr >td >input:checkbox';
        var selectAll = $(expr1).length == $(expr2).length;
        $('#chkAll').attr('checked', selectAll);
      });

      //查找数据列表里面所有选中的记录
      $("#btnClient").click(function() {
        var chkList = $("input:checkbox:checked[name$=chkItem]"); //Jquery模糊匹配 [att$=value]结尾是这个值
        var arrayList = new Array();
        for (var i = 0; i < chkList.length; i++) {
          arrayList.push(chkList[i].value);
        }
        if (arrayList.length > 0) {
          var ids = arrayList.join(",");
          alert(ids);
        } else {
          alert("请选择记录！");
        }
      });
    });

  </script>

</body>
</html>

CS代码：

代码

    public partial class JqueryGridView : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                this.GridView1.DataSource = GetProducts();
                this.GridView1.DataBind();
            }
        }
        private ProductCollection GetProducts()
        {
            ProductCollection _pc = new ProductCollection();
            for (int i = 1; i < 15; i++)
            {
                _pc.Add(
                    new Product { id = i.ToString(), categoryid = i.ToString(), createtime = System.DateTime.Now.ToString(),
                    productid = i.ToString(), productname = i.ToString() }
                    );
            }
            return _pc;

        }
        protected void GridView1_PreRender(object sender, EventArgs e)
        {
            this.GridView1.UseAccessibleHeader = true;
            this.GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
            this.GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
        }

        protected void btnServer_Click(object sender, EventArgs e) {
            this.txtResult.Text = string.Empty;
            if (GridView1.Rows.Count > 0) {
                foreach (GridViewRow row in GridView1.Rows) {
                    HtmlInputCheckBox _chkItem = (HtmlInputCheckBox)row.FindControl("chkItem");
                    if (_chkItem != null&&_chkItem.Checked) {
                        this.txtResult.Text +=_chkItem.Value+",";
                    }
                }
                if (this.txtResult.Text.Length > 0) {
                    this.txtResult.Text = this.txtResult.Text.Substring(0, this.txtResult.Text.Length - 1);
                }
            }
        }
    }
    public class ProductCollection : ICollection<Product>
    {
        List<Product> _Products;
        public ProductCollection()
        {
            _Products = new List<Product>();
        }
        #region ICollection<Product> Members

        public void Add(Product item)
        {
            _Products.Add(item);
        }

        public void Clear()
        {
            _Products.Clear();
        }

        public bool Contains(Product item)
        {
            return _Products.Contains(item);
        }

        public void CopyTo(Product[] array, int arrayIndex)
        {
            throw new NotImplementedException();
        }

        public int Count
        {
            get { return _Products.Count; }
        }

        public bool IsReadOnly
        {
            get { return true; }
        }

        public bool Remove(Product item)
        {
            return _Products.Remove(item);
        }

        #endregion

        #region IEnumerable<Product> Members

        public IEnumerator<Product> GetEnumerator()
        {
            return _Products.GetEnumerator();
        }

        #endregion

        #region IEnumerable Members

        System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
        {
            return _Products.GetEnumerator();
        }

        #endregion
    }
    public class Product
    {
        public string id
        {
            get;
            set;
        }
        public string productid
        {
            get;
            set;
        }
        public string productname
        {
            get;
            set;
        }
        public string categoryid
        {
            get;
            set;
        }
        public string createtime
        {
            get;
            set;
        }
    }

查看全文

相关阅读:
xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
C 语言编程 — 使用 assert 断言进行程序设计
 C 语言编程 — uint8_t / uint16_t / uint32_t /uint64_t
五月数据库技术通讯丨Oracle 12c因新特性引发异常Library Cache Lock等待
 4场直播丨站撸Oracle、MySQL、医疗、航空
 asyncio
python 多线程多进程
 一文详解被阿里腾讯视作核心机密的大数据平台架构

原文地址：https://www.cnblogs.com/nosnowwolf/p/1893326.html