- 浏览: 436074 次
- 性别:
- 来自: 茂名
文章分类
最新评论
-
zenmshuo:
不错不错,总结的很详细,不知道这个控件和FlexGrid比起来 ...
jQuery EasyUI教程之datagrid应用(三) -
我是你们的爹:
文章里太多错误了,容易误导新手
jQuery EasyUI教程之datagrid应用(三) -
我是你们的爹:
...
jQuery EasyUI教程之datagrid应用(一) -
zhehen123:
你傻啊,json_decode后面跟一个参数就可以转成普通数组 ...
如何将PHP对象数组转换成普通数组? -
lai3221:
hegz,为什么做了没有任何效果呢?
jQuery EasyUI教程之datagrid应用(二)
对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。
我们会用到如下插件:
· datagrid: 列表显示数据。
· dialog: 增加或编辑单个用户信息。
· form: 用来提交表单数据。
· messager: 用来显示操作信息。
第一步:准备数据库
使用MySql数据库来保存用户信息,并创建数据库和“users”表。
第二步:创建DataGrid数据表格来显示用户信息
不需要编写任何javascript代码创建DataGrid数据表格。
<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px" 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> </table> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a> </div>
如下图所示,我们不需要写任何一行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);
第三步:创建表单对话框
增加或者编辑用户信息,我们使用同一对话框。
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 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> <div class="fitem"> <label>Last Name:</label> <input name="lastname" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label>Phone:</label> <input name="phone"> </div> <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>
对话框的创建也不需要编写javascript代码。
第四步:实现增加和编辑用户功能
增加用户信息时,打开对话框,清除表单数据。
function newUser(){ $('#dlg').dialog('open').dialog('setTitle','New User'); $('#fm').form('clear'); url = 'save_user.php'; }
编辑用户信息时,打开对话框,将选择的数据表格行数据装入表单。
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地址,当保存用户数据时,表单用它来提交(post)数据到服务器。
第五步:保存用户数据
使用如下代码来保存用户数据:
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”函数被调用,此时可校验表单字段值。当表单字段值提交成功,关闭对话框和刷新数据表格数据。
第六步:删除用户
用如下代码来删除用户:
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'); // 刷新用户数据 } else { $.messager.show({ // 显示错误信息 title: 'Error', msg: result.errorMsg }); } },'json'); } }); } }
删除一行数据时,会弹出一个confirm对话框来让我们选择确定是否真的删除数据行。当删除数据成功,调用“reload”方法刷新datagrid数据。
第七步:运行代码
在浏览器中运行代码,同时MySQL启动。
现在你了解了Query EasyUI框架的CRUD基本知识。
发表评论
-
格式化 Javascript 工具
2014-03-18 17:38 541链接地址:http://www.webcjs.com ... -
jQuery EasyUI教程之datagrid应用(三)
2014-03-18 09:29 96633jQuery EasyUI教程之datagrid应用(三) ... -
jQuery EasyUI教程之datagrid应用(二)
2014-03-06 16:02 10606jQuery EasyUI教程之datagrid应用(二) ... -
第二代身份证号码的验证代码
2011-04-07 11:56 1015代码实现: function cardValidity() ... -
用jQuery屏蔽掉按回车键时提交表单
2011-04-02 15:51 5330默认情况下,在表单输入框里按回车将会提交表单,但有时需要屏蔽掉 ... -
javascript获取URL参数和参数值
2010-10-25 09:29 1391这篇资料从网上搜索得 ... -
zxxbox jQuery弹出框插件
2010-10-22 23:22 1793新版无图片版zxxbox jQuery弹出框插件 by zh ... -
IE下使用JavaScript的window.open函数在新窗口中导出EXCEL XML表格数据出错的处理
2010-06-09 16:14 3947有时候根据客户需求,需要将数据导出到 EXCEL 的XML表格 ... -
Ajax Upload多文件上传插件翻译及中文演示
2010-05-31 20:41 1128链接地址:http://www.zhangxinxu.com/ ... -
JQuery UI之Dialog对话框应用
2010-05-31 19:48 7552文章来源:http://lwlfree.cn/?p=208 ... -
Jquery UI dialog 详解
2010-05-31 19:27 2712文章来源:http://xufish.blogbus.com/ ... -
jQuery UI 1.7 中文文档
2010-05-31 19:15 2701UI 1.7.x 中文文档:http://jqueryui.n ... -
判断IE浏览器的最简洁方法
2010-05-11 22:34 904下面代码运行结果:IE 下返回true,其他标准浏览器返回fa ... -
Colorize - jQuery表格插件
2010-05-07 15:13 2106Colorize是一个用来增加HT ... -
jQuery实现布局高宽自适应
2010-04-21 11:26 4649在页面布局(layout)时经常是上左右的框架布局并且需要宽、 ... -
jQuery.TreeView的使用介绍及其改进
2010-04-16 21:56 46093TreeView为Xuanye 打造的一款支持 jQuery ... -
jQuery.Form插件介绍
2010-04-07 23:19 5682一、前言 jQuery From插件是一个优秀的A ... -
jQuery源码查看器
2010-04-02 00:50 1036可以查看 jquery 1.2.6/1.3.2/1.4版本的每 ... -
jQuery png背景透明插件
2010-04-01 23:46 4250该插件不仅支持IE5/IE6/IE7下img标签的png背景透 ... -
jQuery 1.4 小阅兵
2010-04-01 08:25 1144该文简单整理了jQuery1.4改版后的变化,并指出了在开发过 ...
相关推荐
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
研究了好久,终于成功在jquery easyui中的datagrid中添加searchbox!
jquery easyui datagrid 教程的部分应用。
jqueryEasyUI中的dataGrid实现的表格的增删改查,后台使用servlet,有数据库源码
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
一篇关于JQueryEasyUI学习之datagrid 添加、修改、删除 学习笔记教程有需要了解的朋友可参考本的笔记,批量删除,双击表单修改、选中行修改,增加行修改,再有就是扩展editor的方法,无需废话,直接上代码,代码中的...
Jquery-easyui的datagrid中文文档
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
jquery easyui datagrid demo 详解 增删改查
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
easyui 可编辑datagrid完整例子,支持filebox 项目中的数据库使用的是mysql,内置sql脚本,执行脚本即可创建数据
NULL 博文链接:https://cqh520llr.iteye.com/blog/1956791
基于struts,spring,hibernate,oracle环境下jquery easyui环境搭建。实现了使用jquery easyui中的datagrid显示用户列表。测试网址: http://localhost:9090/jquery-easyui-1.2.6BasedonStruts/layout.jsp
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制计算机,而不是计算机控制用户;减少用户的记忆负担;保持界面一致。 给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头...
个人收藏的插件,jquery-easyui-datagrid,分享给大家。