EASYUI 表单(FORM)用法

资料来源：网络整理时间：2023/2/14 0:17:19 共计：3621 浏览

1，ajax提交只是简单的异步和文本提交。提交的数据需要序列化或程序指定。同时，数据也需要自己验证。如果使用easyui的验证组件validatebox，则需要在提交前调用，如下：

if ($("#formname").form("validate")){

$.ajax(......)

}

2，easyui的form提交也可以实现无刷新提交，而且可以提交file。但是easyui的form提交是通过ifram实现的，定位在屏幕的 -1000,-1000位置，变相不显示，提交的数据也不需要程序指定和序列化。通过此方式传递的数据是不能被firebug捕捉到的。form提交自动调用validaebox组件验证提交。

3，ajax可以指定dateType：‘json’，但form提交需要对返回的数据进行JSON转换，调用$.parseJSON().

1,提交与验证:

jQuery EasyUI里表单(Form)的用法和jQuery里AJAX的用法差不多。这些参数的用法：

参数名	类型	描述	默认值
url	字符串	表单提交的地址	null

事件名	参数	描述
onSubmit	none	提交之前触发的事件，如果返回false可以防止提交
success	data	表单提交成功的时候触发

方法名	参数	描述
submit	options	执行提交的操作，选项的参数是一个对象，这个对象包括以下的属性： url：设置提交的地址； onSubmit：提交之前的回调函数 submit：提交成功后的回调函数
load	data	加载记录来填充表单选项参数可以是一个字符串或者是一个对象，字符串意味着是一个远程地址，否则就是一个本地的数据记录
clear	none	清空表单数据
validate	none	表单字段的验证，如果返回true，则说明所有的字段都是合法的。这个方法可以和validatebox插件联合使用

只需在OnSubmit事件中使用Return$("#form1").form('validate');即可。该方法会自动对我们指定的required=true的验证字段进行验证，不通过时会返回false:

$('#fm_line').form('submit', {
url:'line!saveBgLine.do',
onSubmit: function(){
if($("#fm_line").form("validate"))
return true
else
return false;
},
//注意ajax的url的后台action方法必须有返回值return "json"，而不是return null,否则下面的回调函数不起作用，sucess方法失效
success:function(data){
//此处data={"Success":true}实际为字符串，而不是json对象，需要用如下代码处理
var obj = jQuery.parseJSON(data);
if(obj.Success){
$.messager.alert('消息','保存成功！');
$('#tab_line').datagrid('reload');
$("#fm_line").form("clear");
top.location.href = "main/main.html"; //转主页面
}else{
$.messager.alert('消息','保存失败！');
}
}
});

2,使用easyUi

添加 jquery.js,easyui.js

添加本地支持easyui-lang-zh_CN.js

样式表easyui.css和图标icon.css

3，调试对象。

console.info($('#obj')); 不要使用alert

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：MVC 文本编辑器在提交的时候出现检测到有潜在危险的Request.Form 值 | ·下一条：Jquery 获取对象的几种方式和jquery的each遍历