网博开发者社区

 找回密码
 立即注册
搜索
查看: 57|回复: 2

jQuery EasyUI 入门(17)

[复制链接]

39

主题

46

帖子

174

积分

老师

积分
174
发表于 2017-9-22 12:23:05 | 显示全部楼层 |阅读模式
Form(表单)
使用$.fn.form.defaults重写默认值对象
form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
用法
创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。


  • <form id="ff" method="post">
  •     <div>
  •         <label for="name">Name:</label>
  •         <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
  •     </div>
  •     <div>
  •         <label for="email">Email:</label>
  •         <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
  •     </div>
  •     ...
  • </form>

        <form id="ff" method="post">                <div>                        <label for="name">Name:</label>                        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />                </div>                <div>                        <label for="email">Email:</label>                        <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />                </div>                ...        </form>
使普通表单成为ajax提交方式的表单。


  • $('#ff').form({
  •     url:...,
  •     onSubmit: function(){
  •         // do some check
  •         // return false to prevent submit;
  •     },
  •     success:function(data){
  •         alert(data)
  •     }
  • });
  • // submit the form
  • $('#ff').submit();

        $('#ff').form({                url:...,                onSubmit: function(){                        // do some check                        // return false to prevent submit;                },                success:function(data){                        alert(data)                }        });        // submit the form        $('#ff').submit();
做一个提交操作。


  • // call 'submit' method of form plugin to submit the form
  • $('#ff').form('submit', {
  •     url:...,
  •     onSubmit: function(){
  •         // do some check
  •         // return false to prevent submit;
  •     },
  •     success:function(data){
  •         alert(data)
  •     }
  • });

        // call 'submit' method of form plugin to submit the form        $('#ff').form('submit', {                url:...,                onSubmit: function(){                        // do some check                        // return false to prevent submit;                },                success:function(data){                        alert(data)                }        });
提交额外的参数。


  • $('#ff').form('submit', {
  •     url:...,
  •     onSubmit: function(param){
  •         param.p1 = 'value1';
  •         param.p2 = 'value2';
  •     }
  • });

        $('#ff').form('submit', {                url:...,                onSubmit: function(param){                        param.p1 = 'value1';                        param.p2 = 'value2';                }        });
处理提交响应
提交一个ajax表单是非常简单的。用户可以在提交完成后获取响应数据。注意,响应的数据是来自服务器的原始数据。A parse action to the response data is required to get the correct data.
例如,响应数据假设为JSON,一个典型的响应数据格式如下:


  • {
  •     "success": true,
  •     "message": "Message sent successfully."
  • }

{        "success": true,        "message": "Message sent successfully."}
现在在'success'回调函数中处理JSON字符串。


  • $('#ff').form('submit', {
  •     success: function(data){
  •         var data = eval('(' + data + ')');  // change the JSON string to javascript object
  •         if (data.success){
  •             alert(data.message)
  •         }
  •     }
  • });

$('#ff').form('submit', {        success: function(data){                var data = eval('(' + data + ')');  // change the JSON string to javascript object                if (data.success){                        alert(data.message)                }        }});
属性
属性名属性值类型描述默认值
urlstring提交表单动作的URL地址null

事件
事件名参数描述
onSubmitparam在提交之前触发,返回false可以终止提交。
successdata在表单提交成功以后触发。
onBeforeLoadparam在请求加载数据之前触发。返回false可以停止该动作。
onLoadSuccessdata在表单数据加载完成后触发。
onLoadErrornone在表单数据加载出现错误的时候触发。

方法
方法名参数描述
submitoptions执行提交操作,该选项的参数是一个对象,它包含以下属性:
url:请求的URL地址。
onSubmit: 提交之前的回调函数。
success: 提交成功后的回调函数。
下面的例子演示了如何提交一个有效并且避免重复提交的表单。
$.messager.progress();        // 显示进度条$('#ff').form('submit', {        url: ...,        onSubmit: function(){                var isValid = $(this).form('validate');                if (!isValid){                        $.messager.progress('close');        // 如果表单是无效的则隐藏进度条                }                return isValid;        // 返回false终止表单提交        },        success: function(){                $.messager.progress('close');        // 如果提交成功则隐藏进度条        }});
loaddata读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型,如果是字符串则作为远程URL,否则作为本地记录。 代码示例:
$('#ff').form('load','get_data.php');        // 读取表单的URL$('#ff').form('load',{        name:'name2',        email:'mymail@gmail.com',        subject:'subject2',        message:'message2',        language:5});
clearnone清除表单数据。
resetnone重置表单数据。(该方法自1.3.2版开始可用)
validatenone做表单字段验证,当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件。
enableValidationnone启用验证。(该方法自1.3.4版开始可用)
disableValidationnone禁用验证。(该方法自1.3.4版开始可用)


回复

使用道具 举报

5

主题

18

帖子

84

积分

老师

积分
84
发表于 2017-10-11 15:07:59 | 显示全部楼层
回复

使用道具 举报

5

主题

18

帖子

84

积分

老师

积分
84
发表于 2017-10-11 15:08:09 | 显示全部楼层
赞一个
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|网博开发者社区 ( 苏ICP备05021715号-1 )

GMT+8, 2017-10-20 19:20 , Processed in 0.076376 second(s), 25 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表