easyui crud java_轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表,并编辑数据库记录。本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。
我们将使用下面的插件:
datagrid:向用户展示列表数据。
dialog:创建或编辑一条单一的用户信息。
form:用于提交表单数据。
messager:显示一些操作信息。
一、EasyUI创建CRUD应用
步骤 1:准备数据库
我们将使用 MySql 数据库来存储用户信息。创建数据库和 'users' 表。
步骤 2:创建 DataGrid 来显示用户信息
创建没有 javascript 代码的 DataGrid。
url="get_users.php"
toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true">
First NameLast NamePhoneEmail
New User
Edit User
Remove User
我们不需要写任何的 javascript 代码,就能向用户显示列表,如下图所示:
DataGrid 使用 'url' 属性,并赋值为 'get_users.php',用来从服务器检索数据。
get_users.php 文件的代码
$rs = mysql_query('select * from users');
$result = array();
while($row = mysql_fetch_object($rs)){
array_push($result, $row);
}
echo json_encode($result);
步骤 3:创建表单对话框
我们使用相同的对话框来创建或编辑用户。
closed="true" buttons="#dlg-buttons">
First Name:
Last Name:
Phone:
Email:
Save
Cancel
这个对话框已经创建,也没有任何的 javascript 代码。
步骤 4:实现创建和编辑用户
当创建用户时,打开一个对话框并清空表单数据。
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
当编辑用户时,打开一个对话框并从 datagrid 选择的行中加载表单数据。
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}
'url' 存储着当保存用户数据时表单回传的 URL 地址。
步骤 5:保存用户数据
我们使用下面的代码保存用户数据:
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
提交表单之前,'onSubmit' 函数将被调用,该函数用来验证表单字段值。当表单字段值提交成功,关闭对话框并重新加载 datagrid 数据。
步骤 6:删除一个用户
我们使用下面的代码来移除一个用户:
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('destroy_user.php',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
移除一行之前,我们将显示一个确认对话框让用户决定是否真的移除该行数据。当移除数据成功之后,调用 'reload' 方法来刷新 datagrid 数据。
步骤 7:运行代码
开启 MySQL,在浏览器运行代码。
二、EasyUI创建展开行明细编辑表单的CRUD 应用
当切换数据网格视图(datagrid view)到 'detailview',用户可以展开一行来显示一些行的明细在行下面。这个功能允许您为防止在明细行面板(panel)中的编辑表单(form)提供一些合适的布局(layout)。在本教程中,我们使用数据网格(datagrid)组件来减小编辑表单(form)所占据空间。
步骤 1:在 HTML 标签中定义数据网格(DataGrid)
url="get_users.php"
toolbar="#toolbar"
fitColumns="true" singleSelect="true">
First NameLast NamePhoneEmail
New
Destroy
步骤 2:为数据网格(DataGrid)应用明细视图
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
border:false,
cache:true,
href:'show_form.php?index='+index,
onLoad:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('getRowDetail',index).find('form').form('load',row);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
为了为数据网格(DataGrid)应用明细视图,在 html 页面头部引入 'datagrid-detailview.js' 文件。
我们使用 'detailFormatter' 函数来生成行明细内容。 在这种情况下,我们返回一个用于放置编辑表单(form)的空的
步骤 3:创建编辑表单(Form)
编辑表单(form)是从服务器加载的。
show_form.php
First Name | Last Name | ||
Phone |
Save
Cancel
步骤 4:保存或取消编辑
调用 'saveItem' 函数来保存一个用户或者调用 'cancelItem' 函数来取消编辑。
function saveItem(index){
var row = $('#dg').datagrid('getRows')[index];
var url = row.isNewRecord ? 'save_user.php' : 'update_user.php?id='+row.id;
$('#dg').datagrid('getRowDetail',index).find('form').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(data){
data = eval('('+data+')');
data.isNewRecord = false;
$('#dg').datagrid('collapseRow',index);
$('#dg').datagrid('updateRow',{
index: index,
row: data
});
}
});
}
决定要回传哪一个 URL,然后查找表单(form)对象,并调用 'submit' 方法来提交表单(form)数据。当保存数据成功时,折叠并更新行数据。
function cancelItem(index){
var row = $('#dg').datagrid('getRows')[index];
if (row.isNewRecord){
$('#dg').datagrid('deleteRow',index);
} else {
$('#dg').datagrid('collapseRow',index);
}
}
当取消编辑动作时,如果该行是新行而且还没有保存,直接删除该行,否则折叠该行。
以上就是关于EasyUI创建CRUD应用的七大步骤,分享给大家,希望对大家的学习有所帮助。
easyui crud java_轻松学习jQuery插件EasyUI EasyUI创建CRUD应用相关推荐
- 轻松学习jQuery事件和动画
✅作者简介:热爱国学的Java后端开发者,修心和技术同步精进.
- jquery插件 autoComboBox 自动创建联动的下拉框 如:省市区联动
废话{ 诞生背景: 问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢?? 答: 是,留下继续阅读. ...
- Web 开发最有用的 jQuery 插件集锦
一.Responsive SlideShow--图片滑块展示 1.Responsive Carousel responsive-carousel 是一个内容传送带插件,支持鼠标.触摸和键盘操作.默认包 ...
- 让人期待的2011年度最佳 jQuery 插件发布啦
近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件.jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架.jQuery 的易 ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 2011年度最佳 jQuery 插件发布
近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件.jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架.jQuery 的易 ...
- ajax上传图片成功但不显示,jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)...
参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/a ...
- 你还不会创建jQuery插件 ?
如何创建一个jQuery插件 为什么要创建jQuery插件 ? 因为这样代码可以复用. 我们有这样一个页面,页面上面有如下的文字(看源码),我们想要的效果是,当鼠标移到链接的时候,用一个浮动的div来 ...
- 全屏背景:15个jQuery插件实现全屏背景图像或媒体
动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...
最新文章
- 2022-2028年中国实心轮胎行业市场研究及前瞻分析报告
- C# 发送Http请求 - WebClient类
- Codeforces 1246D/1225F Tree Factory (构造)
- 决心迈向公有云?先问这五大问题
- 如何在 ASP.NET Core 中使用 Quartz.NET 执行任务调度
- 如何自学成为一名数据科学家?
- 绿盟漏洞扫描_二十周年专题|绿盟极光,用专注惊艳了时光
- 这首致喷子杠精的“键盘侠之歌” 唱出了多少人的心声
- 基于JAVA+SpringMVC+Mybatis+MYSQL的村民信息管理系统
- A股收盘:深证区块链50指数跌3.80%,爱迪尔等9股涨停
- iText 生成复杂表格
- 【转】Java杂谈(九)--Struts
- linux抓取snmp trap告警命令,linux snmptrap的发送与接收
- DATAGEAR统计报表简单教学
- 3dMax导入unity 材质问题
- 【HEVC】CTU,CU,PU,TU的划分
- java刮刮乐_大众学开发——59秒学习编写刮刮乐游戏
- Android Wear 2.0首款手表来了;工信部明确增加物联网网号 | IoT黑板报
- 案例-做一个30分钟倒计时
- Linux安全防护【云锁】
热门文章
- NextArch Foundation 下一代架构基金会
- Raspberry Pi 构建一个飞机观察器
- java程序打包exe
- Web UI设计师的CSS优化工具 25+
- java 动态加载ztree_JAVAEE——BOS物流项目02:学习计划、动态添加选项卡、ztree、项目底层代码构建...
- lj245a引脚功能图_CA3140中文资料-引脚图及功能
- (CPSCA's)CPOJC+VIJOS
- java中的基本算法
- 创建向导时为其添加path,指为jar添加到path里面
- CSS3属性——“box-flex”