JQuery EasyUI的常用组件
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的常用组件相关推荐
- php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
- 网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?
简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它 ...
- 第二百二十节,jQuery EasyUI,Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
- 第一百九十四节,jQuery EasyUI,Droppable(放置)组件
jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...
- 第一百九十九节,jQuery EasyUI,Panel(面板)组件
jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...
- 第二百一十七节,jQuery EasyUI,NumberSpinner(数字微调)组件
jQuery EasyUI,NumberSpinner(数字微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 NumberSpinner ...
- 第二百二十三节,jQuery EasyUI,ComboBox(下拉列表框)组件
jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 C ...
- 第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- jQuery Easyui 源码分析之combo组件
/** * jQuery EasyUI 1.3.1 * 该源码完全由压缩码翻译而来,并非网络上放出的源码,请勿索要.*/ (function($) {function setSize(target, ...
最新文章
- 报道 | 本科4篇顶会论文如何做到?清华特奖干货分享:我是这样写论文、做实验、与导师相处...
- apply()和call()的区别
- Openstack贡献者须知 — OpenPGP/SSH/CLA贡献者协议
- TCP/IP详解--学习笔记(11)-TCP交互数据流,成块数据流
- 如何编写代码使jsp程序错误在输入框上面显示_252尚学堂百战程序员049天
- IBM X3650 WIN2003安装详细方法
- 二 Java开发环境搭建
- 最新!Vicor 270V-28V DCM5614以96%效率提供1300W功率
- 笔记本wifi做热点 android通过热点上网
- vue(ref父组件使用子组件中定义的方法)
- 综述 | 最新视觉-语言预训练综述
- out.print 嵌套html代码_代码规范之前端编写码规范
- 小型制造类企业IT云平台
- 计算机化验中红细胞的测量程序,血液常规检查检验程序.doc
- excel两列数据对比找不同_比Vlookup好用10倍,它才是Excel函数中的No.1
- RROR: Check hive‘s usability failed, please check the status of your cluster解决办法
- 百家企业短信网关(背景及核心代码)-1-开源项目短信接口征集
- No suitable resolver
- IxChariot测试网络设备性能
- 流量都去哪了? --- 详谈流量劫持是如何产生的?