JQuery EasyUI(31)

最新推荐文章于 2022-11-19 17:11:20 发布
最新推荐文章于 2022-11-19 17:11:20 发布
阅读量124 收藏
点赞数
分类专栏： WEB - jQuery EasyUI
原文链接：https://study.163.com/course/courseMain.htm?courseId=943002
版权

                     第三十一章：Form（表单）组件

学习要点：

  1. 加载方式
  2. 属性列表
  3. 事件列表
  4. 方法列表

 一、加载方式：

表单组件只能在JS区域设置，首先定义一张表单。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
  </head>
  <body>
    <from id="box" action="123.html" method="post">
      <div>
        <label for="name">Name:</label>
        <input type="text" name="name" class="easyui-validatebox" data-options="required:true"/>
      </div>
   
      <div>
        <label for="email">Email:</label>
        <input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/>
      </div>

      <input type="submit">
    </from>
   </body>
</html>


2.JS调用加载

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
        <input type="submit">
      </from>
  </body>
</html>
<?php
   echo $_POST['name'];
   echo '|';
   echo $_POST['email'];
?>

$(function(){

   $.('#box').form({
     url:'content.php',
     onSubmit:function(param){    
   
    },
    success:function(data){
      alert(data);      
   },
  });
});

 3.提交额外数据

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
         <input type="submit">
      </from> 
  </body>
</html>
<?php
   echo $_POST['name'];
   echo '|';
   echo $_POST['email'];
   echo '|';
   echo $_POST['code'];
?>

$(function(){

   $.('#box').form({
     url:'content.php',
     onSubmit:function(param){
        param.code = '320902';
    },
    success:function(data){
      alert(data);      
   },
  });
});

 4.解析JSON数据

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
        <input type="submit">
      </from>
  </body>
</html>
<?php
/*
   echo $_POST['name'];
   echo '|';
   echo $_POST['email'];
   echo '|';
   echo $_POST['code'];
*/
?>
{
  "name":"ycku",
  "email":"ycku@gmail.com",
}
$(function(){

   $.('#box').form({
     url:'content.php',
     onSubmit:function(param){
        param.code = '320902';
    },
    success:function(data){
      //alert(data);
      var data = eval('('+data+')');
      if(data.email){
        alert(data.email);
     }
   },
  });
});

5.自动提交

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
        <input type="submit">
      </from>
  </body>
</html>
<?php
/*
   echo $_POST['name'];
   echo '|';
   echo $_POST['email'];
   echo '|';
   echo $_POST['code'];
*/
?>
{
  "name":"ycku",
  "email":"ycku@gmail.com",
}
$(function(){

   $.('#box').form('submit',{
     url:'content.php',
     onSubmit:function(param){
        param.code = '320902';
    },
    success:function(data){
      //alert(data);
      var data = eval('('+data+')');
      if(data.email){
        alert(data.email);
     }
   },
  });
});

二、属性列表：

Form属性
属性名值说明
urlstring提交表单动作的URL地址。默认值null。

 

三、事件列表：

Form事件
方法名传参说明
onSubmitparam在提交之前触发，返回false可以终止提交。
successdata在表单提交成功以后触发。
onBeforeLoadparam在请求加载数据之前触发，返回false可以停止该动作。
onLoadSuccessdata在表单数据加载完成之后触发。
onLoadErrordata在表单数据加载出现错误的时候触发。
<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
        <input type="submit">
      </from>
  </body>
</html>
{
  "name":"樱桃小丸子",
  "email":"xiaowanzi@163.com",
}
$(function(){

  /*
   $('#box').form('load',{
    name:'蜡笔小新',
    email:'xiaoxin@163.com',
  });
  */

  $('#box').form('load','load.php');

  $('#box').form({
      onBeforeLoad:function(){
         alert('load之前');
     }
      onLoadSuccess:function(data){
         alert('load成功' + data.email);
     }
      onLoadError:function(){
         alert('错误');
     }
  });

});

 

四、方法列表：

Form方法
方法名参数说明
submitoptions执行提交操作，该选项参数是一个对象。
loaddata读取记录填充到表单中。
clearnone清除表单数据。
resetnone重置表单数据。
 validatenone 做表单字段验证，当所有字段都有效的时候返回true，该方法使用validatebox（验证框）插件。·
enableValidationnone启用验证。
unableValidationnone禁用验证。
<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
        <input type="submit">
      </from>
  </body>
</html>
<?php
   echo $_POST['name'];
   echo '|';
   echo $_POST['email'];
   echo '|';
   echo $_POST['code'];
?>
$(function(){

   $.('#box').form({
     url:'content.php',
     onSubmit:function(param){
        param.code = '320902';
        return $(this).form('validate');
    },
    success:function(data){
      alert(data);      
   },
  });
});

PS：我们可以使用$.fn.slider.defaults重写默认值对象。

 

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/103063492

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载

