用jQuery实现ASP.NET GridView折叠伸展效果

来源：互联网发布：rar解压缩软件下载编辑：程序博客网时间：2024/05/22 12:18

第一步：如何给GridView数据行加入class属性呢？我们可以用GridView的行样式（<RowStyle CssClass="test" />）来设置，代码如下：

    <asp:GridView ID="GridView1" runat="server">     <RowStyle CssClass="test" />     </asp:GridView>

此时我们运行页面，查看页面输出的源代码会看到GridView数据部分的所有TR都被赋予了一个class="test"属性！

第二步：绑定数据，代码如下：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace example{    public class Student    {        public Student()        {        }        string sID;        public string SID        {            get { return sID; }            set { sID = value; }        }        string sName;        public string SName        {            get { return sName; }            set { sName = value; }        }        string sSex;        public string SSex        {            get { return sSex; }            set { sSex = value; }        }    }    public partial class WebForm2 : System.Web.UI.Page    {        protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            {                List<Student> sList = new List<Student>()  {                   new Student(){ SID = "s001", SName="张三", SSex="男"},                   new Student(){ SID = "s002", SName="李四", SSex="女"},                   new Student(){ SID = "s003", SName="王五", SSex="男"}                  };                GridView1.DataSource = sList;                GridView1.DataBind();            }        }    }}

第三步：加入控制显示或隐藏GridView数据的按钮,代码如下：

    <input id="btn" type="button" value="隐藏"  onclick="ShowDate()" />

第四步：实现控制显示和隐藏的JS方法，代码如下：

<script type="text/javascript">        function ShowDate() {            var val = $("#btn").val();            var $rows = $("#GridView1").find(".test");            switch (val) {                case "隐藏":                    $rows.hide();                    $("#btn").val("显示");                    break;                case "显示":                    $rows.show();                    $("#btn").val("隐藏");                    break;            }        }     </script>

http://developer.51cto.com/art/201204/327472.htm