用jQuery实现ASP.NET GridView折叠伸展效果_webform girdview 可伸缩表格-优快云博客

本文介绍如何在ASP.NET中使用GridView控件进行数据展示，并通过添加样式类实现数据行样式的统一控制，同时提供JavaScript方法实现数据显示与隐藏的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：如何给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