zoukankan      html  css  js  c++  java
  • Build CRUD Application with jQuery EasyUI

    http://www.jeasyui.com/tutorial/app/crud.php

    It has become a common necessily for web application to collect data and manage it properly. CRUD allows us to generate pages to list and edit database records. This tutorial will show you how to implement a CRUD DataGrid using jQuery EasyUI framework.

    We will use following plugins:

    • datagrid: show the user list data.
    • dialog: create or edit a single user information.
    • form: used to submit form data.
    • messager: to show some operation messages.

    Step 1: Prepare database

    We will use MySql database to store user information. Create database and 'users' table.

    Step 2: Create DataGrid to display user information

    Create the DataGrid with no javascript code.

    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>

    We don't need to write any javascript code and we can show the user list as following image:

    The DataGrid use the 'url' property that is assigned to 'get_users.php' to retrieve data from server.

    Code of get_users.php file

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

    Step 3: Create form dialog

    To create or edit a user, we use the same dialog.

    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" novalidate>
    5. <div class="fitem">
    6. <label>First Name:</label>
    7. <input name="firstname" class="easyui-textbox" required="true">
    8. </div>
    9. <div class="fitem">
    10. <label>Last Name:</label>
    11. <input name="lastname" class="easyui-textbox" required="true">
    12. </div>
    13. <div class="fitem">
    14. <label>Phone:</label>
    15. <input name="phone" class="easyui-textbox">
    16. </div>
    17. <div class="fitem">
    18. <label>Email:</label>
    19. <input name="email" class="easyui-textbox" validType="email">
    20. </div>
    21. </form>
    22. </div>
    23. <div id="dlg-buttons">
    24. <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
    25. <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    26. </div>

    The dialog is created with no javascript code also.

    Step 4: Implement creating and editing a user

    When create a user, we open the dialog and clear form data.

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

    When edit a user, we open the dialog and load form data from the selected datagrid row.

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

    The 'url' stores the URL address where the form will post to when save the user data.

    Step 5: Save the user data

    To save the user data we use the following code:

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

    Before submit the form, the 'onSubmit' function will be called, in which we can validate the form field value. When the form field values are submited successfully, close the dialog and reload the datagrid data.

    Step 6: Remove a user

    To remove a user, we use the following code:

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

    Before remove a row, we will display a confirm dialog to let user to determine whether to really remove the row data. When remove data successfully, call 'reload' method to refresh the datagrid data.

    Step 7: Run the Code

    Run the code in your browser with MySQL started.

    So, you now know the basics of CRUD in jQuery EasyUI framework. Press below link to start the demo application.

    Download the EasyUI example:

  • 相关阅读:
    VS2010 C++环境下DLL和LIB文件目录及名称修改
    什么是lib文件,lib和dll的关系如何
    C++静态库与动态库
    OpenSUSE安装软件
    写给已有编程经验的 Python 初学者的总结
    安装pydiction
    yii webservice 提示:Procedure 'getSent' not present 错误的解决方法(转)
    C# 子线程与主线程通讯方法一
    C#操作Access时Parameters集合的使用方法(转)
    [导航教程] [C#基类库大全]官方产品发布与源码下载---苏飞版
  • 原文地址:https://www.cnblogs.com/zkwarrior/p/4847291.html
Copyright © 2011-2022 走看看