If, there is no understanding of the problem, please first read 30 minutes master without refreshing Repeater.
Sample code Download: Http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar
This article explains in detail how the controls are handled in the templates of the Repeater control, as follows:
* Prepare
* HTML element
* Text Box
* Dropdown Box
* Multi-line text box
* check box
* jQueryUI Plugin
* jQueryUI Date Box
* jQueryUI button
* jQueryUI Automatic Matching
Sample Picture:
Get ready
Please refer to the preparation in Http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.
HTML element
You can use an HTML text box or Drop-down box in a template, and assign and read data.
text box
Text boxes can be used to edit text fields, and can be matched with Je-datepicker, je-autocomplete create date boxes, and automatically match.
Copy Code code as follows:
<input je-id= "< field name >" type= "Text" value= "< bound field >" >
<je:repeater id= "Picturerepeater" runat= "Server"
... >
<EditItemTemplate>
<input je-id= "Realname" type= "text" value= "#{realname}"/>
</EditItemTemplate>
</je:Repeater>
You set the value of the text box by adding value= "#{< bound field" in input, and using je-id= < field name > Lets repeater know that the value of the text box corresponds to the field when you update or create a new row.
Drop down box
The Drop-down box can be used to edit some of the enumeration values, which can only be selected in the specified value.
Copy Code code as follows:
<select je-id= "< field name >" >
<option value= "< enum value 1>" Je-selected= "< Boolean value 1, can be bound field or an expression >" >
< display value 1>
</option>
<option value= "< enum value 2>" Je-selected= "< Boolean value 2, can be bound field or an expression >" >
< display value 2>
</option>
</select>
<je:repeater id= "Picturerepeater" runat= "Server"
... >
<EditItemTemplate>
<select je-id= "Sex" >
<option value= "true" je-selected= "#{sex}" > Male </option>
<option value= "false" je-selected= "#{sex,!#}" > Female </option>
</select>
<select je-id= "Major" >
<option value= "JSJ" je-selected= "#{major} ' = = ' JSJ '" >
Computer
</option>
<option value= "Gsgl" je-selected= "#{major} ' = = ' Gsgl '" >
Business Administration
</option>
<option value= "hy" je-selected= "' #{major} ' = = ' hy '" >
Chinese
</option>
</select>
</EditItemTemplate>
</je:Repeater>
As with a text box, the Drop-down box also uses the Je-id bound field name, sets the enumeration value through the Value property in each option, sets an expression that returns a Boolean value using Je-selected, and if the expression returns true, the option is selected.
In the above code, because the Sex field is a Boolean type, you can use the form #{sex}, #{sex,!#} is the inverse of the sex field. You can also #{major,# = = ' JSJ '} like this to indicate that the major field is ' JSJ ' and the option is selected. You can also use ' #{major} ' = = ' JSJ ' to accomplish the same effect, but here the #{major} needs to be enclosed in single quotes.
Multi-line text box
The multiline text box differs from the text box above, and the multiline text box uses the TEXTAREA element.
<textarea je-id= "< field name >" >< bound field ></textarea>
A multiline text box binds the field directly to the contents of the textarea.
check box
Check boxes are often used to edit fields of a Boolean type, such as:
Copy Code code as follows:
<input je-id= "< field name >" type= "checkbox"
Je-checked= "< Boolean value, can be a bound field or an expression >"/>
<je:repeater id= "Picturerepeater" runat= "Server"
... >
<EditItemTemplate>
<input je-id= "Sex" type= "checkbox" je-checked= "#{sex}"/>
</EditItemTemplate>
</je:Repeater>
In the code above, the type is set to a checkbox in the INPUT element, and the sex field of the Boolean type is bound by je-checked. Sex is true, the check box is in the selected state.
jQueryUI Plugin
Create a jQueryUI plug-in in the template using the syntax of the Je-<jqueryui plug-in name >= "< property name n>=< property value n>;", where the property name and property values can be referenced to http://jqueryui.com.
jQueryUI Date Box
Date boxes are used to bind fields that edit date types:
Copy Code code as follows:
<input je-id= "< field name >" Je-datepicker= "< property name n>=< property value n>;"
Type= "text" value= "< date value >"/>
<je:repeater id= "Picturerepeater" runat= "Server"
... >
<EditItemTemplate>
<input je-id= "Birthday" je-datepicker= "dateformat= ' Yy-mm-dd '"
Type= "Text"
Value= "#{birthday,jquery.panzer.formatdate (#, ' Yyyy-mm-dd ')}"/>
</EditItemTemplate>
</je:Repeater>
The DateFormat property in the code sets the date format of the date box, you can set more properties, use multiple properties; Number separated. The value of the date box is bound to field birthday, but the date uses the JQuery.panzer.formatDate function to format the output of the date, which is formatted like. NET.
jQueryUI button
Buttons are often used to execute commands:
Copy Code code as follows:
<span je-button= "< property name n>=< property value n>;" je-onclick= "< behavior name >" ></span>
<je:repeater id= "Picturerepeater" runat= "Server"
... >
<span je-button= "label= ' save ';" je-onclick= "Update" ></span>
</je:Repeater>
You can use the span element as a button, or you can use the INPUT element. Label as the text of a button in a property, or you can use text directly as the contents of a SPAN element. The common behaviors are BeginEdit, EndEdit, UPDATE, INSERT, remove, Next, prev, Goto.
Corresponding to the start edit, cancel edit, update, new, delete, next page, previous page, jump behavior.
jQueryUI Automatic Matching
The jQueryUI AutoComplete plug-in automatically matches the corresponding entry when the user enters text:
Copy Code code as follows:
<input je-id= "< field name >" Je-autocomplete= "< property name n>=< property value n>;"
Value= "< current value >"/>
<je:repeater id= "Picturerepeater" runat= "Server"
... >
<input je-id= "Major" je-autocomplete= "source=[' JSJ ', ' gsgl ', ' hy '" "
Value= "#{major}"/>
</je:Repeater>
The source property of the AutoComplete is an array of matching entries.
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/jiuV1nkeWNo/, 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.
