轻松学习jQuery插件EasyUI EasyUI创建CRUD应用

前端之家收集整理的这篇文章主要介绍了轻松学习jQuery插件EasyUI EasyUI创建CRUD应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表,并编辑数据库记录。本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。 我们将使用下面的插件datagrid:向用户展示列表数据。 dialog:创建或编辑一条单一的用户信息。 form:用于提交表单数据。 messager:显示一些操作信息。

一、EasyUI创建CRUD应用

步骤 1:准备数据库

我们将使用 MysqL 数据库来存储用户信息。创建数据库和 'users' 表。

步骤 2:创建 DataGrid 来显示用户信息

创建没有 javascript 代码的 DataGrid。

PHP" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true">

我们不需要写任何的 javascript 代码,就能向用户显示列表,如下图所示:

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

echo json_encode($result);

步骤 3:创建表单对话框

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

First Name:

步骤 2:为数据网格(DataGrid)应用明细视图

'; },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)的空的

步骤 4:保存或取消编辑

调用 'saveItem' 函数来保存一个用户或者调用 'cancelItem' 函数来取消编辑。

PHP' : 'update_user.PHP?id='+row.id; $('#dg').datagrid('getRowDetail',index).find('form').form('submit',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)数据。当保存数据成功时,折叠并更新行数据。

当取消编辑动作时,如果该行是新行而且还没有保存,直接删除该行,否则折叠该行。

以上就是关于EasyUI创建CRUD应用的七大步骤,分享给大家,希望对大家的学习有所帮助。

猜你在找的jQuery相关文章