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 键盘事件的使用方法详解
Sep 13 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现推拉门效果
Oct 19 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 远程图片保存到本地的函数类
2008/12/08 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
动态样式类封装JS代码
2009/09/02 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
师范类求职信
2014/06/21 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle
Python制作表白爱心合集
2022/01/22 Python
mysql序号rownum行号实现方式
2022/12/24 MySQL