jQuery EasyUI 表單插件 – Form 表單

2018-09-21 11:15 更新

jQuery EasyUI 表單插件 - Form 表單


jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.form.defaults 重寫默認的 defaults。

表單(form)提供多種方法來執(zhí)行帶有表單字段的動作,比如 ajax 提交、加載、清除,等等。當提交表單時,調用 'validate' 方法來檢查表單是否有效。

用法

創(chuàng)建一個簡單的 HTML 表單。構建表單并給 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)
    }
});

通過額外的參數提交

$('#ff').form('submit', {
    url:...,
    onSubmit: function(param){
		param.p1 = 'value1';
		param.p2 = 'value2';
    }
});

處理提交響應

提交一個 ajax 表單(form)是非常簡單的。當提交完成時用戶可以獲得響應數據。請注意,響應數據是來自服務器的原始數據。對響應數據的解析動作要求獲得正確的數據。

例如,響應數據假設是 JSON 格式,一個典型的響應數據如下所示:

{
    "success": true,
    "message": "Message sent successfully."
}

現在在 'success' 回調函數中處理 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

事件

名稱 參數 描述
onSubmit param 提交前觸發(fā),返回 false 來阻止提交動作。
success data 當表單提交成功時觸發(fā)。
onBeforeLoad param 發(fā)出請求加載數據之前觸發(fā)。返回 false 就取消這個動作。
onLoadSuccess data 當表單數據加載時觸發(fā)。
onLoadError none 加載表單數據時發(fā)生某些錯誤的時候觸發(fā)。

方法

名稱 參數 描述
submit options 做提交動作,options 參數是一個對象,它包含下列屬性:
url:動作的 URL
onSubmit:提交之前的回調函數
success:提交成功之后的回調函數

下面的實例演示如何提交一個有效表單,避免重復提交表單。
$.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 參數可以是一個字符串或者對象類型,字符串作為一個遠程 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 清除表單數據。
reset none 重置表單數據。該方法自版本 1.3.2 起可用。
validate none 進行表單字段驗證,當全部字段都有效時返回 true 。該方法和 validatebox 插件一起使用。
enableValidation none 啟用驗證。該方法自版本 1.3.4 起可用。
disableValidation none 禁用驗證。該方法自版本 1.3.4 起可用。

jQuery EasyUI 插件 jQuery EasyUI 插件
以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號