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 process controls in the Repeater control template. The directory is as follows:
* Preparation
* Html elements
* Text Box
* Drop-down list
* Multi-line text box
* Check box
* JQueryUI plug-in
* JQueryUI date box
* JQueryUI button
* JQueryUI automatic match
Example image:
Preparation
Refer to preparation in http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.
Html Element
You can use the html text box or drop-down box in the template to assign values and read data.
Text Box
The text box can be used to edit text fields. It can also be used with the je-datepicker And je-autocomplete creation date boxes to automatically match.
Copy codeThe Code is as follows:
<Input je-id = "<field Name>" type = "text" value = "<bind field>">
<Je: Repeater ID = "pictureRepeater" runat = "server"
...>
<EditItemTemplate>
<Input je-id = "realname" type = "text" value = "# {realname}"/>
</EditItemTemplate>
</Je: Repeater>
Add value = "# {<bind field>}" to input to set the value of the text box, je-id = "<field Name>" allows the repeater to know that the value of the text box corresponds to this field when updating or creating a new row.
Drop-down list
The drop-down box can be used to edit some enumerated values. The Restricted fields can only be selected from the specified values.
Copy codeThe Code is as follows:
<Select je-id = "<field Name>">
<Option value = "<enumeration value 1>" je-selected = "<Boolean value 1, which can be a bound field or expression>">
<Display value 1>
</Option>
<Option value = "<enumeration value 2>" je-selected = "<Boolean value 2, which can be a bound field or 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>
Like a text box, the drop-down box binds field names through je-id, sets enumeration values through the value attribute in each option, and sets an expression that returns boolean values using je-selected, if the expression returns true, this option is selected.
In the above Code, because the sex field is of the boolean type, you can use the form # {sex}, # {sex ,! #} Is the inverse of the sex field. it can also be like this # {major, # = 'jsj '}, indicating that if the major field is 'jsj', the option is selected. you can also use '# {major}' = 'jsj 'to achieve the same effect. However, # {major} must be enclosed in single quotes.
Multi-line text box
Different from the preceding text box, the multi-line text box uses the textarea element.
<Textarea je-id = "<field Name>"> <bound field> </textarea>
The multi-line text box directly binds the field to the content of textarea.
Check box
Check boxes are often used to edit Boolean fields, such:
Copy codeThe Code is as follows:
<Input je-id = "<field Name>" type = "checkbox"
Je-checked = "<Boolean value, which can be a bound field or expression>"/>
<Je: Repeater ID = "pictureRepeater" runat = "server"
...>
<EditItemTemplate>
<Input je-id = "sex" type = "checkbox" je-checked = "# {sex}"/>
</EditItemTemplate>
</Je: Repeater>
In the above Code, set type to checkbox in the input element, and bind the Boolean sex field through je-checked. If sex is true, the check box is in the selected state.
JQueryUI plug-in
In the template, use the je-<jQueryUI plug-in Name> = "<property name n >=< property value n>;" syntax to create the jQueryUI plug-in, the property name and attribute value can be referred to the http://jqueryui.com.
JQueryUI date box
The date box is used to bind the field for editing the date type:
Copy codeThe Code is as follows:
<Input je-id = "<field Name>" je-datepicker = "<attribute name n >=< attribute 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>
In the code, the dateFormat attribute sets the date format of the date box. You can set more attributes. multiple attributes can be separated by commas. the value of the date box is bound to the field birthday, but the date uses jQuery. panzer. the formatDate function is used to format the output of a date. NET.
JQueryUI button
Buttons are usually used to execute some commands:
Copy codeThe Code is as follows:
<Span je-button = "<attribute name n> = <attribute 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 the input element. in the attribute, label is used as the text of the button, or text can be directly used as the content of the span element. common actions include beginedit, endedit, update, insert, remove, next, prev, and goto.
Corresponding to start editing, cancel editing, update, new, delete, next page, previous page, and jump behavior respectively.
JQueryUI automatic match
The autocomplete plug-in of jQueryUI can automatically match the corresponding entries when the user inputs the text:
Copy codeThe Code is as follows:
<Input je-id = "<field Name>" je-autocomplete = "<attribute name n >=< attribute 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 attribute of autocomplete is an array used for matching entries.
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/jiuV1nkeWNo/, 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.
