-- 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 Create CRUD Application
jEasyUI Create CRUD DataGrid
jEasyUI Form CRUD Application
jEasyUI Create RSS Reader
jEasyUI Drag and Drop
jEasyUI Basic Drag and Drop
jEasyUI Create Drag and Drop Shopping Cart
jEasyUI Create School Timetable
jEasyUI Menu and Button
jEasyUI Create Simple Menu
jEasyUI Create Link Button
jEasyUI Create Menu Button
jEasyUI Create Split Button
jEasyUI Layout
jEasyUI Create Border Layout
jEasyUI Create Complex Layout
jEasyUI Create Accordion
jEasyUI Create Tabs
jEasyUI Dynamically Add Tabs
jEasyUI Add Auto-play Tabs
jEasyUI Create XP-style Left Panel
jEasyUI DataGrid
jEasyUI Convert HTML Table to DataGrid
jEasyUI Get Selected Row Data
jEasyUI Add Search Functionality
jEasyUI Add Toolbar
jEasyUI Create Complex Toolbar
jEasyUI Set Frozen Columns
jEasyUI Dynamically Change Columns
jEasyUI Format Columns
jEasyUI Set Sorting
jEasyUI Custom Sorting
jEasyUI Create Column Groups
jEasyUI Add Checkbox
jEasyUI Custom Pagination
jEasyUI Enable Row Editing
jEasyUI Extend Editors
jEasyUI Column Calculation
jEasyUI Merge Cells
jEasyUI Create Custom View
jEasyUI Create Footer Summary
jEasyUI Set Row Background Color Conditionally
jEasyUI Create PropertyGrid
jEasyUI Expand Row to Show Details
jEasyUI Create SubGrid
jEasyUI Show Massive Data
jEasyUI Add Pagination Component
jEasyUI Window
jEasyUI Create Simple Window
jEasyUI Custom Window Toolbar
jEasyUI Window and Layout
jEasyUI Create Dialog
jEasyUI Custom Dialog
jEasyUI Tree
jEasyUI Create Tree with Markup
jEasyUI Create Async Tree
jEasyUI Add Nodes to Tree
jEasyUI Create Tree with Checkbox
jEasyUI Tree Drag and Drop Control
jEasyUI Tree Load Parent/Child Nodes
jEasyUI Create Basic TreeGrid
jEasyUI Create Complex TreeGrid
jEasyUI TreeGrid Dynamic Load
jEasyUI TreeGrid Add Pagination
jEasyUI TreeGrid Lazy Load Nodes
jEasyUI Form
jEasyUI Create Async Submit Form
jEasyUI Form Validation
jEasyUI Create Tree ComboBox
jEasyUI Format ComboBox
jEasyUI Filter ComboBox DataGrid
jEasyUI Reference
jQuery EasyUI Plugins
jQuery EasyUI Extensions
jQuery EasyUI Plugins
Deep Dive
Script
Scripting Language
Programming
Web Service
Web Service
Development Tools
Software
Programming Languages
Web Design and Development
Computer Science
jQuery EasyUI Extension - DataGrid View
jQuery EasyUI Extensions
DataGrid DetailView
Usage
Step 1: Create an HTML page
Step 2: Create the DataGrid
$('#tt').datagrid({
title:'DataGrid - DetailView',
width:500,
height:250,
remoteSort:false,
singleSelect:true,
nowrap:false,
fitColumns:true,
url:'datagrid_data.json',
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:100,sortable:true},
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:150,sortable:true},
{field:'status',title:'Status',width:60,align:'center'}
]],
view: detailview,
detailFormatter: function(rowIndex, rowData){
return '
' +
' | ' +
'' +
' Attribute: ' + rowData.attr1 + ' ' +
'Status: ' + rowData.status + ' ' +
' | ' +
'
';
}
});
Properties
Name Type Description Default
detailFormatter function(index,row) A function to return the formatted detail content for a row.
Events
Name Parameters Description
onExpandRow index,row Fires when a row is expanded.
onCollapseRow index,row Fires when a row is collapsed.
Methods
Name Parameters Description
fixDetailRowHeight index Fixes the height of the detail row.
getExpander index Gets the row expander object.
getRowDetail index Gets the row detail container.
expandRow index Expands a row.
collapseRow index Collapses a row.
DataGrid GroupView
Usage
Step 1: Create an HTML page
Step 2: Create the DataGrid
$('#tt').datagrid({
title:'DataGrid - GroupView',
width:500,
height:250,
rownumbers:true,
remoteSort:false,
nowrap:false,
fitColumns:true,
url:'datagrid_data.json',
columns:[[
{field:'productid',title:'Product ID',width:100,sortable:true},
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:150,sortable:true},
{field:'status',title:'Status',width:60,align:'center'}
]],
groupField:'productid',
view: groupview,
groupFormatter:function(value, rows){
return value + ' - ' + rows.length + ' Item(s)';
}
});
Properties
Name Type Description Default
groupField string Indicates the field to be grouped.
groupFormatter function(value,rows) A function to return the formatted group content.
The value parameter indicates the group value defined by the 'groupField' property.
The rows parameter indicates the data rows for the specified group value.
Methods
Name Parameters Description
expandGroup groupIndex Expands a group.
collapseGroup groupIndex Collapses a group.
DataGrid BufferView
Step 1: Include the 'datagrid-bufferview.js' file
Step 2: Create the DataGrid
| Inv No |
Date |
Name |
Amount |
Price |
Cost |
Note |
DataGrid VirtualScrollView
Step 1: Include the 'datagrid-scrollview.js' file
Step 2: Create the DataGrid with Virtual Scroll View
| Inv No |
Date |
Name |
Amount |
Price |
Cost |
Note |
Download jQuery EasyUI Example
jquery-easyui-datagridview.zip
jQuery EasyUI Extensions
jQuery EasyUI Plugins
ByteDance Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied, stable and reliable.
Configuration Guide
¥9.9
/ month
Activate Now
iFlytek Xingchen Coding Plan
Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform.
Configuration Guide
¥3.9
/ month
Activate 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 Basics
XML / Web Service
.NET
Website Building
Advertisement
jQuery EasyUI Tutorial
jQuery EasyUI Tutorial
jQuery EasyUI Introduction
jEasyUI Applications
jEasyUI Create CRUD Application
jEasyUI Create CRUD DataGrid
jEasyUI Form CRUD Application
jEasyUI Create RSS Reader
jEasyUI Drag and Drop
jEasyUI Basic Drag and Drop
jEasyUI Create Drag and Drop Shopping Cart
jEasyUI Create School Timetable
jEasyUI Menu and Button
jEasyUI Create Simple Menu
jEasyUI Create Link Button
jEasyUI Create Menu Button
jEasyUI Create Split Button
jEasyUI Layout
jEasyUI Create Border Layout
jEasyUI Create Complex Layout
jEasyUI Create Accordion
jEasyUI Create Tabs
jEasyUI Dynamically Add Tabs
jEasyUI Add Auto-play Tabs
jEasyUI Create XP-style Left Panel
jEasyUI DataGrid
jEasyUI Convert HTML Table to DataGrid
jEasyUI Get Selected Row Data
jEasyUI Add Search Functionality
jEasyUI Add Toolbar
jEasyUI Create Complex Toolbar
jEasyUI Set Frozen Columns
jEasyUI Dynamically Change Columns
jEasyUI Format Columns
jEasyUI Set Sorting
jEasyUI Custom Sorting
jEasyUI Create Column Groups
jEasyUI Add Checkbox
jEasyUI Custom Pagination
jEasyUI Enable Row Editing
jEasyUI Extend Editors
jEasyUI Column Calculation
jEasyUI Merge Cells
jEasyUI Create Custom View
jEasyUI Create Footer Summary
jEasyUI Set Row Background Color Conditionally
jEasyUI Create PropertyGrid
jEasyUI Expand Row to Show Details
jEasyUI Create SubGrid
jEasyUI Show Massive Data
jEasyUI Add Pagination Component
jEasyUI Window
jEasyUI Create Simple Window
jEasyUI Custom Window Toolbar
jEasyUI Window and Layout
jEasyUI Create Dialog
jEasyUI Custom Dialog
jEasyUI Tree
jEasyUI Create Tree with Markup
jEasyUI Create Async Tree
jEasyUI Add Nodes to Tree
jEasyUI Create Tree with Checkbox
jEasyUI Tree Drag and Drop Control
jEasyUI Tree Load Parent/Child Nodes
jEasyUI Create Basic TreeGrid
jEasyUI Create Complex TreeGrid
jEasyUI TreeGrid Dynamic Load
jEasyUI TreeGrid Add Pagination
jEasyUI TreeGrid Lazy Load Nodes
jEasyUI Form
jEasyUI Create Async Submit Form
jEasyUI Form Validation
jEasyUI Create Tree ComboBox
jEasyUI Format ComboBox
jEasyUI Filter ComboBox 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
· Large Model Multimodal (M...
· Codex Advanced Configuration
· AI Agent Terminology
· ZCode Getting Started Tutorial
· Loop Engineerin...
· Claude Code Usage...
· Claude Code Usage...
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Bookmark Article
Browsing History
Clear All
No Records
YouTip