您的位置：首页 > Web前端 > JQuery

第二百二十一节，jQuery EasyUI，Form(表单)组件

2017-04-06 20:42 218 查看
jQuery EasyUI，Form(表单)组件

学习要点：

　　1.加载方式

　　2.属性列表

　　3.事件列表

　　4.方法列表

本节课重点了解 EasyUI 中 Form(表单)组件的使用方法，这个组件不依赖于任何组件

一．加载方式

表单组件只能在 JS 区域设置，首先定义一张表单。

<form id="box" method="post">
<div>
<label>用户名:</label>
<input type="text" name="name"/>
</div>
<div>
<label>邮　箱:</label>
<input type="text" name="email"/>
</div>
<input type="submit">
</form>


JS 加载调用

form()将form表单元素执行表单组件方法

$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
}
});
});


解析 JSON 数据

远程返回代码

//JSON类型
{
"name" : "bnbbs",
"email" : "bnbbs@163.com"
}


js代码

//读取JSON里面的email值
success: function (data) {
var data = eval('(' + data + ')');  //将字符串转换成JSON类型
if (data.email) {
alert(data.email);      //读取JSON里面的email值
}
}


自动提交，只有在form()方法里，第一个参数写上'submit'就会自动提交

$(function () {
$('#box').form('submit',{
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
}
});
});


二．属性列表





url string 提交表单动作的 URL 地址。默认值 null。

$(function () {
$('#box').form('submit',{
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
}
});
});


三．事件列表





onSubmit param 在提交之前触发，返回 false 可以终止提交。

$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
}
});
});


success data 在表单提交成功以后触发。

$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
}
});
});


注意：以下3个事件要结合load方法使用，也就是一般要在获取数据填充到表单时使用

onBeforeLoad param在请求加载数据之前触发。返回 false 可以停止该动作。【[b]不推荐】[/b]

$(function () {
$('#box').form({
onBeforeLoad: function (param) {
alert('在请求之前');
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
onLoadSuccess: function (data) {
alert('在请求完成之后');
alert(data);
},
onLoadError: function (param) {
alert('在请求出错后');
}
});
$('#box').form('load','uer.php');   //获取数据
});


onLoadSuccess data 在表单数据加载完成后触发。[b]【[b]不推荐】[/b][/b]

$(function () {
$('#box').form({
onBeforeLoad: function (param) {
alert('在请求之前');
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
onLoadSuccess: function (data) {
alert('在请求完成之后');
alert(data);
},
onLoadError: function (param) {
alert('在请求出错后');
}
});
$('#box').form('load','uer.php');   //获取数据
});


onLoadError none 在表单数据加载出现错误的时候触发。

$(function () {
$('#box').form({
onBeforeLoad: function (param) {
alert('在请求之前');
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
onLoadSuccess: function (data) {
alert('在请求完成之后');
alert(data);
},
onLoadError: function (param) {
alert('在请求出错后');
}
});
$('#box').form('load','uer.php');   //获取数据
});


四．方法列表





submit options 执行自动提交操作，该选项参数是一个对象。

$(function () {
$('#box').form('submit',{
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
},
});
});


load data 读取记录填充到表单中。

$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
},
});
$('#box').form('load', {    //将对象里的数据填充到对应的输入框
name: 'bnbbs',          //将值填充到name为name的输入框
email: 'bnbbs@163.com', //将值填充到name为email的输入框
});
//当然也可以将远程JSON数据填充到输入框如,xxx.php里是JSON数据
// $('#box').form('load','xxx.php');
});


clear none 清除表单数据。

$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
},
});
$('#box').form('clear');
});


reset none 重置表单数据。

$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
},
});
$('#box').form('reset');
});


validate none做表单字段验证，当所有字段都有效的时候 返 回 true 。 该 方 法 使 用validatebox(验证框)插件。【重点】

$(function () {
$('input[name=name]').validatebox({  //验证表单
required: true,  //不能为空
});
$('#box').form({
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
return $(this).form('validate');   //当所有字段都有效的时候 返 回 true ，返回false不能提交表单
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
}
});
});


enableValidation none 启用验证。

$(function () {
$('input[name=name]').validatebox({  //验证表单
required: true,  //不能为空
});
$('#box').form({
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
return $(this).form('validate');   //当所有字段都有效的时候 返 回 true ，返回false不能提交表单
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
}
});
$('#box').form('enableValidation');
});


disableValidation none 禁用验证。

$(function () {
$('input[name=name]').validatebox({  //验证表单
required: true,  //不能为空
});
$('#box').form({
url: 'user.php',
onSubmit: function (param) {    //在提交前触发
return $(this).form('validate');   //当所有字段都有效的时候 返 回 true ，返回false不能提交表单
param.code = '320902';      //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) {      //发送后触发，
alert(data);                //接收响应内容
}
});
$('#box').form('disableValidation');
});


使用$.fn.form.defaults 重写默认值对象。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航