使用jQuery實現ASP.NETGridView摺疊伸展效果

        今天做靜態頁面時有一個需求，就是頁面上有一組兩個選項的選項按鈕和一個有6行的列表（該列表用Table標籤實現，不是DIV），當選擇選項按鈕的選項一時，列表的前三條資訊顯示後三條資訊隱藏，當選擇選項按鈕的選項二時，列表的前三條資訊隱藏後三條資訊顯示。那麼就牽扯出我們今天的話題拉，如何?呢？實現後該實現還能應用到哪些情境？

         1、第一反應的解決方案

              碰到這個需求後，我第一反應就是很簡單啊，分別用兩個DIV將前三個Table中的TR標籤與後三個TR標籤包起來，然後通過JS控制DIV的顯示。

              第一步：使用DIV包裹需要隱藏顯示的TR。代碼如下：

<table>
<div id="divName"><tr>
<td>姓名：</td>
<td><input id="txtname" type="text" /></td>
</tr>
</div> <div id="divSex"><tr>
<td>年齡：</td>
<td><input id="txtsex" type="text" /></td>
</tr> </div>
</table>

             第二步：使用JS控制DIV的顯示，來達到控制隱藏或顯示行的效果：

$("#divName").style.display = "none";
$("#divSex").style.display = "block";

             第三步：運行程式，你會發現根本不管用，哈哈，有點被耍的感覺~！因為TR標籤只能與TABLE標籤搭配使用！好啦，雖然上面的代碼不管用！但是還算起到了一個引導的作用吧，失敗是成功的老娘嘛！

          2、同事推薦的使用panel解決方案

          這是在我描述了DIV與TR不能配合使用後，被同事笑話啦，哎、看來以後要多多學習學習HTML啦，笑話完我後，同事董寧告訴我用PANEL控制項包住TR，用Visible屬性在伺服器層級控制TR的輸出。

              第一步：使用PANEL控制項包住用來顯示或隱藏的TR標籤，代碼如下：

<table>
<asp:Panel ID="plName" runat="server"><tr>
<td>姓名：</td>
<td><input id="txtname" type="text" /></td>
</tr> </asp:Panel>
<asp:Panel ID="plSex" runat="server" ><tr>
<td>年齡：</td>
<td><input id="txtsex" type="text" /></asp:Panel></td>
</tr> </asp:Panel>
</table>

               第二步：在伺服器端使用Panel控制項的Visible屬性控制行的輸出，代碼如下：

    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        string val = RadioButtonList1.SelectedValue;
        switch (val)
        {
            case "Name":
                plName.Visible = true;
                plSex.Visible = false;
                break;
            case "Sex":
                plName.Visible = false;
                plSex.Visible = true;
                break;
            default:
                plName.Visible = true;
                plSex.Visible = true;
                break;
        }
    }  

          這種方法雖然沒有問題，但是感覺還是太無厘頭了吧？控制頁面展示的代碼也要讓伺服器端去做嗎？太浪費效能了！而且頁面控制的代碼與邏輯互動代碼放一起簡直是混亂不堪啊，在否決掉這個辦法時，我們的大俠歪歪同志登場了，說道歪歪同志我不得不佩服啊，身為專案經理的歪歪，寫代碼的功底竟然比程式員還猛，完全無需代碼提示，純手工敲擊鍵盤加清晰思路完美解決該問題！

          3、同事“歪歪”大俠的無厘頭解決方案

           那麼，我們來看看歪歪的思路，首先給每個TR標籤賦予一個class樣式，但是這個樣式是沒有實現的，僅僅做擷取該TR的標識。

           第一步：給TR標籤添加一個沒有實現的class樣式。代碼如下：

<table id="MyList">
<tr class="NameCSS">
<td>姓名：</td>
<td><input id="txtname" type="text" /></td>
</tr>
<tr class="SexCss">
<td>年齡：</td>
<td><input id="txtsex" type="text" /></td>
</tr>
</table>

           第二步：使用Jquery根據class擷取TR元素，並且控制其隱藏或顯示，代碼如下：

            var $rowsName = $("#MyList").find(".NameCSS");
            var $rowsSex = $("#MyList").find(".SexCss");
            switch (selectedValue) 
            {
               case "Name":
                $rowsSex.hide();
                $rowsName.show();
                break;
               case "Sex":
                $rowsSex.show();
                $rowsName.hide();
                break;
            }

             第三步：運行，完全沒有問題，此問題解決！

         4、根據歪歪大俠的實現聯想的應用情境

             我們現在可以控制TABLE中TR的顯示與隱藏後，我們可以想到ASP.NET GridView控制項在綁定資料後輸出到瀏覽器後的資料部分，也是用TR的形式來顯示的，那麼我們可不可以控制GridView內容的顯示與隱藏呢？當然沒問題了。

            第一步：如何給GridView資料行加入class屬性呢？我們可以用GridView的行樣式（<RowStyle CssClass="test" />）來設定，代碼如下：

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

            此時我們運行頁面，查看頁面輸出的原始碼會看到GridView資料部分的所有TR都被賦予了一個class="test"屬性！

            第二步：綁定資料，代碼如下：

       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方法，代碼如下：

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

          呵呵，實現這個功能的原因、人物、靈感、整個前因後果就介紹完啦，編程嘛不僅是要實現功能，更要融於生活。

          點擊推薦、也是一種體驗生活噢~！