-- 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 Applications
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 Row 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 Extending Row Details
jEasyUI Creating SubGrid
jEasyUI Displaying Massive Data
jEasyUI Adding Pagination Component
jEasyUI Window
jEasyUI Creating Simple Window
jEasyUI Custom Window Toolbar
jEasyUI Window and Layout
jEasyUI Creating Dialog
jEasyUI Custom 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 ComboBox
jEasyUI Formatting ComboBox
jEasyUI Filtering DataGrid ComboBox
jEasyUI Reference
jQuery EasyUI Plugins
jQuery EasyUI Extensions
jQuery EasyUI DataGrid – Extending Row Details
jQuery EasyUI DataGrid – Displaying Massive Data with Virtual Scroll View
jQuery EasyUI DataGrid - Creating SubGrid
Using the DataGrid's detail view, users can expand a row to show additional details. Any content can be loaded as row details, and subgrids can also be loaded dynamically. This tutorial will show you how to create a subgrid on a master grid.
Step 1: Create the Master Grid
| Item ID |
Product ID |
List Price |
Unit Cost |
Attribute |
Status |
Step 2: Set up Detail View to Show SubGrid
To use the detail view, remember to include the view script file in the page header.
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '
';
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
ddv.datagrid({
url:'datagrid22_getdetail.php?itemid='+row.itemid,
fitColumns:true,
singleSelect:true,
rownumbers:true,
loadMsg:'',
height:'auto',
columns:[[
{field:'orderid',title:'Order ID',width:100},
{field:'quantity',title:'Quantity',width:100},
{field:'unitprice',title:'Unit Price',width:100}
]],
onResize:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$('#dg').datagrid('fixDetailRowHeight',index);
},0);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
When the user clicks the expand button ('+'), the 'onExpandRow' event is triggered. We create a new subgrid with three columns. Remember to call the 'fixDetailRowHeight' method on the master grid when the subgrid data is loaded successfully or when its size changes.
Step 3: Server-side Code
datagrid22_getdata.php
$result = array();
include 'conn.php';
$rs = mysql_query("select * from item where itemid in (select itemid from lineitem)");
$items = array();
while($row = mysql_fetch_object($rs)){
array_push($items, $row);
}
echo json_encode($items);
datagrid22_getdetail.php
include 'conn.php';
$itemid = mysql_real_escape_string($_REQUEST['itemid']);
$rs = mysql_query("select * from lineitem where itemid='$itemid'");
$items = array();
while($row = mysql_fetch_object($rs)){
array_push($items, $row);
}
echo json_encode($items);
Download jQuery EasyUI Example
jeasyui-datagrid-datagrid22.zip
jQuery EasyUI DataGrid – Extending Row Details
jQuery EasyUI DataGrid – Displaying Massive Data with Virtual Scroll View
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 Spark 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 here 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
jQuery EasyUI Tutorial
jQuery EasyUI Tutorial
jQuery EasyUI Introduction
jEasyUI Applications
jEasyUI Creating CRUD Applications
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 Row 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 Extending Row Details
jEasyUI Creating SubGrid
jEasyUI Displaying Massive Data
jEasyUI Adding Pagination Component
jEasyUI Window
jEasyUI Creating Simple Window
jEasyUI Custom Window Toolbar
jEasyUI Window and Layout
jEasyUI Creating Dialog
jEasyUI Custom 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 ComboBox
jEasyUI Formatting ComboBox
jEasyUI Filtering DataGrid ComboBox
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
· Large Model Multimodal (M...
· Codex Advanced Configuration
· AI Agent Terminology
· ZCode Getting Started Tutorial
· Loop Engineerin...
· Claude Code Us...
· Claude Code Us...
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Mark Article
Browsing History
Clear All
No Records
YouTip