在Repeater控制項中建立可隱藏地區

來源:互聯網
上載者:User
建立|控制項 在WEB應用中,如何才能使應用高效率呢?如何才能吸引使用者呢?這的確是個大學問,頁面的內容,色搭配等都十分重要。但不可忽視的是,多數情況下,對於資料的呈現方式也是十分重要的。由於web應用的規模不斷增大,資料也越來越多了,有時候,由於在一個頁面同時顯示的資料太多,從而造成頁面的不美觀,使用者因此也會感到厭倦和操作困難。因此,本文將介紹利用repeater控制項的隱藏地區,以達到較好的資料顯示效果。

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

  要實現上面的效果,我們必須採用用戶端的指令碼技術,從而實現隱藏或展示某個地區。而在IE 4.x後,是可以實現該技術的。比如,<div>標記內的內容,當使用者點擊時可以動態地隱藏起來,而<p>標記內容的內容,也可以當使用者移動滑鼠到某特定地區時顯示出來。而其中的關鍵之處,在於其display和visibility的CSS風格屬性。下面的代碼顯示了其使用方法,當使用者點擊HIDE CONTENT按鈕時,則會隱藏原本顯示的文本,當點擊show content時,又會顯示原先的文本了。

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

  明白了上面例子的道理後,下面就可以在repeater控制項中應用了。比如,我們要建立一個FAQ問答錄,其中有很多使用者要詢問的問題,則使用上面的方法,可以先將使用者的問題使用repeater控制項羅列出來,之後當使用者點擊該問題時,則會顯示出隱藏的回答,十分方便。Repeater的程式碼片段如下:

<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>
  我們可以看到,上面的代碼只是描述了靜態一個repeater。接下來,我們要在repeater的模版列上進行一下修改,以滿足要求。
首先,我們為每一條記錄都建立兩個<div>標記,一個顯示FAQ的問題,另一個則顯示問題的答案,而且要為每一個<div>標記賦值一個唯一的id,每條記錄中,顯示問題的<div>標記的id記作h index(index為Repeater控制項中每一項的id號,利用itemindex),而顯示答案的<div>標記的id記作dindex。代碼如下:

<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>之類的標記內,當點擊時,則調用toggledisplay函數,在該函數內,看傳入的參數是否是需要顯示的地區(注意,通過
var elem = document.getElementById('d' + id);)一句進行判斷,是的話則設定display和visiblity屬性顯示,否則不顯示。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。