jQuery EasyUI 教程
jQuery EasyUI 表單插件 - Form 表單
jQuery EasyUI 插件通過 $.fn.form.defaults 重寫默認的 defaults。
表單（form）提供多種方法來執(zhí)行帶有表單字段的動作，比如 ajax 提交、加載、清除，等等。當(dāng)提交表單時，調(diào)用 'validate' 方法來檢查表單是否有效。
用法
創(chuàng)建一個簡單的 HTML 表單。構(gòu)建表單并給 id、action、method 賦值。
<form id="ff" method="post">
<div>
????????<label for="name">Name:</label>
????????<input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
</div>
<div>
????????<label for="email">Email:</label>
????????<input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
</div>
...
</form>
讓表單（form）成為 ajax 提交的表單（form）
$('#ff').form({
url:...,
onSubmit: function(){
????????// do some check
????????// return false to prevent submit;
},
success:function(data){
????????alert(data)
}
});
// submit the form
$('#ff').submit();
去做一個提交動作
// call 'submit' method of form plugin to submit the form
$('#ff').form('submit', {
url:...,
onSubmit: function(){
????????// do some check
????????// return false to prevent submit;
},
success:function(data){
????????alert(data)
}
});
通過額外的參數(shù)提交
$('#ff').form('submit', {
url:...,
onSubmit: function(param){
????????param.p1 = 'value1';
????????param.p2 = 'value2';
}
});
處理提交響應(yīng)
提交一個 ajax 表單（form）是非常簡單的。當(dāng)提交完成時用戶可以獲得響應(yīng)數(shù)據(jù)。請注意，響應(yīng)數(shù)據(jù)是來自服務(wù)器的原始數(shù)據(jù)。對響應(yīng)數(shù)據(jù)的解析動作要求獲得正確的數(shù)據(jù)。
例如，響應(yīng)數(shù)據(jù)假設(shè)是 JSON 格式，一個典型的響應(yīng)數(shù)據(jù)如下所示：
{
"success": true,
"message": "Message sent successfully."
}
現(xiàn)在在 'success' 回調(diào)函數(shù)中處理 JSON 字符串。
$('#ff').form('submit', {
success: function(data){
????????var data = eval('(' + data + ')'); // change the JSON string to javascript object
????????if (data.success){
????????????alert(data.message)
????????}
}
});
屬性
| 名稱 | 類型 | 描述 | 默認值 |
|---|---|---|---|
| url | string | 要提交的表單動作 URL。 | null |
事件
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| onSubmit | param | 提交前觸發(fā)，返回 false 來阻止提交動作。 |
| success | data | 當(dāng)表單提交成功時觸發(fā)。 |
| onBeforeLoad | param | 發(fā)出請求加載數(shù)據(jù)之前觸發(fā)。返回 false 就取消這個動作。 |
| onLoadSuccess | data | 當(dāng)表單數(shù)據(jù)加載時觸發(fā)。 |
| onLoadError | none | 加載表單數(shù)據(jù)時發(fā)生某些錯誤的時候觸發(fā)。 |
方法
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| submit | options | 做提交動作，options 參數(shù)是一個對象，它包含下列屬性： url：動作的 URL onSubmit：提交之前的回調(diào)函數(shù) success：提交成功之后的回調(diào)函數(shù) 下面的實例演示如何提交一個有效表單，避免重復(fù)提交表單。
$.messager.progress();????// display the progress bar
$('#ff').form('submit', {
????url: ...,
????onSubmit: function(){
????????var isValid = $(this).form('validate');
????????if (!isValid){
????????????$.messager.progress('close');????// hide progress bar while the form is invalid
????????}
????????return isValid;????// return false will stop the form submission
????},
????success: function(){
????????$.messager.progress('close');????// hide progress bar while submit successfully
????}
});
|
| load | data | 加載記錄來填充表單。data 參數(shù)可以是一個字符串或者對象類型，字符串作為一個遠程 URL，否則作為一個本地記錄。 代碼實例：
$('#ff').form('load','get_data.php');????// load from URL
$('#ff').form('load',{
????name:'name2',
????email:'mymail@gmail.com',
????subject:'subject2',
????message:'message2',
????language:5
});
|
| clear | none | 清除表單數(shù)據(jù)。 |
| reset | none | 重置表單數(shù)據(jù)。該方法自版本 1.3.2 起可用。 |
| validate | none | 進行表單字段驗證，當(dāng)全部字段都有效時返回 true 。該方法和 validatebox 插件一起使用。 |
| enableValidation | none | 啟用驗證。該方法自版本 1.3.4 起可用。 |
| disableValidation | none | 禁用驗證。該方法自版本 1.3.4 起可用。 |
jQuery EasyUI 插件其他擴展