YouTip

-- Learning not just technology, but dreams! Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks jQuery EasyUI Tutorial jQuery EasyUI Tutorial Introduction to jQuery EasyUI jEasyUI Applications jEasyUI Creating a CRUD Application jEasyUI Creating a CRUD DataGrid jEasyUI Form CRUD Application jEasyUI Creating an RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Creating a Drag and Drop Shopping Cart jEasyUI Creating a School Timetable jEasyUI Menu and Buttons jEasyUI Creating a Simple Menu jEasyUI Creating Link Buttons jEasyUI Creating Menu Buttons jEasyUI Creating Split Buttons jEasyUI Layout jEasyUI Creating a Border Layout jEasyUI Creating a Complex Layout jEasyUI Creating an Accordion jEasyUI Creating Tabs jEasyUI Dynamically Adding Tabs jEasyUI Adding Auto-playing Tabs jEasyUI Creating an XP-style Left Panel jEasyUI DataGrid jEasyUI Converting an HTML Table to a DataGrid jEasyUI Getting Selected Row Data jEasyUI Adding Search Functionality jEasyUI Adding a Toolbar jEasyUI Creating a Complex Toolbar jEasyUI Setting Frozen Columns jEasyUI Dynamically Changing Columns jEasyUI Formatting Columns jEasyUI Setting Sorting jEasyUI Custom Sorting jEasyUI Creating Column Groups jEasyUI Adding Checkboxes jEasyUI Custom Pagination jEasyUI Enabling Inline Editing jEasyUI Extending Editors jEasyUI Column Calculation jEasyUI Merging Cells jEasyUI Creating a Custom View jEasyUI Creating a Footer Summary jEasyUI Setting Row Background Color Conditionally jEasyUI Creating a PropertyGrid jEasyUI Expanding Row Details jEasyUI Creating a SubGrid jEasyUI Displaying Large Data Sets jEasyUI Adding Pagination Component jEasyUI Window jEasyUI Creating a Simple Window jEasyUI Customizing Window Toolbar jEasyUI Window and Layout jEasyUI Creating a Dialog jEasyUI Customizing a Dialog jEasyUI Tree jEasyUI Creating a Tree from HTML jEasyUI Creating an Async Tree jEasyUI Adding Nodes to a Tree jEasyUI Creating a Tree with Checkboxes jEasyUI Tree Drag and Drop Control jEasyUI Tree Loading Parent/Child Nodes jEasyUI Creating a Basic TreeGrid jEasyUI Creating a Complex TreeGrid jEasyUI TreeGrid Dynamic Loading jEasyUI TreeGrid Adding Pagination jEasyUI TreeGrid Lazy Loading Nodes jEasyUI Form jEasyUI Creating an Async Submit Form jEasyUI Form Validation jEasyUI Creating a Tree ComboBox jEasyUI Formatting a ComboBox jEasyUI Filtering a ComboBox DataGrid jEasyUI Reference Manual jQuery EasyUI Plugins jQuery EasyUI Extensions Introduction to jQuery EasyUI jQuery EasyUI Application – Creating a CRUD DataGrid jQuery EasyUI Application - Creating a CRUD Application Data collection and proper management are common necessities for web applications. CRUD allows us to generate page lists and edit database records. This tutorial will show you how to use the jQuery EasyUI framework to implement a CRUD DataGrid. We will use the following plugins: datagrid: To display list data to the user. dialog: To create or edit a single user record. form: To submit form data. messager: To display operation messages. Step 1: Prepare the Database We will use a MySQL database to store user information. Create a database and a 'users' table. Step 2: Create a DataGrid to Display User Information Create a DataGrid without any JavaScript code.

First Name	Last Name	Phone	Email

