在jquery repeater中添加設(shè)置日期,下拉,復(fù)選框等控件

2024-09-06 20:04:47

字體：大中小

供稿：網(wǎng)友

如果, 有不明白的問(wèn)題, 請(qǐng)先閱讀 30 分鐘掌握無(wú)刷新 Repeater.

示例代碼下載: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar

本文將詳細(xì)的講解 Repeater 控件的模板中如何處理控件, 目錄如下:

* 準(zhǔn)備
* html 元素
* 文本框
* 下拉框
* 多行文本框
* 復(fù)選框
* jQueryUI 插件
* jQueryUI 日期框
* jQueryUI 按鈕
* jQueryUI 自動(dòng)匹配

示例圖片:

準(zhǔn)備
請(qǐng)參照 http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc 中的準(zhǔn)備.
html 元素
可以在模板中使用 html 文本框或者下拉框, 并進(jìn)行賦值和讀取數(shù)據(jù).
文本框
文本框可以用于編輯文本字段, 也可以配合 je-datepicker, je-autocomplete 創(chuàng)建日期框, 自動(dòng)匹配.
代碼如下:
<input je-id="<字段名>" type="text" value="<綁定字段>">
<je:Repeater ID="pictureRepeater" runat="server"
... >
<EditItemTemplate>
<input je-id="realname" type="text" value="#{realname}" />
</EditItemTemplate>
</je:Repeater>

通過(guò)在 input 中添加 value="#{<綁定字段>}" 來(lái)設(shè)置文本框的值, 而使用 je-id="<字段名>" 可以讓 repeater 在更新或新建行時(shí), 知道該文本框的值對(duì)應(yīng)了該字段.
下拉框
下拉框可用于一些枚舉值的編輯, 限制字段只能在指定的值中選擇.
代碼如下:
<select je-id="<字段名>">
<option value="<枚舉值1>" je-selected="<布爾值1, 可以是綁定字段或者一個(gè)表達(dá)式>">
<顯示值1>
</option>
<option value="<枚舉值2>" je-selected="<布爾值2, 可以是綁定字段或者一個(gè)表達(dá)式>">
<顯示值2>
</option>
</select>
<je:Repeater ID="pictureRepeater" runat="server"
... >
<EditItemTemplate>
<select je-id="sex">
<option value="true" je-selected="#{sex}">男</option>
<option value="false" je-selected="#{sex,!#}">女</option>
</select>
<select je-id="major">
<option value="jsj" je-selected="'#{major}' == 'jsj'">
計(jì)算機(jī)
</option>
<option value="gsgl" je-selected="'#{major}' == 'gsgl'">
工商管理
</option>
<option value="hy" je-selected="'#{major}' == 'hy'">
漢語(yǔ)
</option>
</select>
</EditItemTemplate>
</je:Repeater>

和文本框一樣, 下拉框同樣通過(guò) je-id 綁定字段名, 在每一個(gè) option 中通過(guò) value 屬性設(shè)置枚舉值, 使用 je-selected 來(lái)設(shè)置一個(gè)返回布爾值的表達(dá)式, 如果表達(dá)式返回 true, 則該選項(xiàng)處于選中狀態(tài).
在上面的代碼中, 由于 sex 字段是布爾類(lèi)型的, 所以可以使用 #{sex} 這樣的形式, #{sex,!#} 則是取 sex 字段的反. 也可以像這樣 #{major,# == 'jsj'}, 表示 major 字段為 'jsj' 則選項(xiàng)處于選中狀態(tài). 還可以使用 '#{major}' == 'jsj' 來(lái)完成同樣的效果, 但這里的 #{major} 需要用單引號(hào)括住.

上一篇：巧妙使用JQuery Clone 添加多行數(shù)據(jù)，并更新到數(shù)據(jù)庫(kù)的實(shí)現(xiàn)代碼

下一篇：JQuery實(shí)現(xiàn)Repeater無(wú)刷新批量刪除(附后臺(tái)asp.net源碼)

學(xué)習(xí)交流

如何查找有故障的配件

如何查找有故障的配件...

熱門(mén)圖片

猜你喜歡的新聞

猜你喜歡的關(guān)注