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的一些常用组件。

转载于:https://www.cnblogs.com/wujianrui/p/7143385.html

JQuery EasyUI的常用组件相关推荐

  1. php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法

    在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...

  2. 网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

    简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它 ...

  3. 第二百二十节,jQuery EasyUI,Slider(滑动条)组件

    jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...

  4. 第一百九十四节,jQuery EasyUI,Droppable(放置)组件

    jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...

  5. 第一百九十九节,jQuery EasyUI,Panel(面板)组件

    jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...

  6. 第二百一十七节,jQuery EasyUI,NumberSpinner(数字微调)组件

    jQuery EasyUI,NumberSpinner(数字微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 NumberSpinner ...

  7. 第二百二十三节,jQuery EasyUI,ComboBox(下拉列表框)组件

    jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 C ...

  8. 第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  9. jQuery Easyui 源码分析之combo组件

    /** * jQuery EasyUI 1.3.1 * 该源码完全由压缩码翻译而来,并非网络上放出的源码,请勿索要.*/ (function($) {function setSize(target, ...

最新文章

  1. 报道 | 本科4篇顶会论文如何做到?清华特奖干货分享:我是这样写论文、做实验、与导师相处...
  2. apply()和call()的区别
  3. Openstack贡献者须知 — OpenPGP/SSH/CLA贡献者协议
  4. TCP/IP详解--学习笔记(11)-TCP交互数据流,成块数据流
  5. 如何编写代码使jsp程序错误在输入框上面显示_252尚学堂百战程序员049天
  6. IBM X3650 WIN2003安装详细方法
  7. 二 Java开发环境搭建
  8. 最新!Vicor 270V-28V DCM5614以96%效率提供1300W功率
  9. 笔记本wifi做热点 android通过热点上网
  10. vue(ref父组件使用子组件中定义的方法)
  11. 综述 | 最新视觉-语言预训练综述
  12. out.print 嵌套html代码_代码规范之前端编写码规范
  13. 小型制造类企业IT云平台
  14. 计算机化验中红细胞的测量程序,血液常规检查检验程序.doc
  15. excel两列数据对比找不同_比Vlookup好用10倍,它才是Excel函数中的No.1
  16. RROR: Check hive‘s usability failed, please check the status of your cluster解决办法
  17. 百家企业短信网关(背景及核心代码)-1-开源项目短信接口征集
  18. No suitable resolver
  19. IxChariot测试网络设备性能
  20. 流量都去哪了? --- 详谈流量劫持是如何产生的?

热门文章

  1. 2022-2028年中国再生金属行业投资分析及前景预测报告
  2. 2022-2028年中国操作系统行业深度调研及投资前景预测报告
  3. 2022-2028年中国可降解聚乙烯农用地膜产业竞争现状及发展规模预测报告
  4. Git常见问题解决方案指北
  5. c/c++的内存四区
  6. PowerBuilder程序 ASA 数据库移植后不能连接解决
  7. 并发 IO多路复用 select 非asyncio
  8. 关于正则表达式 \1 \2之类的问题
  9. 操作系统学习笔记 第一章:操作系统概述(王道考研)
  10. 自定义 DataLoader