数据收集并妥善管理数据是网络应用共同的必要CRUD。允许我们生成页面列表，并编辑数据库记录。本教程将向你演示如何使用jQuery易用户界面框架实现一个create, read, update, and delete数据网格。我们将使用下面的插件：datagrid:向用户展示列表数据对话框：创建或编辑一条单一的用户信息形式：用于提交表单数据留言者：显示一些操作信息。

一、易居创建创建、读取、更新和删除应用步骤1:准备数据库

我们将使用关系型数据库数据库来存储用户信息。创建数据库和用户的表。

步骤2:创建数据网格来显示用户信息

创建没有爪哇岛描述语言代码的数据网格。

表id=' DG ' title=' My Users ' class=' measuri-datagrid ' style=' width :550 px；高度：250 px ' URL=' get _ users。PHP ' toolbar=' # toolbar '行号=' true ' fitColumns=' true '单选=' true '第一个字段='名字'宽度=' 50 '名字/th字段='lastname '宽度='50 '姓氏/th字段='电话'宽度='50 '电话/th字段='电子邮件'宽度=' 50 '电子邮件/th/tr/d/tablediv id='工具栏我们不需要写任何的爪哇岛描述语言代码，就能向用户显示列表，如下图所示：

数据网格使用' url '属性，并赋值为get_users.php '，用来从服务器检索数据get_users.php文件的代码

$rs=mysql_query('从用户中选择* ');$ result=array()；while($ row=MySQL _ fetch _ object($ RS)){ array _ push($ result，$ row)；} echo JSON _ encode($ result)；步骤3:创建表单对话框

我们使用相同的对话框来创建或编辑用户。

div id=' DLG ' class=' measuri-dialog ' style=' width :400 px；高度：280 pxpadd :10 px 20px ' closed=' true ' buttons=' # DLG-buttons ' div class=' fttle '用户信息/div表单id=' FM '方法=' post ' div class=' fitem '标签名：/标签输入名称=“名字”类=“测量-验证框”必填=' true '/div class=' fitem '标签姓氏3360/标签输入名称='姓氏' class='测量-验证框'对话框("关闭")"取消/a/div "这个对话框已经创建，也没有任何的爪哇岛描述语言代码。

步骤4:实现创建和编辑用户

当创建用户时，打开一个对话框并清空表单数据。