We don't need to write any JavaScript code to display the list to the user, as shown in the following image: The DataGrid uses the 'url' attribute, set to 'get_users.php', to retrieve data from the server. Code for the get_users.php file: $rs = mysql_query('select * from users'); $result = array(); while($row = mysql_fetch_object($rs)){ array_push($result, $row); } echo json_encode($result); Step 3: Create a Form Dialog We use the same dialog to create or edit a user. This dialog is created without any JavaScript code. Step 4: Implement Creating and Editing Users When creating a user, open a dialog and clear the form data. function newUser(){ $('#dlg').dialog('open').dialog('setTitle','New User'); $('#fm').form('clear'); url = 'save_user.php'; } When editing a user, open a dialog and load form data from the selected row in the datagrid. var row = $('#dg').datagrid('getSelected'); if (row){ $('#dlg').dialog('open').dialog('setTitle','Edit User'); $('#fm').form('load',row); url = 'update_user.php?id='+row.id; } The 'url' variable stores the URL to which the form data will be posted when saving the user. Step 5: Save User Data We use the following code to save user data: function saveUser(){ $('#fm').form('submit',{ url: url, onSubmit: function(){ return $(this).form('validate'); }, success: function(result){ var result = eval('('+result+')'); if (result.errorMsg){ $.messager.show({ title: 'Error', msg: result.errorMsg }); } else { $('#dlg').dialog('close'); // close the dialog $('#dg').datagrid('reload'); // reload the user data } } }); } Before submitting the form, the 'onSubmit' function is called to validate the form field values. When the form data is submitted successfully, the dialog is closed and the datagrid data is reloaded. Step 6: Delete a User We use the following code to remove a user: function destroyUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){ if (r){ $.post('destroy_user.php',{id:row.id},function(result){ if (result.success){ $('#dg').datagrid('reload'); // reload the user data } else { $.messager.show({ // show error message title: 'Error', msg: result.errorMsg }); } },'json'); } }); } } Before removing a row, we display a confirmation dialog for the user to decide whether to really remove the row data. After the data is successfully removed, the 'reload' method is called to refresh the datagrid data. Step 7: Run the Code Start MySQL and run the code in a browser. Download jQuery EasyUI Example jeasyui-app-crud1.zip Introduction to jQuery EasyUI jQuery EasyUI Application – Creating a CRUD DataGrid ByteArk Coding Plan Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied, stable and reliable. Configuration Guide ¥9.9 / month Subscribe Now iFlytek Star Coding Plan Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform. Configuration Guide ¥3.9 / month Subscribe Now Click to Share Notes Category Navigation Python / Data Science AI / Intelligent Development Front-end Development Back-end Development Database Mobile Development DevOps / Engineering Programming Languages Computer Fundamentals XML / Web Service .NET Website Building Advertisement Deep Dive Software Utilities Software Programming Web Browsers Data Management Development Tools Technical Reference Information Web Services jQuery EasyUI Tutorial jQuery EasyUI Tutorial Introduction to jQuery EasyUI jEasyUI Applications jEasyUI Creating a CRUD Application jEasyUI Creating a CRUD DataGrid jEasyUI Form CRUD Application jEasyUI Creating an RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Creating a Drag and Drop Shopping Cart jEasyUI Creating a School Timetable jEasyUI Menu and Buttons jEasyUI Creating a Simple Menu jEasyUI Creating Link Buttons jEasyUI Creating Menu Buttons jEasyUI Creating Split Buttons jEasyUI Layout jEasyUI Creating a Border Layout jEasyUI Creating a Complex Layout jEasyUI Creating an Accordion jEasyUI Creating Tabs jEasyUI Dynamically Adding Tabs jEasyUI Adding Auto-playing Tabs jEasyUI Creating an XP-style Left Panel jEasyUI DataGrid jEasyUI Converting an HTML Table to a DataGrid jEasyUI Getting Selected Row Data jEasyUI Adding Search Functionality jEasyUI Adding a Toolbar jEasyUI Creating a Complex Toolbar jEasyUI Setting Frozen Columns jEasyUI Dynamically Changing Columns jEasyUI Formatting Columns jEasyUI Setting Sorting jEasyUI Custom Sorting jEasyUI Creating Column Groups jEasyUI Adding Checkboxes jEasyUI Custom Pagination jEasyUI Enabling Inline Editing jEasyUI Extending Editors jEasyUI Column Calculation jEasyUI Merging Cells jEasyUI Creating a Custom View jEasyUI Creating a Footer Summary jEasyUI Setting Row Background Color Conditionally jEasyUI Creating a PropertyGrid jEasyUI Expanding Row Details jEasyUI Creating a SubGrid jEasyUI Displaying Large Data Sets jEasyUI Adding Pagination Component jEasyUI Window jEasyUI Creating a Simple Window jEasyUI Customizing Window Toolbar jEasyUI Window and Layout jEasyUI Creating a Dialog jEasyUI Customizing a Dialog jEasyUI Tree jEasyUI Creating a Tree from HTML jEasyUI Creating an Async Tree jEasyUI Adding Nodes to a Tree jEasyUI Creating a Tree with Checkboxes jEasyUI Tree Drag and Drop Control jEasyUI Tree Loading Parent/Child Nodes jEasyUI Creating a Basic TreeGrid jEasyUI Creating a Complex TreeGrid jEasyUI TreeGrid Dynamic Loading jEasyUI TreeGrid Adding Pagination jEasyUI TreeGrid Lazy Loading Nodes jEasyUI Form jEasyUI Creating an Async Submit Form jEasyUI Form Validation jEasyUI Creating a Tree ComboBox jEasyUI Formatting a ComboBox jEasyUI Filtering a ComboBox DataGrid jEasyUI Reference Manual jQuery EasyUI Plugins jQuery EasyUI Extensions Online Examples ·HTML Examples ·CSS Examples ·JavaScript Examples ·Ajax Examples ·jQuery Examples ·XML Examples ·Java Examples Character Sets & Tools · HTML Character Set Settings · HTML ASCII Character Set · JS Obfuscation/Encryption · PNG/JPEG Image Compression · HTML Color Picker · JSON Formatting Tool · Random Number Generator Latest Updates · Codex Advanced Configuration · AI Agent Terminology · ZCode Getting Started Tutorial · Loop Engineerin... · Claude Code Us... · Claude Code Us... · docker compose ... Site Information · Feedback · Disclaimer · About Us · Article Archive Follow WeChat My Favorites Mark Article Browsing History Clear All No Records