EASYUI 表单(FORM)用法

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事件名参数描述onSubmitnone提交之前触发的事件，如果返回false可以防止提交successdata表单提交成功的时候触发方法名参数描述submitoptions执行提交的操作，选项的参数是一个对象，这个对象包括以下的属性：
url：设置提交的地址；
onSubmit：提交之前的回调函数
submit：提交成功后的回调函数loaddata加载记录来填充表单
选项参数可以是一个字符串或者是一个对象，字符串意味着是一个远程地址，否则就是一个本地的数据记录clearnone清空表单数据validatenone表单字段的验证，如果返回true，则说明所有的字段都是合法的。这个方法可以和validatebox插件联合使用

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

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

2,使用easyUi

    添加 jquery.js,easyui.js

    添加本地支持easyui-lang-zh_CN.js（支持中文）

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

<link rel="stylesheet" type="text/css"href="<%=basePath%>resource/jquery-easyui-1.5/themes/default/easyui.css"><link rel="stylesheet" type="text/css"href="<%=basePath%>resource/jquery-easyui-1.5/themes/icon.css"><script type="text/javascript"src="<%=basePath%>resource/jquery-easyui-1.5/jquery.min.js"></script><script type="text/javascript"src="<%=basePath%>resource/jquery-easyui-1.5/jquery.easyui.min.js"></script><script type="text/javascript"src="<%=basePath%>resource/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>

一定要注意 jquery.min.js 与easy.js的前后顺序 ，笔者曾经在这里被坑过（找错找了好久）

3，调试对象。

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

4 form 表单有自动填充数据的方法 load

 "读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录"

function(){ //点开提示框同时加载此方法 将查询出的数据赋值给form表单$.post('user/findA.do', {"userId" : userId}, function(o) {$('#fm').form('load',o);

t原文链接