Jquery repeater imitates Google to expand Page Preview sub-View

If you have any questions, read the Repeater for 30 minutes.

Sample Code download: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar

This article describes in detail how to use the subview in the Repeater control. The directory is as follows:

* Preparation
* Define a subview sample
* Switch the subview status
* Define the sub-view container

Example image:

Preparation

Refer to preparation in http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.

Define a subview sample
The repeater displayed in the repeater is called a subview. Each subview is a copy of the subview sample and displays different data based on the conditions. The subview sample definition is not special. For example:Copy codeThe Code is as follows: <je: Repeater ID = "<sub-view ID>" runat = "server"
FilterField = "<subview search field>">
</Je: Repeater>
<Je: Repeater ID = "pictureRepeater" runat = "server"
FilterField = "['url']"
FillAsync-Url = "webservice. asmx"
FillAsync-MethodName = "GetGooglePicture">
<ItemTemplate>
<Div>
<Span class = "url" >#{ url} </span>
<Br/>
<Br/>
# {Picture}
</Div>
</ItemTemplate>
</Je: Repeater>

In most cases, you need to define the FilterField attribute for the subview sample, that is, the fields or conditions used to search the subview data. In the code above, url is added as a condition, the code for the data returned in the background can be written as follows:Copy codeThe Code is as follows: [WebMethod]
Public SortedDictionary <string, object> GetGooglePicture (string url)
{
// Return JSON
}

Because only one row of data is returned, you do not need to add the pageindex and pagesize parameters.

For details about how to return JSON, see use ASP. NET or WebService to return JSON. All the code in this example is written under. NET 4.0.
Switch the subview status
To control subview switching, closing, and opening in Repeater, you can use three functions: shiftview, collapseview, and expandview. For example:Copy codeThe Code is as follows: // je-<javascript event name> = "shiftview, '<subview ID>' [, <subview search field value n>]"
<Div id = "list">
<Je: Repeater ID = "googleRepeater" runat = "server"
Selector = "'# list'" PageSize = "2" IsVariable = "true"
FillAsync-Url = "webservice. asmx"
FillAsync-MethodName = "SearchGoogle">
<ItemTemplate>
<Div class = "picture">
<Div
Je-button = "label = 'more ';"
Je-onclick = "shiftview, 'picturerepeater ',' # {url} '">
</Div>
<Div je-id = "pictureRepeater" style = "display: none;">
</Div>
</Div>
</ItemTemplate>
</Je: Repeater>
</Div>

Take shiftview as an example. The first parameter is the ID of the sub-view, and the subsequent parameter is the condition used to search the sub-View data. In this example, the field url is used as the parameter, corresponds to the url in the FilterField attribute of the subview sample. if you have more conditions, add them again. The order must be the same as that in the subview sample FilterField attribute.
The expandview method is similar to the shiftview method. Different expandview methods open subviews, while shiftview switches the opening status of subviews.
The collapseview method disables the subview without passing conditions.
By default, when the subview is opened for the first time, the fill method is automatically called to fill in the data, and the existing data is not refreshed when the subview is opened later.
Define a sub-view container
In addition to defining the sub-view sample, you also need to define the sub-view container in the row template. In the code just now, there is such a section:Copy codeThe Code is as follows: // je-id = "<sub-view ID>"
<ItemTemplate>
<Div class = "picture">
<Div je-id = "pictureRepeater" style = "display: none;">
</Div>
</Div>
</ItemTemplate>

By binding je-id to the sub-view ID, you can bind the element to the sub-view container, and the sub-view will be displayed in the target container.
The sub-view is disabled by default, so the sub-view container is hidden at the beginning by Using style = "display: none;" in the code.

JQueryElementIs open source shared code, you can download dll or source code on the http://code.google.com/p/zsharedcode/wiki/Download page.

Demo of the actual process:Http://www.tudou.com/programs/view/uVx2BBMHgOQ/, full screen viewing is recommended.

Welcome to panzer open source project, http://zsharedcode.googlecode.com/, which includes IEBrowser control WebBrowser to execute various js and jQuery scripts as well as recording functions and jQueryUI Asp.net controls JQueryElement.