Sample code Download: Http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar
2011-9-22 Update part of the content
2011-10-9 updated part of the content, please refer to Http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
2011-10-17 Update part of the content
The content contained in this article is as follows:
* Prepare
* Main function
* Bound field
* Field expression
* Binding Properties
* Property Expression
* Basic Settings
* Setup Paging
* Set field
* Set the service-side method of the call
* Request/Return Data format
* Fill/Search
* Update
* Delete
* NEW
* Line Status Description
* Sort Status Description
* Setup Template
* ItemTemplate
* Updateditemtemplate/inserteditemtemplate
* Removeditemtemplate
* EditItemTemplate
* Filtertemplate/newitemtemplate
* Headertemplate/footertemplate/emptytemplate
* Special Bindings
* Je-id
* Je-<javascript Event name >
* Je-class
* Je-checked/selected/readonly
* Je-value
* Je-<jqueryui Plugin name >
* Je-template
* Child View
* Data grouping
* Events
* Client Method
Repeater Sample Picture:
Get ready
Make sure that you have downloaded the latest version of Jqueryelement in Http://code.google.com/p/zsharedcode/wiki/Download.
Use the directive to refer to the following namespaces:
Copy Code code as follows:
<%@ Register assembly= "Zoyobar.shared.panzer.JQueryElement"
Namespace= "Zoyobar.shared.panzer.ui.jqueryui"
Tagprefix= "Je"%>
<%@ Register assembly= "Zoyobar.shared.panzer.JQueryElement"
Namespace= "Zoyobar.shared.panzer.web.jqueryui"
Tagprefix= "Je"%>
In addition to namespaces, you need to reference jQueryUI scripts and styles, and include a custom style jQueryUI in the Http://code.google.com/p/zsharedcode/wiki/Download download package. If you need more styles, you can download them in Http://jqueryui.com/download:
Copy Code code as follows:
<link type= "Text/css" rel= "stylesheet" href= "[Style path]/jquery-ui-1.8.15.custom.css"/>
<script type= "Text/javascript" src= [Script path]/jquery-1.6.2.min.js] ></script>
<script type= "Text/javascript" src= [Script path]/jquery-ui-1.8.15.custom.min.js] ></script>
<script type= "Text/javascript" src= [Script path]/jquery.ui.datepicker-zh-cn.js] ></script>
Main function
Bound field
In a row template, you can use the form of #{< field name to bind fields, such as:
Copy Code code as follows:
<ItemTemplate>
<span>#{id}</span>
<span>#{realname}</span>
<span>#{age}</span>
</ItemTemplate>
Fields can also be bound to the properties of a label, such as:
Copy Code code as follows:
<ItemTemplate>
<span>#{id}</span>
<span title= "#{realname}" >#{realname}</span>
<span>#{age}</span>
</ItemTemplate>
Field expression
When you want to display different content based on the value of a field, you can use a field expression, in which the # will represent the field itself, and the example:
Copy Code code as follows:
<script type= "Text/javascript" >
function Convertage (age) {
if (age < 0) return age.tostring () + '-not born ';
else if (age < 4) return age.tostring () + '-Toddler ';
else if (age < Ten) return age.tostring () + '-children ';
else if (age </) return age.tostring () + '-juvenile ';
else if (age <) return age.tostring () + '-Youth ';
else if (age <) return age.tostring () + '-middle-aged ';
else return age.tostring () + '-old age ';
}
</script>
<td>
#{age,convertage (#)}
</td>
In the example above, #{age,convertage (#) does not output the value of the age field directly, but instead passes the age field to the Convertage function and then outputs the result of the function execution.
In addition to calling functions, you can also write JavaScript code directly, such as: #{age,# <= 0? ' Impossible ': #.tostring ()}.
Binding properties
You can bind attributes in all templates, syntax @{< property name, for example:
Copy Code code as follows:
<FooterTemplate>
Page @{pageindex}/@{pagecount}, @{itemcount}
</FooterTemplate>
Property expression
The property expression is similar to the field expression above, and you can output the converted property as an example:
Copy Code code as follows:
<TD colspan= "5" >
Part @{pageindex}/@{pagecount,@ <= 0? '-': @ Page, @{itemcount,@ <= 0? '-': @} Bar
</td>
We judge the properties PageCount and itemcount if less than or equal to 0, the connector is displayed.
Basic settings
The Selector property of the Repeater is a JavaScript expression that will act as a selector, which can be written in reference to Http://jquery.com, and the corresponding element of the selector will be rendered as the final Repeater on the page, example:
Copy Code code as follows:
<table id= "List" ></table>
<je:repeater id= "Studentrepeater" runat= "Server"
Selector= "' #list '" >
/* ... */
</je:Repeater>
If you set the Isvariable property to True, JavaScript variables with the same name as ClientID will be generated on the client, as examples:
Copy Code code as follows:
<je:repeater id= "Studentrepeater" runat= "Server"
Isvariable= "true" >
</je:Repeater>
<script type= "Text/javascript" >
$ (function () {
Studentrepeater.__repeater (' Fill ');
});
</script>
Because the ClientID is the same as the ID on this page, you can access repeater through Studentrepeater. In addition, you can also use the Jqueryscript control and inline syntax [%id:studentrepeater%] to ensure that ClientID pages with different IDs also have access to repeater variables.
Set up paging
Set the number of data per page with the PageSize property of Repeater, the PageIndex property sets the initial page number, and the PageIndex defaults to 1.
Setting fields
The field property of the Repeater represents the fields that participate in the binding, in the form of a JavaScript string array, such as: [' id ', ' realname ', ' age '], and if you do not set the field property, it is determined by the data that was first populated, but this will cause cannot be created without data.
Filterfield represents the field to search for and is also a JavaScript string array. Filterfielddefault the default value for the value of the search field is null or "," Example: [', ', 0].
SortField represents a field that participates in sorting, such as: [' ID '].
Fieldmask represents a regular expression used to validate a field, and is valid when updated or new: {< field name: {reg: < regular expression, Tip: ' < error message > ', type: ' < field type, can be Number, Boolean, Date> '}}.
Set the service-side method of the call
You can set up how to call the server-side method by Async, and if you call WebService, you need to set up MethodName, and if it's a generic handler like normal ashx, ignore MethodName, example:
Copy Code code as follows:
<je:repeater id= "Studentrepeater" runat= "Server"
Fillasync-url= "< Fill method address >"
Fillasync-methodname= "< Fill method name >"
Updateasync-url= "< Update method address >"
Updateasync-methodname= "< Update method name >"
Insertasync-url= "< new method address >"
Insertasync-methodname= "< new method name >"
Removeasync-url= "< Delete method address >"
Removeasync-methodname= "< Delete method name >"
>
/* ... */
</je:Repeater>
<je:repeater id= "Studentrepeater" runat= "Server"
Fillasync-url= "Student.aspx"
Fillasync-methodname= "Fill"
Updateasync-url= "Student.aspx"
Updateasync-methodname= "Update"
Insertasync-url= "Student.aspx"
Insertasync-methodname= "Insert"
Removeasync-url= "Student.aspx"
Removeasync-methodname= "Remove"
>
/* ... */
</je:Repeater>
If you need to pass more parameters for the method, you can use the following form:
Copy Code code as follows:
<je:repeater id= "Studentrepeater" runat= "Server" >
<fillasync Url= "< Fill method address >" Methodname= "< Fill method name >" >
<ParameterList>
<je:parameter name= "< parameter name 1>"
Type= "Expression"
Value= "< value 1>"
Default= "< default value 1>"/>
<je:parameter name= "< parameter name 2>"
Type= "Selector"
Value= "< selector 2>"
Default= "< default value 2>"/>
/* ... */
</ParameterList>
</FillAsync>
</je:Repeater>
<je:repeater id= "Studentrepeater" runat= "Server" >
<fillasync url= "student.aspx" methodname= "Fill" >
<ParameterList>
<je:parameter name= "ws"
Type= "Expression"
Value= "website"
default= "'-'"/>
<je:parameter name= "Year"
Type= "Selector"
Value= "' #year '"
default= "/>"
/* ... */
</ParameterList>
</FillAsync>
</je:Repeater>
By adding Parameter, you can pass more arguments, name is the parameter name, and Type is Expression, then Value contains a JavaScript expression, and the example value= "website" represents the JAVASC The value of the Ript variable website, of course, can also be set to a constant, such as: value= "' www.google.com '" or "value=" 100, when Type is Selector, the JavaScript expression in value Type will be the selector, the selector can be written in reference to Http://jquery.com, and the value of the element corresponding to the selector will be the value of the parameter. Default is a JavaScript expression that defaults to the value in default when the value of the parameter is null or '.
Request/Return Data format
Fill/Search
For a fill or search operation, take WebService as an example, the server will receive the following parameters, pageindex page numbers, pagesize the number of data bars per page, and either receive parameters with the same name as the field or add parameters by Parameter as a search condition, or receive a form Parameters that are used for sorting are __order, and the values of the parameters are similar to name ASC, age desc, and __group parameters are used to receive the criteria for grouping:
Copy Code code as follows:
[WebMethod ()]
public static Object < method name > (int pageindex, int pagesize
[, < type N, such as: string> < the field or condition name used for the search n>]
[, String __order] [, String __group])
{
}
[WebMethod ()]
public static object Fill (int pageindex, int pagesize
, string realname, int age
, String __order)
{
}
The server should also return JSON data in the following format as padding data, where __success defaults to True, ItemCount can be omitted, but PageCount page numbers cannot be computed.
Copy Code code as follows:
{
"__success": < A Boolean value that indicates whether the success is true or FALSE>
"Rows": a JavaScript array that < Current page contains row data;
"ItemCount": < Total rows >
}
{
"__success": true,
"Rows":
[
{"id": 1, "Realname": "Jack", "Age": 20},
{"id": 2, "Realname": "Tom", "Age": 21}
],
"ItemCount": 120
}
You can use anonymous types to return JSON in. NET 4.0, such as:
Copy Code code as follows:
[WebMethod ()]
public static Object Fill (//* Parameter/*)
{
// ...
list<object> students = new list<object> ();
Students. Add (New {
id = 1,
Realname = "Jack",
Age = 20
} );
// ...
return new {__success = true, rows = students. ToArray (), itemcount = 120};
}
Update
Delete
New
The above 3 items cannot be listed because of the space reason, if need please refer to: HTTP://CODE.GOOGLE.COM/P/ZSHAREDCODE/WIKI/JQUERYELEMENTREPEATERDOC
Row Status Description
In the client's JavaScript script, there are 4 types of row states, unchanged unchanged, updated updated, inserted new rows, removed deleted rows.
Sort Status Description
In the client's JavaScript script, there are 4 sort states, none unordered or default sorted, ASC ascending, desc descending.
Setting up templates
In the various templates of Repeater, you can set the HTML code that Repeater the final display, which should be complete and legal, or it may cause the final display to be abnormal.
ItemTemplate
ItemTemplate is one of the row templates that can display rows in the unchanged state, if not set updateditemtemplate or inserteditemtemplate, then updated, inserted state Rows are also displayed in ItemTemplate, example:
Copy Code code as follows:
<ItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
<td>
/* Edit and delete button * *
</td>
</tr>
</ItemTemplate>
Updateditemtemplate/inserteditemtemplate
Unlike ItemTemplate, updateditemtemplate and inserteditemtemplate are used to display rows with a status of updated and inserted, mainly for rows with different styles to display different states, but they can also Use simpler je-class to accomplish the same effect, examples:
Copy Code code as follows:
<UpdatedItemTemplate>
<tr style= "Font-weight:bold;" >
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
</tr>
</UpdatedItemTemplate>
<InsertedItemTemplate>
<tr style= "Color:green;" >
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
</tr>
</InsertedItemTemplate>
Removeditemtemplate
EditItemTemplate
Filtertemplate/newitemtemplate
Headertemplate/footertemplate/emptytemplate
The above 4 items cannot be listed because of the space reason, if need please refer to: HTTP://CODE.GOOGLE.COM/P/ZSHAREDCODE/WIKI/JQUERYELEMENTREPEATERDOC
Special bindings
Je-id
You can bind special IDs using je-id= < field name >, either in the row template or in the INPUT element in Filtertemplate, newitemtemplate. In EditItemTemplate, input of the specified Je-id will contain the new value for this field. In Filtertemplate, the input of the specified Je-id contains the values of the fields used for searching, which should be included in the Filterfield property. In Newitemtemplate, the input of the specified Je-id contains the value for the newly created field.
Je-<javascript Event name >
Use the Je-<javascript event name >= "< behavior name >" To bind Special operations to events. Can be used in various templates, commonly used behavior are: BeginEdit start editing, EndEdit cancel edit, update save updates, remove delete, Toggleselect Toggle selected state, insert new, filter search, TOGGL Esort switch sort. Of these, the top 5 can only be used in row templates, inserts are available in Newitemtemplate, filter is available in Filtertemplate, Togglesort is available in HeaderTemplate, example:
Copy code code as follows:
<ItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
<td>
<span je-onclick= "BeginEdit" > Edit </span>
<span je-onclick= "Remove" > Delete </span>
</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
<input type= "text" je-id= "Realname" value= "#{realname}" class= "TextBox"/>
</td>
<td>
<input type= "text" je-id= "Age" value= "#{age}" class= "TextBox"/>
</td>
<td>
<span je-onclick= "EndEdit" > Cancel </span>
<span je-onclick= "Update" > Save </span>
</td>
</tr>
</EditItemTemplate>
It should be noted that Togglesort also needs to specify a parameter that toggles the sorted field, which has been set in SortField, such as: je-onclick= "Togglesort, ' realname '".
If you are binding multiple behaviors, you can use; Number, such as je-onclick= "Setgroup, ' realname '; fill".
Je-class
You can bind special styles for events by using the je-class= < style >. You can use Je-class in individual templates, the common styles are: {header} Ui-widget-header, {active} represents ui-state-active, {highlight} represents ui-state-highlight , {disabled} represents ui-state-disabled, {error} represents Ui-state-error, {default} represents Ui-state-default, {state} represents row status, {sort} indicates sort state, Example:
Copy Code code as follows:
<HeaderTemplate>
<thead je-class= "{header}" >
<tr>
<TD je-onclick= "togglesort, ' id '" >
<span je-class= "{sort,id,,ui-icon ui-icon-arrow-1-n icon,ui-icon ui-icon-arrow-1-s icon}" >
</span>
Serial number
</td>
/* ... */
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr je-class= "{State}-item" >
/* ... */
</tr>
</ItemTemplate>
Here you need to explain the syntax for {state} and {sort}, {state[,< unchanged line style >[,< new bank style >[,< modify line style >[,< delete line style;], {sort,< Sort field >[,< No sort style >[,< ascending style >[,< descending style]]}. For {state}, if there is no style specified for a status, the name of the row will be used instead of the style names, such as: {State,,new-item}, because the style of the unchanged row is not specified, so if the row's state is unchanged, then the return Unchang Ed. for {Sort}, if you do not specify a sort style, the state of the sort will be used instead of the style name.
Je-checked/selected/readonly
Use Je-checked= "selected" with Je-onclick= "Toggleselect" in ItemTemplate to indicate whether the row is in the selected state, and je-selected can be used for EditItemTemplate The select element in the, example:
Copy Code code as follows:
<ItemTemplate>
<tr>
<td>
<input type= "checkbox"
Je-checked= "Selected"
je-onclick= "Toggleselect"
/> #{id}
</td>
</tr>
</ItemTemplate>
You can initialize the selected option in Filtertemplate by using je-selected= < search field name >[,< matching value], for example:
Copy Code code as follows:
<FilterTemplate>
<tr>
<td>
<select je-id= "Type" >
<option je-selected= "type, ' normal '" > OK </option>
<option je-selected= "type, ' High '" > </option>
<option je-selected= "type, ' low '" > Lower </option>
</select>
</td>
</tr>
</FilterTemplate>
Je-value
Use je-value= "< search field name >" In Filtertemplate to bind the initialized search criteria.
Je-<jqueryui Plugin name >
You can use the Je-<jqueryui plug-in name >= "< property name n>=< property value n>;" in any template to generate a jQueryUI plug-in, but only Je-button and Je-datepicker are currently supported, Example:
Copy Code code as follows:
<EditItemTemplate>
<tr je-class= "{State}-item" >
<td>
<input type= "checkbox" je-checked= "selected" je-onclick= "Toggleselect"/> #{id}
</td>
<td>
<input type= "text" je-id= "Realname" value= "#{realname}"/>
</td>
<td>
<input type= "text" je-id= "Age" value= "#{age}"/>
</td>
<td>
<input type= "text" je-id= "Birthday"
je-datepicker= "dateformat= ' yy-mm-dd ';"
Value= "#{birthday}"/>
</td>
<td>
<span
je-button= "label= ' edit '; icons={primary: ' Ui-icon-pencil '};"
je-onclick= "BeginEdit" >
</span>
<span
je-button= "label= ' delete '; icons={primary: ' Ui-icon-trash '};"
je-onclick= "Remove" >
</span>
</td>
</tr>
</EditItemTemplate>
The setting of the property is consistent with the properties of the jQueryUI plug-in, and you can refer to http://jqueryui.com.
Je-template
You can use je-template= < template name > to mark elements that will be templates, and you can use this method to set up templates, in addition to the various template mentioned above:
Copy Code code as follows:
<table id= "List" >
<thead je-template= "My-header" >
</thead>
</table>
<je:repeater id= "Studentrepeater" runat= "Server"
Selector= "' #list '" header= "[Je-template=my-header]" >
</je:Repeater>
Child view
In Repeater, you can switch, close, and open a child view by Shiftview, Collapseview, Expandview three functions, such as:
Copy Code code as follows:
1 <je:repeater id= "< sub view id>" runat= "Server"
2 Filterfield= "< sub-view search Fields >" >
3
4 </je:Repeater>
5
6 <je:repeater id= "Googlerepeater" runat= "Server" >
7 <ItemTemplate>
8 <div je-onclick= "Shiftview, ' < sub view id> ' [,< child view search field value N>]" >
9 Toggle Child View
Ten </div>
One <div je-id= "< sub view id>" >
</div>
</ItemTemplate>
</je:Repeater>
15
<je:repeater id= "Picturerepeater" runat= "Server"
filterfield= "[' url ']" >
<ItemTemplate>
<div>
<span class= "url" >#{url}</span>
<br/>
<br/>
#{picture}
</div>
</ItemTemplate>
Num </je:Repeater>
27
<div id= "List" >
<je:repeater id= "Googlerepeater" runat= "Server" selector= "' #list '" >
<ItemTemplate>
<div
je-button= "label= ' more ';"
je-onclick= "Shiftview, ' picturerepeater ', ' #{url} '" >
</div>
<div je-id= "Picturerepeater" style= "Display:none;" >
</div>
Panax Notoginseng </ItemTemplate>
</je:Repeater>
</div>
For more usage and instructions please refer to the jquery repeater to mimic the Google expansion Page Preview view.
Data grouping
You can set the grouped fields through the Repeater GroupField or the Setgroup function, set the grouped templates by GroupTemplate, and call the Fill function to retrieve the data after you set up the grouping:
Copy Code code as follows:
1 <je:repeater id= "Mailrepeater" runat= "Server"
2 groupfield= "< Group field >"
3 fillasync-url= "Webservice.asmx"
4 fillasync-methodname= "Fillmaillist" >
5 <HeaderTemplate>
6
7 <TD
8 je-onclick= "Setgroup, ' < Group field > '; togglesort, ' < sort field > '" >
9 Sending person
Ten </td>
11
</HeaderTemplate>
<GroupTemplate>
14
<td>
@{groupfield}: @{groupname}
</td>
18
</GroupTemplate>
<ItemTemplate>
21st
<TD class= "Sender" >
#{sender} #{displaydate}
</td>
25
Num </ItemTemplate>
</je:Repeater>
For more usage and instructions please refer to the jquery repeater to complete the QQ mail packet display function.
Event
All events in Repeater have PE and e two parameters, Pe.option contains the options in Repeater, Pe.jquery represents the current Repeater, and E contains the relevant data for the event.
Preupdate, Updated the events before and after the update, Preremove, removed the events before and after the deletion, Preinsert, Inserted the new events before and after. E.row represents the row currently participating in the operation, E.index the index of the row, and Updated, removed, Inserted e.issuccess, indicates whether the execution was successful, example:
Copy Code code as follows:
<je:repeater id= "Studentrepeater" runat= "Server"
Preupdate= "
function (PE, e) {
if (e.row.realname = = ' | | e.row.age = = ' | | e.row.birthday = = ') {
$ (' #message '). Text (' Please fill in the information complete ');
return false;
}
}
"Preinsert="
function (PE, e) {
if (e.row.realname = = ' | | e.row.age = = ' | | e.row.birthday = = ') {
$ (' #message '). Text (' Please fill in the information complete ');
return false;
}
}
"Preremove="
function (PE, e) {
if (!confirm (' delete ' + E.row.realname)) {
return false;
}
}
"Updated="
function (PE, e) {
$ (' #message '). Text (' Update ' + E.row.realname + e.issuccess? ' Success ': ' failure ');
}
"Inserted="
function (PE, e) {
$ (' #message '). Text (' new ' + E.row.realname + e.issuccess? ' Success ': ' failure ');
}
"Removed="
function (PE, e) {
$ (' #message '). Text (' delete ' + E.row.realname + e.issuccess? ' Success ': ' failure ');
}
">
</je:Repeater>
Prefill, filled the events before and after the padding, PreExecute, executed events before and after any operation, Precustom, customed the events before and after the custom action, and parameter e contains the command property that represents the name of the custom action. Presubstep, substepped the events before and after the distribution operation, parameter E contains the Count property to represent the total number of bars, and the completed property represents the number of rows that have been processed.
Navigable when navigation availability changes, the parameter e contains the Prev property to indicate whether there is a previous page, and the next property indicates whether there is a next page. Blocked an event when an operation is blocked.
Client methods
This item cannot be all listed because of space reason, if need please refer to: Http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.
Jqueryelement is an Open-source shared code that can be downloaded from a DLL or source code on a http://code.google.com/p/zsharedcode/wiki/Download page.
Actual process Demo: http://www.tudou.com/programs/view/GQeh0ZIJ0RY/, recommended Full-screen viewing.
Welcome to Panzer Open Source project, http://zsharedcode.googlecode.com/, which contains Iebrowser control WebBrowser perform various JS and jQuery scripts as well as recording functions and jQueryUI The ASP.net control jqueryelement.
