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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery-App输入框实现实时搜索
Nov 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
python中redis的安装和使用
2016/12/04 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
大学生旷课检讨书
2014/01/22 职场文书
小区门卫值班制度
2014/01/24 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
Python上下文管理器Content Manager
2021/06/26 Python