JS implements the code to create a hideable area in the Repeater control

As the scale of web applications continues to increase, there is more and more data. Sometimes, too much data is displayed on one page at the same time, resulting in an unsightly page, which makes users feel bored and difficult to operate. Therefore, this article will introduce the use of the hidden area of the repeater control to achieve better data display effects.

There are many ways to prevent excessive data loading, such as using data paging, or using the master/detail method, which displays the main content of each piece of data first, and for detailed data, users only need to click The detail link is enough. This article will introduce another way to display data. It adopts the folding and hiding method. When the user needs to see the detailed description of each record, there is no need to open another link window, but directly below the original data record, the originally hidden data is displayed. Data details. In this way, the user's operation is convenient. Let’s take a look at its actual effect first (http://aspnet.4guysfromrolla.com/demos/collapsibleRepeater.aspx). Next, let's see how to implement its effect in repeater.

To achieve the above effect, we must use client-side scripting technology to hide or display a certain area. After IE 4.x, this technology can be implemented. For example, the content within the

tag can be dynamically hidden when the user clicks, and the content within the

tag can also be displayed when the user moves the mouse to a specific area. The key point lies in its display and visibility CSS style properties. The following code shows how to use it. When the user clicks the HIDE CONTENT button, the originally displayed text will be hidden. When the user clicks show content, the original text will be displayed again.

Copy code The code is as follows:

This text will be displayed or hidden when clicking the appropriate button below...

　onclick="showHideContent(' someRegion', false);">

In the above javscript code, the display and visibility attributes of the HTML element are fully utilized, and it should be noted that these two attributes should be used at the same time. First, in the onclick event of the button button, the function showhidecontent written in the custom javascript is called. This function has two parameters, id and show. The id represents the name of the area to be displayed or hidden. For example, in this example, to display or hide The hidden area is the text within the

tag, and show is a Boolean value that determines whether to hide or show the area. In the showhidecontent function, the display and visibility attributes are controlled according to the value of show.

After understanding the principle of the above example, you can apply it in the repeater control. For example, if we want to create a FAQ that contains many questions that users want to ask, using the above method, we can first list the user's questions using the repeater control, and then when the user clicks on the question, it will be displayed and hidden. The answer is very convenient. The code snippet of Repeater is as follows:

Copy code

The code is as follows:

<%# DataBinder.Eval(Container.DataItem, "Description") %>

< ;br />

　Submitted By: <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %>

　< b>Views: <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %>

　FAQ :

　<%# DataBinder.Eval(Container.DataItem, "Answer") %>

We can see that the above code only describes a static repeater. Next, we need to make some modifications to the repeater's template column to meet the requirements.
First, we create two

tags for each record, one displays the FAQ question and the other displays the answer to the question, and each

tag is assigned a unique id. In each record, the id of the

mark that displays the question is recorded as h index (index is the id number of each item in the Repeater control, using itemindex), and the id of the

mark that displays the answer is recorded as dindex . The code is as follows:

Copy code The code is as follows:

 
 ; 
.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; } 
 
onclick= 'ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'> 
　<%# DataBinder.Eval(Container.DataItem, "Description") %> 
 
　Submitted By: <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %>
 
　Views: <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %>
 
　FAQ:
 
　<%# DataBinder.Eval(Container.DataItem, "Answer") %>

Let’s focus on the second half of the code, where

onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'> will wrap the question part of each record in something like

, In a tag such as

, when clicked, the toggledisplay function is called. Within this function, it is checked whether the incoming parameter is the area that needs to be displayed (note that through
var elem = document. getElementById('d' id);) to judge, if yes, set the display and visibility attributes to display, otherwise it will not be displayed.

Related labels：

repeater

source：php.cn

Previous article：JS object-oriented programming for Cookie_js object-oriented Next article：Js code to intelligently determine whether the browser is closed or refreshed_Typical special effects

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

JS implements the code to create a hideable area in the Repeater control_javascript skills

<%# DataBinder.Eval(Container.DataItem, "Description") %>