如何用jQuery實(shí)現(xiàn)ASP.NET GridView折疊伸展效果
今天做靜態(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)景?
1、第一反應(yīng)的解決方案
碰到這個(gè)需求后,我第一反應(yīng)就是很簡(jiǎn)單啊,分別用兩個(gè)DIV將前三個(gè)Table中的TR標(biāo)簽與后三個(gè)TR標(biāo)簽包起來(lái),然后通過(guò)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的顯示,來(lái)達(dá)到控制隱藏或顯示行的效果:
$("#divName").style.display = "none";? $("#divSex").style.display = "block";
第三步:運(yùn)行程序,你會(huì)發(fā)現(xiàn)根本不管用,哈哈,有點(diǎn)被耍的感覺(jué)~!因?yàn)門(mén)R標(biāo)簽只能與TABLE標(biāo)簽搭配使用!好啦,雖然上面的代碼不管用!但是還算起到了一個(gè)引導(dǎo)的作用吧,失敗是成功的老娘嘛!
2、推薦的使用panel解決方案
這是在我描述了DIV與TR不能配合使用后,被同事笑話啦,哎、看來(lái)以后要多多學(xué)習(xí)學(xué)習(xí)HTML啦,笑話完我后,同事董寧告訴我用PANEL控件包住TR,用Visible屬性在服務(wù)器級(jí)別控制TR的輸出。
第一步:使用PANEL控件包住用來(lái)顯示或隱藏的TR標(biāo)簽,代碼如下:
<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>
第二步:在服務(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; } }
這種方法雖然沒(méi)有問(wèn)題,但是感覺(jué)還是太無(wú)厘頭了吧?控制頁(yè)面展示的代碼也要讓服務(wù)器端去做嗎?太浪費(fèi)性能了!而且頁(yè)面控制的代碼與邏輯交互代碼放一起簡(jiǎn)直是混亂不堪啊,在否決掉這個(gè)辦法時(shí),我們的大俠歪歪同志登場(chǎng)了,說(shuō)道歪歪同志我不得不佩服啊,身為項(xiàng)目經(jīng)理的歪歪,寫(xiě)代碼的功底竟然比程序員還猛,完全無(wú)需代碼提示,純手工敲擊鍵盤(pán)加清晰思路完美解決該問(wèn)題!
3、無(wú)厘頭解決方案
那么,我們來(lái)看這個(gè)思路,首先給每個(gè)TR標(biāo)簽賦予一個(gè)class樣式,但是這個(gè)樣式是沒(méi)有實(shí)現(xiàn)的,僅僅做獲取該TR的標(biāo)識(shí)。
第一步:給TR標(biāo)簽添加一個(gè)沒(méi)有實(shí)現(xiàn)的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根據(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)行,完全沒(méi)有問(wèn)題,此問(wèn)題解決!
4、根據(jù)第三個(gè)方案的實(shí)現(xiàn)聯(lián)想的應(yīng)用場(chǎng)景
我們現(xiàn)在可以控制TABLE中TR的顯示與隱藏后,我們可以想到ASP.NET GridView控件在綁定數(shù)據(jù)后輸出到瀏覽器后的數(shù)據(jù)部分,也是用TR的形式來(lái)顯示的,那么我們可不可以控制GridView內(nèi)容的顯示與隱藏呢?當(dāng)然沒(méi)問(wèn)題了。
第一步:如何給GridView數(shù)據(jù)行加入class屬性呢?我們可以用GridView的行樣式(<RowStyle CssClass="test" />)來(lái)設(shè)置,代碼如下:
<asp:GridView ID="GridView1" runat="server"> <RowStyle CssClass="test" /> </asp:GridView>
此時(shí)我們運(yùn)行頁(yè)面,查看頁(yè)面輸出的源代碼會(huì)看到GridView數(shù)據(jù)部分的所有TR都被賦予了一個(gè)class="test"屬性!
第二步:綁定數(shù)據(jù),代碼如下:
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數(shù)據(jù)的按鈕,代碼如下:
<input id="btn" type="button" value="隱藏" onclick="ShowDate()" />
第四步:實(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)功能,更要融于生活。
以上四個(gè)方法都是緊密相連,互相有聯(lián)系的,希望大家細(xì)細(xì)品味,仔細(xì)琢磨,真正成為自己的東西,運(yùn)用到學(xué)習(xí)中。
- 基于jQuery實(shí)現(xiàn)下拉收縮(展開(kāi)與折疊)特效
- jquery實(shí)現(xiàn)點(diǎn)擊查看更多內(nèi)容控制段落文字展開(kāi)折疊效果
- 基于JQuery的簡(jiǎn)單實(shí)現(xiàn)折疊菜單代碼
- jQuery實(shí)現(xiàn)的簡(jiǎn)單折疊菜單(折疊面板)效果代碼
- jQuery實(shí)現(xiàn)表格展開(kāi)與折疊的方法
- jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
- jquery實(shí)現(xiàn)點(diǎn)擊TreeView文本父節(jié)點(diǎn)展開(kāi)/折疊子節(jié)點(diǎn)
- jQuery實(shí)現(xiàn)伸展與合攏panel的方法
- jQuery+CSS實(shí)現(xiàn)菜單滑動(dòng)伸展收縮(仿淘寶)
相關(guān)文章
js實(shí)現(xiàn)仿京東2級(jí)菜單效果(帶延時(shí)功能)
這篇文章主要介紹了js實(shí)現(xiàn)仿京東2級(jí)菜單效果,涉及jquery鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性及延時(shí)顯示的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08前端開(kāi)發(fā)必知的15個(gè)jQuery小技巧
本文主要介紹了前端開(kāi)發(fā)必知的15個(gè)jQuery小技巧。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-05-05jq源碼解析之綁在$,jQuery上面的方法(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jq源碼解析之綁在$,jQuery上面的方法(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10jquery attr 設(shè)定src中含有&(宏)符號(hào)問(wèn)題的解決方法
今天在用 jquery 的attr 方法設(shè)定 iframe的src屬性的時(shí)候遇到了一個(gè)奇怪的為題,現(xiàn)在把問(wèn)題及解決方面寫(xiě)出來(lái),讓遇到同樣問(wèn)題的人不要在走彎路。2011-07-07