EASYUI 表单(FORM)用法

一时失言乱红尘 2021-09-25 22:10 489阅读 0赞

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的用法差不多。这些参数的用法**：**

<table style="margin:0px 0px 24px; padding:0px; line-height:1.2857; font-size:14px; border-width:1px 0px 0px 1px; border-style:solid; border-color:initial; height:171px; font-family:inherit; width:473px; vertical-align:baseline; outline:invert none 0px; border-spacing:0px"> 
 <tbody style="border:0px; font-family:inherit; vertical-align:baseline; outline:invert none 0px; padding:0px; margin:0px"> 
 <tr style="border:0px; font-family:inherit; vertical-align:baseline; outline:invert none 0px; padding:0px; margin:0px"> 
 <th style="margin:0px; padding:8px; font-size:14px; font-family:inherit; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; text-transform:uppercase; outline:invert none 0px"> 方法名</th> 
 <th style="margin:0px; padding:8px; font-size:14px; font-family:inherit; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; text-transform:uppercase; outline:invert none 0px"> 参数</th> 
 <th style="margin:0px; padding:8px; font-size:14px; font-family:inherit; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; text-transform:uppercase; outline:invert none 0px"> 描述</th> 
 </tr> 
 <tr style="border:0px; font-family:inherit; vertical-align:baseline; outline:invert none 0px; padding:0px; margin:0px"> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> submit</td> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> options</td> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> 执行提交的操作，选项的参数是一个对象，这个对象包括以下的属性： url：设置提交的地址； onSubmit：提交之前的回调函数 submit：提交成功后的回调函数</td> 
 </tr> 
 <tr style="border:0px; font-family:inherit; vertical-align:baseline; outline:invert none 0px; padding:0px; margin:0px"> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> load</td> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> data</td> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> 加载记录来填充表单 选项参数可以是一个字符串或者是一个对象，字符串意味着是一个远程地址，否则就是一个本地的数据记录</td> 
 </tr> 
 <tr style="border:0px; font-family:inherit; vertical-align:baseline; outline:invert none 0px; padding:0px; margin:0px"> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> clear</td> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> none</td> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> 清空表单数据</td> 
 </tr> 
 <tr style="border:0px; font-family:inherit; vertical-align:baseline; outline:invert none 0px; padding:0px; margin:0px"> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> validate</td> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> none</td> 
 <td style="margin:0px; padding:8px; font-size:14px; font-family:inherit; line-height:21px; border-width:0px 1px 1px 0px; border-style:solid; border-color:initial; vertical-align:baseline; outline:invert none 0px"> 表单字段的验证，如果返回true，则说明所有的字段都是合法的。这个方法可以和validatebox插件联合使用</td> 
 </tr> 
 </tbody> 
</table>

只需在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

3，调试对象。

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