函数newUser(){ $('#dlg ').对话框("打开")。对话框("设置"、"新用户");$('#fm ').形式(“清除”)；url=' save _ user.php}当编辑用户时，打开一个对话框并从数据网格选择的行中加载表单数据。

var row=$('#dg ').数据网格(' GetSelected ')；if (row){ $('#dlg ').对话框("打开")。对话框("设置"、"编辑用户");$('#fm ').表单(“加载”，行)；url='update_user.php？id=' row。id；} "网址"存储着当保存用户数据时表单回传的统一资源定位器地址。步骤5:保存用户数据

我们使用下面的代码保存用户数据：

函数save USer(){ $(“# FM”).表单(' submit '，{ url: url，OnSubmit : function(){ return $(this)).表单(“验证”)；}，成功：函数（结果){ var result=eval('(' result '))；if(结果。错误消息){ $。信使。show({ title : ' Error '，msg :结果。错误消息})；} else { $('#dlg ').对话框("关闭");//关闭对话框$('#dg ').datagrid(' reload ')；//重新加载用户数据} } });}提交表单之前，' onSubmit '函数将被调用，该函数用来验证表单字段值。当表单字段值提交成功，关闭对话框并重新加载数据网格数据。步骤6:删除一个用户

我们使用下面的代码来移除一个用户：

函数destroyUser(){ var row=$('#dg ').数据网格(' GetSelected ')；如果（第行){ $.messager.confirm('Confirm '，'您确定要销毁此用户吗？',函数(r){ if (r){ $ .post('destroy_user.php '，{id:row.id}，function(result){ if(result。成功){ $(' # DG ').datagrid(' reload ')；//重新加载用户数据} else { $.messager.show({ //显示错误消息标题：“错误”，消息：结果。错误消息})；} }，' JSON ')；} });} }

移除一行之前，我们将显示一个确认对话框让用户决定是否真的移除该行数据。当移除数据成功之后，调用"重新加载"方法来刷新数据网格数据。步骤7:运行代码

开启MySQL，在浏览器运行代码。

二、易居创建展开行明细编辑表单的创建、读取、更新和删除应用

当切换数据网格视图（数据网格视图)到detailview '，用户可以展开一行来显示一些行的明细在行下面。这个功能允许您为防止在明细行面板（面板)中的编辑表单（表格)提供一些合适的布局（布局).在本教程中，我们使用数据网格（数据网格)组件来减小编辑表单（表格)所占据空间。

步骤1:在超文本标记语言标签中定义数据网格（数据网格)

表id='dg' title='我的用户style=' width :550 px h8 :250 px ' URL=' get _ users '。PHP ' toolbar=' # toolbar ' FitColumns=' true '单选=' true '第一个字段='名字'宽度=' 50 '名字/th字段='姓氏'宽度=' 50 '姓氏/th字段='电话'宽度='50 '电话/th字段=' Email '宽度=' 50 ' Email/th/tr/the ad/tablediv id=' toolbar ' a href='步骤2:为数据网格（数据网格)应用明细视图

$('#dg ').datagrid({ view: detailview，detailFormatter:function(索引，行){ return ' div class=' ddv '/div '；}，onExpandRow:函数（索引，行){ var ddv=$(this).datagrid('getRowDetail '，索引)。find(' div。ddv’)；ddv.panel({ border:false，cache:true，href:'show_form.php？index=' index，onLoad:function(){ $('#dg ').datagrid('fixDetailRowHeight '，索引);$('#dg ').datagrid('selectRow '，index)；$('#dg ').datagrid('getRowDetail '，索引)。查找(“形式”).表单(“加载”，行)；} });$('#dg ').datagrid('fixDetailRowHeight '，索引);}});为了为数据网格（数据网格)应用明细视图，在超文本标记语言页面头部引入datagrid-detailview.js '文件。我们使用' detailFormatter '函数来生成行明细内容。在这种情况下，我们返回一个用于放置编辑表单（表格)的空的div。当用户点击行展开按钮(' ')时，' onExpandRow '事件将被触发，我们将通过创建交互式、快速动态网页应用的网页开发技术加载编辑表单（表格).调用' getRowDetail '方法来得到行明细容器，所以我们能查找到行明细面板（小组).在行明细中创建面板（面板),加载从' show_form.php '返回的编辑表单（表格).步骤3:创建编辑表单（表格)

编辑表单（表格)是从服务器加载的show_form.php

形式方法=' post ' table class=' dv-table ' style=' width :100%；背景# fafapadding :5 px ' margin-top :5 px；名字/名字输入名='名字'类='测量-验证框'必选=' true '/input/TD tdLast Name/TD tdinput Name=' last Name ' class=' measuri-validate box '必选=' true '/input/TD/tr tdPhone/TD tdinput Name=' phone '/input/TD tdEmail/TD input Name=' email ' class=' measuri-validate box ' validate type=' email '/input/TD/tr/table div style=' padd 333333 text-align : right；填充-右：30 px ' a href=' # ' class=' measuri-link button ' icon cls=' icon-save ' plain=' true ' onclick=' SaveItem(？PHP echo $ _ REQUEST[' index ']；)“保存/a”a href=“#”class=“easui-link button”icon cls=“icon-cancel”plain=“true”onclick=“cancel lution(？PHP echo $ _ REQUEST[' index ']；)'取消/a/div/表单步骤4:保存或取消编辑

调用"保存项目"函数来保存一个用户或者调用"取消诉讼"函数来取消编辑。

函数saveItem(索引){ var row=$('#dg ').datagrid(' GetRows ')[index]；var url=row.isNewRecord？save _ user。PHP ' : ' update _ user。PHP？id=' row。id；$('#dg ').datagrid('getRowDetail '，索引)。查找(“形式”).表单(' submit '，{ url: url，OnSubmit : function(){ return $(this)).表单(“验证”)；}，成功：函数（数据){ data=eval('(' data '))；data.isNewRecord=false$('#dg ').datagrid('collapseRow '，index)；$('#dg ').datagrid('updateRow '，{ index: index，row : data })；} });}决定要回传哪一个网址，然后查找表单（表格)对象，并调用"提交"方法来提交表单（表格)数据。当保存数据成功时，折叠并更新行数据。

函数取消解决(索引){ var row=$(' # DG ').datagrid(' GetRows ')[index]；if (row.isNewRecord){ $('#dg ').datagrid('deleteRow '，索引);} else { $('#dg ').datagrid('collapseRow '，index)；}}当取消编辑动作时，如果该行是新行而且还没有保存，直接删除该行，否则折叠该行。

以上就是关于易居创建创建、读取、更新和删除应用的七大步骤，分享给大家，希望对大家的学习有所帮助。