JS實現(xiàn)在Repeater控件中創(chuàng)建可隱藏區(qū)域的代碼

2019-11-21 00:14:28

字體：大中小

供稿：網(wǎng)友

由于web應(yīng)用的規(guī)模不斷增大，數(shù)據(jù)也越來越多了,有時候,由于在一個頁面同時顯示的數(shù)據(jù)太多，從而造成頁面的不美觀,用戶因此也會感到厭倦和操作困難。因此，本文將介紹利用repeater控件的隱藏區(qū)域，以達到較好的數(shù)據(jù)顯示效果。

　　防止數(shù)據(jù)過多加載有很多方法，比如采用數(shù)據(jù)分頁的方法,又或者采用master/detail的方式,就是先顯示每條數(shù)據(jù)的主要內(nèi)容，而對于詳細數(shù)據(jù),用戶只需要點detail的鏈接就可以了。本文將介紹另外一種方式來顯示數(shù)據(jù)，它采用折疊的隱藏方式，當用戶需要看每條記錄的詳細描述時，不需要另外打開鏈接窗口，而直接在原數(shù)據(jù)記錄的下方，呈現(xiàn)出原先隱藏的數(shù)據(jù)詳細資料。這樣一來，方便了用戶的操作。我們先來看下其實際效果(http://aspnet.4guysfromrolla.com/demos/collapsibleRepeater.aspx)。接下來，我們看如何在repeater中實現(xiàn)其效果。

　　要實現(xiàn)上面的效果，我們必須采用客戶端的腳本技術(shù)，從而實現(xiàn)隱藏或展示某個區(qū)域。而在IE 4.x后,是可以實現(xiàn)該技術(shù)的。比如,＜div＞標記內(nèi)的內(nèi)容，當用戶點擊時可以動態(tài)地隱藏起來，而＜p＞標記內(nèi)容的內(nèi)容，也可以當用戶移動鼠標到某特定區(qū)域時顯示出來。而其中的關(guān)鍵之處，在于其display和visibility的CSS風(fēng)格屬性。下面的代碼顯示了其使用方法，當用戶點擊HIDE CONTENT按鈕時，則會隱藏原本顯示的文本，當點擊show content時，又會顯示原先的文本了。

復(fù)制代碼代碼如下:

 
<script language="JavaScript"> 
function showHideContent(id, show) 
{ 
　var elem = document.getElementById(id); 
　if (elem) 
　{ 
　　if (show) 
　　{ 
　　　elem.style.display = 'block'; 
　　　elem.style.visibility = 'visible'; 
　　} 
　　else 
　　{ 
　　　elem.style.display = 'none'; 
　　　elem.style.visibility = 'hidden'; 
　　} 
　} 
} 
</script> 
<div id="someRegion"> 
　This text will be displayed or hidden when clicking the appropriate button below... 
</div> 
<input type="button" value = "Hide Content" 
　onclick="showHideContent('someRegion', false);"> 
<input type="button" value = "Show Content" onclick="showHideContent('someRegion', true);"> 

　　在上面的javscript代碼中，充分利用了HTML元素的display和visiblity屬性，而且要注意，這兩個屬性應(yīng)該同時使用。首先在button按鈕的onclick事件中，調(diào)用了自定義的javscript寫的函數(shù)showhidecontent,該函數(shù)有兩個參數(shù)，id和show,id表示要顯示或者隱藏的區(qū)域的名稱，比如該例子中，要顯示或隱藏的區(qū)域是<div>標記內(nèi)的文本，show為布爾值，決定是否隱藏或顯示該區(qū)域。而在showhidecontent函數(shù)中，則根據(jù)show的值,控制display和visiblity屬性。

　　明白了上面例子的道理后，下面就可以在repeater控件中應(yīng)用了。比如，我們要創(chuàng)建一個FAQ問答錄，其中有很多用戶要詢問的問題，則使用上面的方法，可以先將用戶的問題使用repeater控件羅列出來,之后當用戶點擊該問題時,則會顯示出隱藏的回答，十分方便。Repeater的代碼片段如下:

復(fù)制代碼代碼如下:

 
<asp:Repeater id="rptFAQs" runat="server"> 
<ItemTemplate> 
　<h2><%# DataBinder.Eval(Container.DataItem, "Description") %></h2><br /> 
　<b>Submitted By:</b> <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %><br /> 
　<b>Views:</b> <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %><br /> 
　<b>FAQ:</b><br /> 
　<%# DataBinder.Eval(Container.DataItem, "Answer") %> 
</ItemTemplate> 
</asp:Repeater> 

　　我們可以看到，上面的代碼只是描述了靜態(tài)的一個repeater。接下來，我們要在repeater的模版列上進行一下修改，以滿足要求。
首先，我們?yōu)槊恳粭l記錄都創(chuàng)建兩個<div>標記，一個顯示FAQ的問題，另一個則顯示問題的答案,而且要為每一個<div>標記賦值一個唯一的id,每條記錄中，顯示問題的<div>標記的id記作h index(index為Repeater控件中每一項的id號，利用itemindex),而顯示答案的<div>標記的id記作dindex。代碼如下:

復(fù)制代碼代碼如下:

 
<script language="JavaScript"> 
function ToggleDisplay(id) 
{ 
　var elem = document.getElementById('d' + id); 
　if (elem) 
　{ 
　　if (elem.style.display != 'block') 
　　{ 
　　　elem.style.display = 'block'; 
　　　elem.style.visibility = 'visible'; 
　　} 
　　else 
　　{ 
　　　elem.style.display = 'none'; 
　　　elem.style.visibility = 'hidden'; 
　　} 
　} 
} 
</script> 
<style> 
.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer; 
background-color:#cccccc; font-family: Verdana; } 
.details { display:none; visibility:hidden; background-color:#eeeeee; 
font-family: Verdana; } 
</style> 

　<asp:Repeater id="rptFAQs" runat="server"> 
　<ItemTemplate> 
　　<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header" 
onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'> 
　　　<%# DataBinder.Eval(Container.DataItem, "Description") %> 
　　</div> 

　　<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details"> 
　　　<b>Submitted By:</b> <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %><br /> 
　　　<b>Views:</b> <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %><br /> 
　　　<b>FAQ:</b><br /> 
　　　<%# DataBinder.Eval(Container.DataItem, "Answer") %> 
　　</div> 
　</ItemTemplate> 
</asp:Repeater> 

　　我們重點來看下后半部分的代碼，其中
<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'>會將每條記錄的問題部分，包裹在類似<div id=h1>,<div id=h2>之類的標記內(nèi)，當點擊時，則調(diào)用toggledisplay函數(shù)，在該函數(shù)內(nèi)，看傳入的參數(shù)是否是需要顯示的區(qū)域（注意，通過
var elem = document.getElementById('d' + id);）一句進行判斷，是的話則設(shè)置display和visiblity屬性顯示，否則不顯示。

上一篇：js下用eval生成JSON對象

下一篇：Bookmarklet實現(xiàn)啟動jQuery(模仿云輸入法)