در این مقاله قصد داریم با استفاده از جی کوئری به صورت داینامیک یک ستون از گرید را با زدن چک باکس در لحظه اجرا نمایش ویا مخفی کنیم

برای شروع پس از ایجاد یک پروزه از نوع Asp.Net در صفحه design یک چک باس و یک گرید ویو که شامل دوستون از جنس  BoundField  و یک ستون از جنس    TemplateField ایجاد میکنیم

    <form id="form1" runat="server">
    <asp:CheckBox ID="chkCountry" Text="نمایش و مخفی کردن کشور" runat="server" Checked="true" />
    <hr />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
    <asp:BoundField DataField="Id" HeaderText="ردیف" ItemStyle-Width="30" />
            <asp:BoundField DataField="Name" HeaderText="نام" ItemStyle-Width="150" />
            <asp:TemplateField HeaderText="کشور" ItemStyle-Width="150">
                <ItemTemplate>
                    <asp:Label Text='<%# Eval("Country") %>' runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

حال برای پر کردن گرید از DataTable استفاده میکنیم برای استفاده از Data Table باید فضای نام زیر به پروژه اضافه شده باشد

using System.Data;

در متد load صفحه کد های زیر را برای پرکردن گرید مینویسیم

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
            dt.Rows.Add(1, "ایمان   ","مدائنی");
            dt.Rows.Add(2, "علی ", "تمیمی");
            dt.Rows.Add(3, "سجاد ", "باقر زاده ");
            dt.Rows.Add(4, "بردیا", "اجاقی");
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

حال در این قسمت یه سراغ موضوع اصلی آموزش یعنی نمایش و مخفی کردن یک ستون با زدن یک چک باکس بررسی کنیم

در سند جی کوئری ایدی چک باکس را  را گرفته و رویداد کلیک آن را فرا خوانی کردیم در این قسمت بررسی کردیم وقتی کاربر چک باکس را چک کرد ستون کشور به نمایش در بییاید که در حالت عادی این اتقاق می اقتد و در  وقتی کاربر تیک چک باکس را بر داشت ستون کشور در گرید ویو مخفی شود

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=chkCountry]").click(function () {
            var isChecked = $(this).is(":checked");
            var th = $("[id*=GridView1] th:contains('Country')");
            th.css("display", isChecked ? "" : "none");
            $("[id*=GridView1] tr").each(function () {
                $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
            });
        });
    });

حال از برنامه اجرا بگیرید درحالت عادی تیک چکس باکس زده شده است پس ستون کشور نیز در حالت نمایش است

حال تیک چکس باکس را بر داریم همان طور که مشاهده میکنید ستون کشور مخفی شده است