建站
咨詢
售后
建站咨詢
新聞中心
今天做靜態(tài)頁(yè)面時(shí)有一個(gè)需求，就是頁(yè)面上有一組兩個(gè)選項(xiàng)的單選按鈕和一個(gè)有6行的列表（該列表用Table標(biāo)簽實(shí)現(xiàn)，不是DIV），當(dāng)選擇單選按鈕的選項(xiàng)一時(shí)，列表的前三條信息顯示后三條信息隱藏，當(dāng)選擇單選按鈕的選項(xiàng)二時(shí)，列表的前三條信息隱藏后三條信息顯示。那么就牽扯出我們今天的話題拉，如何實(shí)現(xiàn)呢？實(shí)現(xiàn)后該實(shí)現(xiàn)還能應(yīng)用到哪些場(chǎng)景？
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供伊通網(wǎng)站建設(shè)、伊通做網(wǎng)站、伊通網(wǎng)站設(shè)計(jì)、伊通網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、伊通企業(yè)網(wǎng)站模板建站服務(wù)，十年伊通做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
1、***反應(yīng)的解決方案
碰到這個(gè)需求后，我***反應(yīng)就是很簡(jiǎn)單啊，分別用兩個(gè)DIV將前三個(gè)Table中的TR標(biāo)簽與后三個(gè)TR標(biāo)簽包起來，然后通過JS控制DIV的顯示。
***步：使用DIV包裹需要隱藏顯示的TR。代碼如下：
姓名： 年齡：
第二步：使用JS控制DIV的顯示，來達(dá)到控制隱藏或顯示行的效果：
- $("#divName").style.display = "none";
- $("#divSex").style.display = "block";
第三步：運(yùn)行程序，你會(huì)發(fā)現(xiàn)根本不管用，哈哈，有點(diǎn)被耍的感覺~！因?yàn)門R標(biāo)簽只能與TABLE標(biāo)簽搭配使用！好啦，雖然上面的代碼不管用！但是還算起到了一個(gè)引導(dǎo)的作用吧，失敗是成功的老娘嘛！
2、同事推薦的使用panel解決方案
這是在我描述了DIV與TR不能配合使用后，被同事笑話啦，哎、看來以后要多多學(xué)習(xí)學(xué)習(xí)HTML啦，笑話完我后，同事董寧告訴我用PANEL控件包住TR，用Visible屬性在服務(wù)器級(jí)別控制TR的輸出。
***步：使用PANEL控件包住用來顯示或隱藏的TR標(biāo)簽，代碼如下：
姓名： 年齡：
第二步：在服務(wù)器端使用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;
- }
- }
這種方法雖然沒有問題，但是感覺還是太無厘頭了吧？控制頁(yè)面展示的代碼也要讓服務(wù)器端去做嗎？太浪費(fèi)性能了！而且頁(yè)面控制的代碼與邏輯交互代碼放一起簡(jiǎn)直是混亂不堪啊，在否決掉這個(gè)辦法時(shí)，我們的大俠歪歪同志登場(chǎng)了，說道歪歪同志我不得不佩服啊，身為項(xiàng)目經(jīng)理的歪歪，寫代碼的功底竟然比程序員還猛，完全無需代碼提示，純手工敲擊鍵盤加清晰思路***解決該問題！
3、同事“歪歪”大俠的無厘頭解決方案
那么，我們來看看歪歪的思路，首先給每個(gè)TR標(biāo)簽賦予一個(gè)class樣式，但是這個(gè)樣式是沒有實(shí)現(xiàn)的，僅僅做獲取該TR的標(biāo)識(shí)。
***步：給TR標(biāo)簽添加一個(gè)沒有實(shí)現(xiàn)的class樣式。代碼如下：
姓名： 年齡：
第二步：使用Jquery根據(jù)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;
- }
第三步：運(yùn)行，完全沒有問題，此問題解決！
4、根據(jù)歪歪大俠的實(shí)現(xiàn)聯(lián)想的應(yīng)用場(chǎng)景
我們現(xiàn)在可以控制TABLE中TR的顯示與隱藏后，我們可以想到ASP.NET GridView控件在綁定數(shù)據(jù)后輸出到瀏覽器后的數(shù)據(jù)部分，也是用TR的形式來顯示的，那么我們可不可以控制GridView內(nèi)容的顯示與隱藏呢？當(dāng)然沒問題了。
***步：如何給GridView數(shù)據(jù)行加入class屬性呢？我們可以用GridView的行樣式（
此時(shí)我們運(yùn)行頁(yè)面，查看頁(yè)面輸出的源代碼會(huì)看到GridView數(shù)據(jù)部分的所有TR都被賦予了一個(gè)class="test"屬性！
第二步：綁定數(shù)據(jù)，代碼如下：
- if (!IsPostBack)
- {
- List
sList = new List () - {
- new Student(){ SID = "s001", SName="張三", SSex="男"},
- new Student(){ SID = "s002", SName="李四", SSex="女"},
- new Student(){ SID = "s003", SName="王五", SSex="男"}
- };
- GridView1.DataSource = sList;
- GridView1.DataBind();
- }
- }
第三步：加入控制顯示或隱藏GridView數(shù)據(jù)的按鈕,代碼如下：
第四步：實(shí)現(xiàn)控制顯示和隱藏的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;
- }
- }
呵呵，實(shí)現(xiàn)這個(gè)功能的原因、人物、靈感、整個(gè)前因后果就介紹完啦，編程嘛不僅是要實(shí)現(xiàn)功能，更要融于生活。
網(wǎng)站名稱：用jQuery實(shí)現(xiàn)ASP.NETGridView折疊伸展效果
URL網(wǎng)址：http://www.dlmjj.cn/article/dpccssc.html
