Latest web development tutorials
×

jQuery EasyUI cours

jQuery EasyUI cours jQuery EasyUI Brève introduction

jEasyUI application

jEasyUI Création d'une application CRUD jEasyUI Création d'une grille de données CRUD jEasyUI formulaire de demande CRUD jEasyUI Créer un lecteur RSS

jEasyUI Drag and Drop

jEasyUI drag and drop de base jEasyUI Créer goutte panier jEasyUI Créer un programme scolaire

jEasyUI Menus et boutons

jEasyUI Création d'un menu simple jEasyUI Bouton Créer un lien jEasyUI Créer un bouton de menu jEasyUI Bouton Créer scission

jEasyUI disposition

jEasyUI Créer une mise en page de la frontière jEasyUI Créez des dispositions complexes jEasyUI Créer panneau rabattable jEasyUI Créer onglet jEasyUI ajouter dynamiquement des onglets jEasyUI Ajouter onglet Exécution automatique jEasyUI Créer XP Style sur le panneau latéral gauche

jEasyUI Data Grid

jEasyUI Converti en HTML grille de données de table jEasyUI Obtenir ligne de données sélectionnée jEasyUI Ajouter enquête jEasyUI Ajouter la barre d'outils jEasyUI Créer des barres d'outils complexes jEasyUI Définition des colonnes de gel jEasyUI Modifier la colonne dynamique jEasyUI Format des colonnes jEasyUI Définir le genre jEasyUI Commande personnalisée jEasyUI Créer une combinaison de colonnes jEasyUI Ajouter case jEasyUI personnalisé Paging jEasyUI Activer l'édition en ligne jEasyUI Editor Extended jEasyUI fonctionnement de la colonne jEasyUI cellule fusionnée jEasyUI Créer une vue personnalisée jEasyUI Créer résumé footer jEasyUI Conditions ligne du jeu de couleur de fond jEasyUI Créer une grille de propriété jEasyUI lignes étendues Voir les Détails jEasyUI Créer les subdivisions jEasyUI Afficher les données massives jEasyUI Ajouter un composant de la page

jEasyUI fenêtre

jEasyUI Création d'une simple fenêtre jEasyUI Fenêtre sur mesure Toolbars jEasyUI Fenêtre et mise en page jEasyUI dialogue Créer jEasyUI boîte de dialogue Personnaliser

jEasyUI Tree Menu

jEasyUI Utiliser les balises pour créer le menu de l'arbre jEasyUI Créer menu arborescent asynchrone jEasyUI Ajout d'un menu d'arbre de noeud jEasyUI Créer un menu d'arbre avec des cases à cocher jEasyUI Glissez et déposez le contrôle de menu d'arbre jEasyUI Charger l'arbre de menu noeuds parent / enfant jEasyUI La création d'une arborescence basé sur une grille jEasyUI Créer un maillage d'arbre complexe jEasyUI grille d'arbre chargé dynamiquement jEasyUI Ajouter un onglet arbre Grille jEasyUI Lazy loading arbre nœud de grille

jEasyUI forme

jEasyUI Soumettre le formulaire pour créer un asynchrone jEasyUI Authentification Forms jEasyUI Créer une boîte arborescence déroulante jEasyUI Format liste déroulante jEasyUI Filtre grille de données déroulants

jEasyUI Manuel de référence

jQuery EasyUI Widget jQuery EasyUI propagation

forme jQuery EasyUI plugin - Formulaire

jQuery EasyUI plug-in jQuery EasyUI plug - in

Par $ .fn.form.defaults remplacent les valeurs par défaut par défaut.

Formulaire (formulaire) offre plusieurs façons d'effectuer une action avec des champs de formulaire, tels que ajax soumettre, charge, supprimer, et ainsi de suite. Lors de la soumission d'un formulaire, appelez la méthode «valider» pour vérifier le formulaire est valide.

usage

Créer un formulaire HTML simple. Construire un formulaire et donner id, action, méthode des affectations.

<Form id = méthode "ff" = "post">
    <Div>
		<Label for = "nom"> Nom: </ label>
		<Class = Type d'entrée "easyui-validatebox" = "text" name = "nom" data-options = "requis: true" />
    </ Div>
    <Div>
		<Label for = "email"> Email: </ label>
		<input class = "easyui-validatebox" type = "text" name = "email" data-options = "VALIDTYPE: 'email'" />
    </ Div>
    ...
</ Form>

Laissez la forme (formulaire) se forme ajax soumission (formulaire)

$ ( '# Ff'). Formulaire ({
    url: ...,
    onSubmit: function () {
		// Faire un certain contrôle
		// Retourne false pour empêcher soumettre;
    },
    succès: function (data) {
		alerte (données)
    }
});
// Soumettre le formulaire
. $ ( '# Ff') soumettre ();

Faites une action de soumission

// Appel 'submit' méthode de la forme plug-in pour soumettre le formulaire
$ ( '# Ff'). Formulaire ( 'submit', {
    url: ...,
    onSubmit: function () {
		// Faire un certain contrôle
		// Retourne false pour empêcher soumettre;
    },
    succès: function (data) {
		alerte (données)
    }
});

En soumettant des paramètres supplémentaires

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

Soumettre traitement Réponse

Soumettre un formulaire ajax (formulaire) est très simple. Lors de la soumission d'un utilisateur complété peut obtenir des données de réponse. A noter que les données de réponse sont des données brutes provenant du serveur. Les données analytiques pour l'action de réponse demandant les données correctes.

Par exemple, supposons que la réponse est le format de données JSON, une donnée de réponse typiques sont les suivantes:

{
    "Success": true,
    "Message": "Message envoyé avec succès."
}

Maintenant poignées JSON string fonction de rappel 'succès'.

$ ( '# Ff'). Formulaire ( 'submit', {
    succès: function (data) {
		var data = eval ( '(' + données + ')'); // modifier la chaîne JSON javascript objet
		if (data.success) {
			alert (data.message)
		}
    }
});

propriété

名称 类型 描述 默认值
url string 要提交的表单动作 URL。 null

événement

名称 参数 描述
onSubmit param 提交前触发,返回 false 来阻止提交动作。
success data 当表单提交成功时触发。
onBeforeLoad param 发出请求加载数据之前触发。返回 false 就取消这个动作。
onLoadSuccess data 当表单数据加载时触发。
onLoadError none 加载表单数据时发生某些错误的时候触发。

manière

名称 参数 描述
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:'[email protected]',
	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 plug-in jQuery EasyUI plug - in