-- 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
jQuery EasyUI Introduction
jEasyUI Applications
jEasyUI Creating CRUD Application
jEasyUI Creating CRUD DataGrid
jEasyUI Form CRUD Application
jEasyUI Creating 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 Border Layout
jEasyUI Creating Complex Layout
jEasyUI Creating Accordion
jEasyUI Creating Tabs
jEasyUI Dynamically Adding Tabs
jEasyUI Adding Auto-play Tabs
jEasyUI Creating XP-style Left Panel
jEasyUI DataGrid
jEasyUI Converting HTML Table to DataGrid
jEasyUI Getting Selected Row Data
jEasyUI Adding Search Functionality
jEasyUI Adding Toolbar
jEasyUI Creating 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 Custom View
jEasyUI Creating Footer Summary
jEasyUI Setting Row Background Color Conditionally
jEasyUI Creating PropertyGrid
jEasyUI Expanding Row to Show Details
jEasyUI Creating Sub-DataGrid
jEasyUI Displaying Large Data
jEasyUI Adding Pagination Component
jEasyUI Window
jEasyUI Creating Simple Window
jEasyUI Customizing Window Toolbar
jEasyUI Window and Layout
jEasyUI Creating Dialog
jEasyUI Customizing Dialog
jEasyUI Tree
jEasyUI Creating Tree with Markup
jEasyUI Creating Async Tree
jEasyUI Adding Nodes to Tree
jEasyUI Creating Tree with Checkboxes
jEasyUI Tree Drag and Drop Control
jEasyUI Tree Loading Parent/Child Nodes
jEasyUI Creating Basic TreeGrid
jEasyUI Creating Complex TreeGrid
jEasyUI TreeGrid Dynamic Loading
jEasyUI TreeGrid Adding Pagination
jEasyUI TreeGrid Lazy Loading Nodes
jEasyUI Form
jEasyUI Creating Async Submit Form
jEasyUI Form Validation
jEasyUI Creating Tree Datalist
jEasyUI Formatting Datalist
jEasyUI Filtering Datalist DataGrid
jEasyUI Reference
jQuery EasyUI Plugins
jQuery EasyUI Extensions
jQuery EasyUI Application – Creating CRUD DataGrid
jQuery EasyUI Application – Creating RSS Feed Reader
Deep Dive
Programming
Software Utilities
Software
Technical Reference Information
Web Services
Web Service
Development Tools
Programming Languages
Scripting Languages
Web Design and Development
jQuery EasyUI Application - Creating a CRUD Application with Expandable Row Detail Editing Form
When switching the datagrid view to 'detailview', users can expand a row to display some row details below it. This feature allows you to provide a suitable layout for an editing form placed in the detail row panel. In this tutorial, we use the datagrid component to reduce the space occupied by the editing form.
Step 1: Define the DataGrid in HTML Tags
| First Name |
Last Name |
Phone |
Email |
Step 2: Apply Detail View to the DataGrid
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '
';
},
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);
}
});
To apply the detail view to the datagrid, include the 'datagrid-detailview.js' file in the HTML page header.
We use the 'detailFormatter' function to generate the row detail content.
In this case, we return an empty
to hold the editing form.
When the user clicks the row expand button ('+'), the 'onExpandRow' event is triggered, and we load the editing form via AJAX.
Call the 'getRowDetail' method to get the row detail container, so we can find the row detail panel.
Create a panel in the row detail, loading the editing form returned from 'show_form.php'.
Step 3: Create the Editing Form
The editing form is loaded from the server.
show_form.php
| First Name |
|
Last Name |
|
| Phone |
|
Email |
|
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem()">Save
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem()">Cancel
Step 4: Save or Cancel Editing
Call the 'saveItem' function to save a user or the 'cancelItem' function to cancel editing.
function saveItem(index){
var row = $('#dg').datagrid('getRows');
var url = row.isNewRecord ? 'save_user.php' : 'update_user.php?id='+row.id;
$('#dg').datagrid('getRowDetail',index).find('form').form('submit',{
url: url,
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
});
}
});
}
Determine which URL to post back to, then find the form object and call the 'submit' method to submit the form data. When the data is saved successfully, collapse and update the row data.
function cancelItem(index){
var row = $('#dg').datagrid('getRows');
if (row.isNewRecord){
$('#dg').datagrid('deleteRow',index);
} else {
$('#dg').datagrid('collapseRow',index);
}
}
When canceling the edit action, if the row is a new row and hasn't been saved, delete the row directly; otherwise, collapse the row.
Download jQuery EasyUI Example
jeasyui-app-crud3.zip
jQuery EasyUI Application – Creating CRUD DataGrid
jQuery EasyUI Application – Creating RSS Feed Reader
ByteDance 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 Construction
Advertisement
jQuery EasyUI Tutorial
jQuery EasyUI Tutorial
jQuery EasyUI Introduction
jEasyUI Applications
jEasyUI Creating CRUD Application
jEasyUI Creating CRUD DataGrid
jEasyUI Form CRUD Application
jEasyUI Creating 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 Border Layout
jEasyUI Creating Complex Layout
jEasyUI Creating Accordion
jEasyUI Creating Tabs
jEasyUI Dynamically Adding Tabs
jEasyUI Adding Auto-play Tabs
jEasyUI Creating XP-style Left Panel
jEasyUI DataGrid
jEasyUI Converting HTML Table to DataGrid
jEasyUI Getting Selected Row Data
jEasyUI Adding Search Functionality
jEasyUI Adding Toolbar
jEasyUI Creating 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 Custom View
jEasyUI Creating Footer Summary
jEasyUI Setting Row Background Color Conditionally
jEasyUI Creating PropertyGrid
jEasyUI Expanding Row to Show Details
jEasyUI Creating Sub-DataGrid
jEasyUI Displaying Large Data
jEasyUI Adding Pagination Component
jEasyUI Window
jEasyUI Creating Simple Window
jEasyUI Customizing Window Toolbar
jEasyUI Window and Layout
jEasyUI Creating Dialog
jEasyUI Customizing Dialog
jEasyUI Tree
jEasyUI Creating Tree with Markup
jEasyUI Creating Async Tree
jEasyUI Adding Nodes to Tree
jEasyUI Creating Tree with Checkboxes
jEasyUI Tree Drag and Drop Control
jEasyUI Tree Loading Parent/Child Nodes
jEasyUI Creating Basic TreeGrid
jEasyUI Creating Complex TreeGrid
jEasyUI TreeGrid Dynamic Loading
jEasyUI TreeGrid Adding Pagination
jEasyUI TreeGrid Lazy Loading Nodes
jEasyUI Form
jEasyUI Creating Async Submit Form
jEasyUI Form Validation
jEasyUI Creating Tree Datalist
jEasyUI Formatting Datalist
jEasyUI Filtering Datalist DataGrid
jEasyUI Reference
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 Archives
Follow WeChat
My Favorites
Mark Article
Browsing History
Clear All
No Records
YouTip