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

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

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


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

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

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

最新評論