在jquery repeater中添加設置日期,下拉,復選框等控件

2024-09-06 20:04:47

字體：大中小

來源：轉載

供稿：網友

如果, 有不明白的問題, 請先閱讀 30 分鐘掌握無刷新 Repeater.

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

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

* 準備
* html 元素
* 文本框
* 下拉框
* 多行文本框
* 復選框
* jQueryUI 插件
* jQueryUI 日期框
* jQueryUI 按鈕
* jQueryUI 自動匹配

示例圖片:

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

通過在 input 中添加 value="#{<綁定字段>}" 來設置文本框的值, 而使用 je-id="<字段名>" 可以讓 repeater 在更新或新建行時, 知道該文本框的值對應了該字段.
下拉框
下拉框可用于一些枚舉值的編輯, 限制字段只能在指定的值中選擇.
代碼如下:
<select je-id="<字段名>">
<option value="<枚舉值1>" je-selected="<布爾值1, 可以是綁定字段或者一個表達式>">
<顯示值1>
</option>
<option value="<枚舉值2>" je-selected="<布爾值2, 可以是綁定字段或者一個表達式>">
<顯示值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'">
計算機
</option>
<option value="gsgl" je-selected="'#{major}' == 'gsgl'">
工商管理
</option>
<option value="hy" je-selected="'#{major}' == 'hy'">
漢語
</option>
</select>
</EditItemTemplate>
</je:Repeater>

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

上一篇：巧妙使用JQuery Clone 添加多行數據，并更新到數據庫的實現代碼

下一篇：JQuery實現Repeater無刷新批量刪除(附后臺asp.net源碼)