首页 / JQUERY / [jQuery EasyUI系列] 创建增删改查应用

[jQuery EasyUI系列] 创建增删改查应用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了[jQuery EasyUI系列] 创建增删改查应用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4043字，纯文字阅读大概需要6分钟。

内容图文

一、数据收集并妥善管理数据是网络应用共同的必要。CRUD允许我们生产页面列表并编辑数据库记录。

本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid.

将使用到的插件有：

   datagrid:向用户展示列表数据

   dialog:创建并编辑一条单一的数据

   form:用于提交表单数据

   messager:显示一些操作信息

二、操作步骤

 1.准备数据库并创建实例数据

 2.创建DataGrid来显示用户信息

  创建没有JavaScript代码的DataGrid

             1
            <
            table 
            id
            ="dg"
             title
            ="My Users"
             class
            ="easyui-datagrid"
             style
            ="width:550px;height:250px"
             2
                    url
            ="get_users.php"
             3
                    toolbar
            ="#toolbar"
             4
                    rownumbers
            ="true"
             fitColumns
            ="true"
             singleSelect
            ="true"
            >
             5
            <
            thead
            >
             6
            <
            tr
            >
             7
            <
            th 
            field
            ="firstname"
             width
            ="50"
            >First Name</th> 8<th field="lastname" width="50">Last Name</th> 9<th field="phone" width="50">Phone</th>10<th field="email" width="50">Email</th>11</tr>12</thead>13</table>14<div id="toolbar">15<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>16<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>17<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>18</div>

显示结果如图:

技术分享

DataGrid中的url属性中的get_user.php用来从服务器检索数据、

            1
            $rs = mysql_query(‘select * from users‘);
2$result = array();
3while($row = mysql_fetch_object($rs)){
4array_push($result, $row);
5}
67echo json_encode($result);

3.创建表单对话框

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

             1
            <
            div 
            id
            ="dlg"
             class
            ="easyui-dialog"
             style
            ="width:400px;height:280px;padding:10px 20px"
             2
                    closed
            ="true"
             buttons
            ="#dlg-buttons"
            >
             3
            <
            div 
            class
            ="ftitle"
            >User Information</div> 4<form id="fm" method="post"> 5<div class="fitem"> 6<label>First Name:</label> 7<input name="firstname" class="easyui-validatebox" required="true"> 8</div> 9<div class="fitem">10<label>Last Name:</label>11<input name="lastname" class="easyui-validatebox" required="true">12</div>13<div class="fitem">14<label>Phone:</label>15<input name="phone">16</div>17<div class="fitem">18<label>Email:</label>19<input name="email" class="easyui-validatebox" validType="email">20</div>21</form>22</div>23<div id="dlg-buttons">24<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>25<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$(‘#dlg‘).dialog(‘close‘)">Cancel</a>26</div>

显示页面如图:

技术分享

4.实现创建和编辑用户

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

            1
            function
             newUser(){

            2     $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘,‘New User‘);
3     $(‘#fm‘).form(‘clear‘);
4     url = ‘save_user.php‘;
5 }

当编辑用户时，打开一个对话框并从datagrid选择的行中加载表单数据

            1
            var row = $(‘#dg‘).datagrid(‘getSelected‘);
2if (row){
3     $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘,‘Edit User‘);
4     $(‘#fm‘).form(‘load‘,row);
5     url = ‘update_user.php?id=‘+row.id;
6 }

url中存储着用户数据表单回传的URL地址

5.保存用户数据

             1
            function
             saveUser(){

             2     $(‘#fm‘).form(‘submit‘,{
 3        url: url,
 4         onSubmit: function(){
 5return $(this).form(‘validate‘);
 6        },
 7         success: function(result){
 8var result = eval(‘(‘+result+‘)‘);
 9if (result.errorMsg){
10                $.messager.show({
11                     title: ‘Error‘,
12                    msg: result.errorMsg
13                });
14             } else {
15                 $(‘#dlg‘).dialog(‘close‘);        // close the dialog16                 $(‘#dg‘).datagrid(‘reload‘);    // reload the user data17            }
18        }
19    });
20 }

提交表单之前，onSubmit函数将被调用，该函数用来验证表单字段值，当表单字段值提交成功，关闭对话框并重新加载datagrid数据

6.删除一个用户

             1
            function
             destroyUser(){

             2
            var row = $(‘#dg‘).datagrid(‘getSelected‘);
 3if (row){
 4         $.messager.confirm(‘Confirm‘,‘Are you sure you want to destroy this user?‘,function(r){
 5if (r){
 6                 $.post(‘destroy_user.php‘,{id:row.id},function(result){
 7if (result.success){
 8                         $(‘#dg‘).datagrid(‘reload‘);    // reload the user data 9                     } else {
10                         $.messager.show({    // show error message11                             title: ‘Error‘,
12                            msg: result.errorMsg
13                        });
14                    }
15                 },‘json‘);
16            }
17        });
18    }
19 }

技术分享

 

在删除一行之前，我们将显示一个确认对话框让用户决定是否真的删除该行数据，当移除数据成功之后，调用reload方法刷新datagrid数据、

 

原文：http://www.cnblogs.com/dream-to-pku/p/5689153.html

内容总结

以上是互联网集市为您收集整理的[jQuery EasyUI系列] 创建增删改查应用全部内容，希望文章能够帮你解决[jQuery EasyUI系列] 创建增删改查应用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1265757.html

来源：【匿名】