EASYUI 表单(FORM)用法

http://blog.sina.com.cn/s/blog_3ecf39a70102ux8x.html

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:

  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

时间: 2024-08-25 13:56:36

EASYUI 表单(FORM)用法的相关文章

表单 - Form - EasyUI提供的表单异步提交

方案一 被提交的表单 <form id="loginForm" method="post"> <table align="center"> <tr> <th align="right">用户名</th> <td> <input type="text" name="username"/> </td&g

3、网页制作Dreamweaver(表单form)

表单form (虚线不显示) 1.写法: <form id="form1" name="form1" method="post" action=""> </form> 1.  解释 name.id自定义,用于寻找此块内容 3.内容 (1)文本框:可以设置width,height  <label for="denglu">姓名</label>          

easyui表单插件-包括日期时控件-列表

← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器  jQuery EasyUI 插件 扩展自 $.fn.spinner.defaults.通过 $.fn.timespinner.defaults 重写默认的 defaults. 时间微调器(timespinner)是基于微调器(spinner)创建的.它与数值微调器(numberspinner)相似,但是它只显示时间值.时间微调器(t

雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务器. 在本教程中,我们将要创建一个注册表单,带有 name.address.city 字段.city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree panel),并选择一个特定的城市. 创建表单(Form) title="Register" butto

HTML表单(Form)

HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息. 举个简单的例子,一个让用户输入姓名的HTML表单(Form).示例代码如下: <form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get"> 请输入你的姓名: <input type="text" name="your

asp.net MVC中控制器获取表单form提交的数据之实体类数据

第一次写记录文章,难免有不足之处:欢迎指出. 1.新建一个mvc项目如: 2.新建一个Test.cs 注意get,set方法不能简写 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 using System; using System.Collections.Generic; using System.Linq; usi

关于表单form元素中onsubmit事件处理机制的认识

博主目前处于Js学习的初期,遇到了很多问题,比如今天的关于表单form元素中onsubmit事件问题,根据教程所述,onsubmit事件是在表单提交的时候触发的,但是我看到教程上的onsubmit事件是这么写的 :onsubmit="return validateForm();",首先validateForm()已经有返回值了,为什么在这里还要加一个return??这让我百思不得其解,直到看到一篇博文才恍然大悟,受益匪浅,以下是这篇博文的出处:http://blog.163.com/h

(三)关于kendo IU表单form各类控件的数据绑定

=====================input textarea============================= <div id="view"> <input data-bind="value: inputValue" /> <textarea data-bind="value: textareaValue"></textarea> </div> <script&g

HTML的表单form以及form内部标签

本系列原理图均由Portel DXP 2004画成. 截图: 文件下载: CTM1050.7z HTML的表单form以及form内部标签,码迷,mamicode.com