1,介绍
EasyUI Form 提供了各种方法来操作执行表单字段 如ajax提交 load方法 和 clear方法
在提交表单时 可以调用validata 方法检查表单是否有效
submin 方法将普通表单 转化为 ajax 提交方式的表单
2,属性和方法
属性方法名 | 属性值和方法参数类型 | 描述 |
url 属性 | string | 提交表单动作的URL地址 |
submit | options | 执行提交操作,该选项的参数是一个对象,它包含以下属性 url 请求的URL地址 onSubmit 提交之前的回调函数 Success 提交成功后的回调函数 |
3,事件
表单事件名 | 值类型 | 描述 |
onSubmit | param | 在提交之前触发,返回False 可以终止提交 |
success | data | 在表单提交成功以后触发 |
4,实例
$(function () {
$("#LoginAdd").dialog({
title: "注册",
collapsible: true,
width: 300,
height: 200,
modal: true,//模态对话框
buttons: [
{
text: '添加',
iconCls: 'icon-add',
handler: function () {
console.info("添加用户");
ajaxFrm();//ajax 提交表单函数
}
}
]
});
//from提交
function ajaxFrm() {
var list = $("#LoginList");
$("#form1").form("submit", {
url: "T7.aspx",
onSubmit: function () {
var uid = $("#zh").val();
var pwd = $("#mm").val();
if (uid.length == 0 || pwd.length == 0) {
$.messager.alert('警告', '请输入用户帐号密码');
return false;
}
return true;
},
success: function (data) {
//服务器端会烦字符串转为json对象
var json = $.parseJSON(data);
console.info(json);//调试代码
if (json.intChk == 0) {
list.html("");//清空
$.each(json.rows, function (i, it) {
var str = list.html() + it.intNum + "用户名" + it.uid + "--密码" + it.pwd + "</br>";
list.html(str);
});
}
}
});
<div id="LoginAdd">
<form id="form1">
<table>
<tr>
<td>用户名</td>
<td><input name="zh" id="zh" /></td>
</tr>
<tr>
<td>密码</td>
<td><input name="mm" id="mm" /></td>
</tr>
</table>
</form>
</div>
<div id="LoginList">
123456789
</div>