JQuery EasyUI的常用组件
2024-08-26 07:58:01
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的一些常用组件。
最新文章
- Neo4j图数据库管理系统开发笔记之一:Neo4j Java 工具包
- 初试Celery
- PostgreSQL下,对汉字按拼音排序
- easyui源码翻译1.32---ProgressBar(进度条)
- DLL注入_拦截技术之Hook方式
- 核心ASP.NET
- .NET Mvc Razor
- 如何获取app的素材,做出一个高仿的app
- php管理关系工具Composer 之安装与下载
- AJAX中使用post,get接收发送数据的区别
- Android Stdio 中的Rendering Problems Android N requires the IDE to be running with Java 1.8 or later Install a supported JDK解决办法
- 浅析设备管理的MTTR,MTTF,MTBF计算方法
- Java集合的总结
- 前端面试题整理—Webpack篇
- Selenium-WebDriver框架常用基本操作
- CentOS 6.9 升级OpenSSH版本 关闭ssh服务后门
- 线性筛素数和理解 洛谷P3383
- C# 数值的隐式转换
- CSS设置百分比值的问题
- Docker概念学习系列之Docker核心概念之镜像Image
热门文章
- Ubuntu怎样进行自由截图操作
- 开涛spring3(7.5) - 对JDBC的支持 之 7.5 集成Spring JDBC及最佳实践
- 一个html页面传入参数到另一个html页面用js获取方法
- java中File类中list()和listFiles()方法区别
- IPv6启动五年后,距离我们究竟还有多远?
- 在ie下,a标签包被img的时候,为什么有个蓝色的边线
- VR全景,让VR不再是“空中楼阁“——智慧城市常诚
- rsync的用法
- Bash的命令替换
- SQL SERVER 使用BULK Insert将txt文件中的数据批量插入表中(1)