JQuery EasyUI的一些常用组件


Posted in jQuery onJuly 12, 2017

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点。

注:本次介绍的JQuery EasyUI版本为1.5版。

一.表单

form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。

用法:

使用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>

 使用jquery实现表单的异步提交:

$('#ff').form({  
  url:...,  
  onSubmit: function(){
    //提交表单时执行的操作
  },  
  success:function(data){  
    //提交成功后返回的结果
  }  
});  
// 提交表单  
$('#ff').submit();

 通过以上操作就可以使用form表单将数据提交到后台。

二.数据表格(数据表格)

DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

用法:

html标签:

<table class="easyui-datagrid" style="width:400px;height:250px" 
    data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"> 
  <thead> 
    <tr> 
      <th data-options="field:'code',width:100">编码</th> 
      <th data-options="field:'name',width:100">名称</th> 
      <th data-options="field:'price',width:100,align:'right'">价格</th> 
    </tr> 
  </thead> 
</table>

 用jquery接受数据:

$('#dg').datagrid({  
  url:'datagrid_data.json',   
});

 就可以将后台数据以表格的方式展现到前台。

三.可编辑数据表格

首先需要加载edatagrid扩展,加载完成后才能使用。

在HTML标签里面创建数据表格:

<table id="tt" style="width:600px;height:200px" 
    title="Editable DataGrid" 
    singleSelect="true"> 
  <thead> 
    <tr> 
      <th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th> 
      <th field="productid" width="100" editor="text">Product ID</th> 
      <th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th> 
      <th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th> 
      <th field="attr1" width="150" editor="text">Attribute</th> 
    </tr> 
  </thead> 
</table>

 jquery操作:

$('#tt').edatagrid({  
  url: 'datagrid_data.json',  
  saveUrl: ...,  
  updateUrl: ...,  
  destroyUrl: ...  
});

 就可以通过双击修改表格数据。

常用方法:

$('#tt').edatagrid("saveRow");//保存编辑行并发送到服务器
$('#tt').edatagrid("destroyRow");//销毁当前选择的行
$('#tt').edatagrid("addRow");//添加一个新的空行

以上所述是小编给大家介绍的JQuery EasyUI的一些常用组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
使用jQuery实现动态添加小广告
Jul 11 #jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 #jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 #jQuery
You might like
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
php中使用websocket详解
2016/09/23 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
Python实现建立SSH连接的方法
2015/06/03 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
c语言常见笔试题总结
2016/09/05 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
年终奖发放方案
2014/06/02 职场文书
2014年国庆标语
2014/06/30 职场文书
2014年残联工作总结
2014/11/21 职场文书
幼儿教师辞职信
2015/02/27 职场文书
暂住证明怎么写
2015/06/19 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
分析Python list操作为什么会错误
2021/11/17 Python
PHP遍历数组的6种方式总结
2021/11/17 PHP