EASYUI 表单(FORM)用法

发布：2015/8/9 19:59:23作者：管理员来源：本站浏览次数：1525

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

　Jquery 获取对象的几种方式和jquery的each遍历

MVC 文本编辑器在提交的时候出现检测到有潜在危险的Request.Form 值　

npx安装及用法 C#winform软件实现一次编译，跨平台windows和linux、mac兼容运行，兼容Visual Studio原生界面Form表单开发 ReactRouterDom-v5&v6用法与异同表单令牌-ThinkPHP V5 MessageBox.Show用法 Python 爬虫利器五之 Selenium 的用法 'OFFSET' 附近有语法错误。在 FETCH 语句中选项 NEXT 的用法无效。 C# Dapper基本用法防止/禁止表单重复提交解决办法 Func与Action用法委托

柏港建站平台

柏港 EasyUI

柏港为您推荐了一些相关资讯