jQuery EasyUI 应用 – 创建 CRUD 应用(表格)
jQuery EasyUI 应用 - 创建 CRUD 应用
本节介绍如何创建CRUD应用。
CRUD分别是指在做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。
数据收集并妥善管理数据是网络应用共同的必要。CRUD允许我们生成页面列表,并编辑数据库记录。本教程将向你演示如何使用jQuery EasyUI框架实现一个CRUD DataGrid。
我们将使用下面的插件:
- datagrid:向用户展示列表数据。
- dialog:创建或编辑一条单一的用户信息。
- form:用于提交表单数据。
- messager:显示一些操作信息。
创建没有javascript代码的DataGrid。
<table id="dg" title="My Users" class="easyui-datagrid"
style="width: 650px; height: 450px" url="get_users.php"
toolbar="#toolbar" rownumbers="true" fitColumns="true"
singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead> <tbody>
<tr>
<td>Kim</td>
<td>Green</td>
<td>156862810007</td>
<td>123@qq.com</td>
</tr>
<tr>
<td>Ke</td>
<td>Lu</td>
<td>156862810007</td>
<td>456@qq.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Kim</th>
<td>15699859</td>
</tr>
</tfoot>
</table>
<tfoot></tfoot>没有显示 ,待研究,可能是:在 HTML 5 中,不再支持 HTML 4.01 中 <tfoot> 标签的任何属性。
我们使用相同的对话框来创建或编辑用户。
<!-- -->
<div id="dlg" class="easyui-dialog"
style="width: 400px; height: 280px; padding: 10px 20px; margin: 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post">
<div class="fitem">
<label>First Name:</label> <input name="firstname"
class="easyui-validatebox" required="true">
</div>
<br />
<div class="fitem">
<label>Last Name:</label> <input name="lastname"
class="easyui-validatebox" required="true">
</div>
<br /> <div class="fitem">
<label>Phone:</label> <input name="phone">
</div>
<br /> <div class="fitem">
<label>Email:</label> <input name="email" class="easyui-validatebox"
validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
onclick="saveUser()">Save</a> <a href="#" class="easyui-linkbutton"
iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
}
jQuery EasyUI 应用 – 创建 CRUD 应用(表格)的更多相关文章
- jQuery EasyUI/TopJUI创建树形表格下拉框
jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(转载汇总)
使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...
- 雷林鹏分享:jQuery EasyUI 窗口 - 创建简单窗口
jQuery EasyUI 窗口 - 创建简单窗口 创建一个窗口(window)非常简单,我们创建一个 DIV 标记: Some Content. 现在运行测试页面,您会看见一个窗口(window)显 ...
- JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...
- jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!)
jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!) validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改 ...
- [jQuery EasyUI系列] 创建增删改查应用
一.数据收集并妥善管理数据是网络应用共同的必要.CRUD允许我们生产页面列表并编辑数据库记录. 本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid. 将使用到的插件有: da ...
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(五)——jsp,json,EasyUI的结合
这部分比較复杂,之前看过自己的同学开发一个选课系统的时候用到了JSON,可是一直不知道有什么用.写东西也没用到.所以没去学他.然后如今以这样的怀着好奇心,这是做什么用的,这是怎么用的.这是怎么结合的心 ...
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(七)——数据分页处理
上篇完毕多选删除的功能之后,接下来就是做分页功能了.曾经的分页是一个麻烦的问题.并且数据量巨大的时候,直接把这些元素取出来显然速度较慢,所以取一定区间的数据还是高效的. watermark/2/tex ...
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
随机推荐
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_24-CMS前端页面查询开发-使用钩子方法实现立即查询
进入页面默认就去查询数据 这要用到vue的钩子函数,每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听. 编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. ...
- Python排序算法之选择排序定义与用法示例
Python排序算法之选择排序定义与用法示例 这篇文章主要介绍了Python排序算法之选择排序定义与用法,简单描述了选择排序的功能.原理,并结合实例形式分析了Python定义与使用选择排序的相关操作技 ...
- 【网站部署】flask
记录下常用的命令: nohup gunicorn --workers=2 --timeout=400 app:app &ps -ax scp -p ./***.h5 user@**.**.** ...
- php微信支付企业付款到零钱报错call faild, errorCode:58
这个报错一般是自己证书目录不是绝对目录,正确的目录结构应该是网站根目录下的:“C:\PHPWAMP_IN1\wwwroot\XXXX\XXXX.pem”. 还要注意的是文件夹命名一定 ...
- 常用CSS媒体查询
@media screen and (orientation: portrait) { /*竖屏 css*/} @media screen and (orientation: landscape) { ...
- oracle自增主键
本文参考-https://www.cnblogs.com/xxaxx/p/3584036.html oracle没有像sqlserver中identity一样的函数,需要依赖于序列.触发器来实现自增主 ...
- Linux中移动,复制,删除,打包排除某个目录或文件
移动,复制,删除排除某个文件或目录 cp !(file1|dir2) /data/ 复制文件到/data/,排除file1和dir2 mv !(file1|dir2) /data/ 移动文件到/dat ...
- 基于Keras 的VGG16神经网络模型的Mnist数据集识别并使用GPU加速
这段话放在前面:之前一种用的Pytorch,用着还挺爽,感觉挺方便的,但是在最近文献的时候,很多实验都是基于Google 的Keras的,所以抽空学了下Keras,学了之后才发现Keras相比Pyto ...
- c++学习笔记_3
前言:本笔记所对应的课程为中国大学mooc中北京大学的程序设计与算法(三)C++面向对象程序设计,主要供自己复习使用,且本笔记建立在会使用c和java的基础上,只针对与c和java的不同来写 类和对象 ...
- 洛谷 题解 P1353 【[USACO08JAN]跑步Running】
动态规划 状态 dp[i][j]表示第i分钟疲劳值为j的最大值 初始 全部都为一个最小值"0" 转移 考虑休息和走 如果当前疲劳值比时间要大,显然不可能出现这种情况 如果比时间小 ...