Roger_CoderLife
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery EasyUI快速入门01
jh9758的博客
05-04 198
一、jQuery EasyUI框架概述 1、什么是jQuery EasyUI? JQuery EasyUI就是一套基础JQuery的富客户端的UI框架(简化ajax，jquery，css样式，布局)。像这些将常用的控件封装成一个UI库的框架统称富客户端框架 2、 jQuery Easy的作用 既然EasyUI是一个UI框架，所以它的功能就是用于处理页面的展示效果的。通常用于完成后台管理系统的页面排版。 3、EasyUI的目录说明 ① 下载路径 ...
jqueryEasyUI
07-16
jqueryEasyUI 下载，及api下载 jqueryEasyUI 下载，及api下载
4，EASYUI表单
caokangnsd的博客
09-16 182
1，异步提交插件  &lt;div style="padding:3px 2px;border-bottom:1px solid #ccc"&gt;Ajax Form&lt;/div&gt; &lt;form id="ff" action="form1_proc.php" method="post"&gt; &lt;table&gt; &l
easyui form enableValidation disableValidation 使用方法
热门推荐
laokaizzz的专栏
04-11 1万+
 使用如下：   $("#frmLogin").form("enableValidation");
jquery easyui datagrid使用参考
iteye_5347的博客
02-19 292
http://www.phptogether.com/juidoc/datagrid.html   数据表格 继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。 依赖关系 控制面板 缩放 链接按钮 分页 使用方法   &lt;table id="tt"&gt;&lt;/table&gt;     ...
JQuery EasyUI
m0_61916351的博客
11-19 579
JQuery EasyUI简单应用
jQuery EasyUI的api
05-09
jquery EasyUI的API，方便使用easyui查看。。。。。。
Jquery EasyUI 日历Demo
10-12
使用Jquery EasyUI制作的日历，单击input控件弹出日历选择日期，代码很简单，仅供参考
jquery easyui demo
10-12
jquery easyui demo，里面有的demo 易懂易学 ，上手快
jQuery EasyUI 1.4.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示
04-08
jQuery EasyUI 1.4.5版本更新内容： Bug（修复） datagrid：修复在调用updateRow方法之后使用getChanges方法无法返回被更新的行的BUG； treegrid：修复在追加或插入新行的时候触发onLoadSuccess事件的BUG； tree...
C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码
04-25
C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码 微分方程 含有导数或微分的方程称为微分方程，未知函数为一元函数的微分方程称为常微分方程。 微分方程的阶数 微分方程中导数或微分的最高阶数称为微分方程的阶数。 微分方程的解 使得微分方程成立的函数称为微分方程的解。 微分方程的特解 微分方程的不含任意常数的解称为微分方程的特解。 微分方程的通解 所含相互独立的任意常数的个数与微分方程的阶数相等的微分方程的解称为微分方程的通解。
桌面聊天室
04-25
该毕业设计采用了c/s架构，通过javase中的知识编写完成，系统功能包括：用户注册，用户登录，聊天功能。 对于刚学完java基础的同学来说可以通过该毕业设计加深对所学知识的理解。该系统使用socket进行数据的发送，用户注册登录之后，可以进行多人聊天，功能类似qq群聊。
【前端素材】大数据-交通大屏.zip
04-25
大数据技术指的是用于处理和分析大规模数据集的技术和工具。以下是一些常见的大数据技术和工具： Hadoop：Apache Hadoop是一个用于分布式存储和处理大规模数据的开源框架。它包括Hadoop Distributed File System（HDFS）用于数据存储和MapReduce用于数据处理。 Spark：Apache Spark是一个快速、通用的集群计算系统，提供了比MapReduce更快的数据处理能力。它支持内存计算和更多复杂的数据处理流程。 NoSQL数据库：NoSQL数据库（如MongoDB、Cassandra等）则更适用于处理这类数据。 数据仓库：数据仓库是一个用于集成和分析大规模数据的存储系统，一些知名的数据仓库包括Snowflake、Amazon Redshift等。 数据湖：数据湖是一个存储结构化和非结构化数据的存储池，用于支持数据分析和机器学习应用。 机器学习：大数据技术也广泛应用于机器学习领域，支持大规模数据的模型训练和预测分析。 流式处理：针对实时数据处理需求，流式处理技术（如Apache Kafka、Apache Flink）可以实时。
inspect：windows系统下的控件识别工具
04-25
windows系统下的控件识别工具，可用于桌面应用的UI自动化测试
038ssm-jsp-mysql高校毕业生就业满意度调查统计系统.zip（可运行源码+数据库文件+文档）
04-25
高校毕业生就业满意度调查统计系统是以实际运用为开发背景，运用软件工程开发方法，采用jsp技术构建的一个管理系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统总体结构设计、系统数据结构设计、系统功能设计和系统安全设计等；详细设计主要包括模块实现的关键代码，系统数据库访问和主要功能模块的具体实现等。最后对系统进行功能测试，并对测试结果进行分析总结，及时改进系统中存在的不足，为以后的系统维护提供了方便，也为今后开发类似系统提供了借鉴和帮助。 本高校毕业生就业满意度调查统计系统采用的数据库是Mysql，使用JSP技术开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。 关键词：高校毕业生就业满意度调查统计系统，JSP技术，Mysql数据库
小程序-58-童心党史小程序-源码.zip
04-25
提供的源码资源涵盖了小程序应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
ubuntu网络环境配置
04-25
ubuntu网络环境配置
php开源商城系统，基于swoole、easyswoole框架开发.zip
04-25
php开源商城系统，基于swoole、easyswoole框架开发.zip
node-v12.6.0-x64.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
jquery easyui
09-22
jQuery EasyUI是一个基于jQuery的框架，它集成了各种用户界面插件，提供了构建现代化、具有交互性的JavaScript应用程序所需的功能。使用EasyUI可以极大地减少编写JavaScript代码的工作量，一般情况下只需要使用一些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值