在本教程中,我们将为大家展示如何创建一个CRUD DataGrid。在这期间将使用到可编辑的datagrid插件来同这些crud操作一起工作。
Step 1:在HTML标记中定义DataGrid
<table id="dg" title="My Users" style="width:550px;height:250px" toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th> <th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th> <th field="phone" width="50" editor="text">Phone</th> <th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th> </tr> </thead> </table> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a> </div>
Step 2:制作一个可编辑的DataGrid
$('#dg').edatagrid({ url: 'get_users.php', saveUrl: 'save_user.php', updateUrl: 'update_user.php', destroyUrl: 'destroy_user.php' });
我们应该为可编辑的datagrid提供"url"、"saveUrl"、"updateUrl"和"destroyUrl"属性:
- url:从服务器获取用户数据。
- saveUrl:保存一个新用户的数据。
- updateUrl:更新一个已存在的用户的数据。
- destroyUrl:删除一个已存在的用户的数据。
Step 3:编写服务器处理代码
保存一个新用户(save_user.php):
$firstname = $_REQUEST['firstname']; $lastname = $_REQUEST['lastname']; $phone = $_REQUEST['phone']; $email = $_REQUEST['email']; include 'conn.php'; $sql = "insert into users(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')"; @mysql_query($sql); echo json_encode(array( 'id' => mysql_insert_id(), 'firstname' => $firstname, 'lastname' => $lastname, 'phone' => $phone, 'email' => $email ));
更新一个已存在的用户(update_user.php):
$id = intval($_REQUEST['id']); $firstname = $_REQUEST['firstname']; $lastname = $_REQUEST['lastname']; $phone = $_REQUEST['phone']; $email = $_REQUEST['email']; include 'conn.php'; $sql="update users set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id"; @mysql_query($sql); echo json_encode(array( 'id' => $id, 'firstname' => $firstname, 'lastname' => $lastname, 'phone' => $phone, 'email' => $email ));
删除一个已存在的用户(destroy_user.php):
$id = intval($_REQUEST['id']); include 'conn.php'; $sql = "delete from users where id=$id"; @mysql_query($sql); echo json_encode(array('success'=>true));
EasyUI示例下载>>easyui-crud-demo.zip
相关推荐
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
研究了好久,终于成功在jquery easyui中的datagrid中添加searchbox!
jquery easyui datagrid 教程的部分应用。
EasyUI第一讲EasyUI实现DataGrid 增删改查数据
jqueryEasyUI中的dataGrid实现的表格的增删改查,后台使用servlet,有数据库源码
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
jquery EasyUI的API,方便使用easyui查看。。。。。。
jqueryEasyUI 下载,及api下载 jqueryEasyUI 下载,及api下载
jquery easyui 帮助文档 非常好用的
简单容易方便,这是用jquery easyui 实现的crud
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
Jquery-easyui的datagrid中文文档
jQuery EasyUI - helps you build your web pages easily
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
jquery easyui datagrid demo 详解 增删改查
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