-- 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 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 Border Layout
jEasyUI Creating Complex Layout
jEasyUI Creating Accordion Panels
jEasyUI Creating Tabs
jEasyUI Dynamically Adding Tabs
jEasyUI Adding Auto-play Tabs
jEasyUI Creating an 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 Conditionally Setting Row Background Color
jEasyUI Creating PropertyGrid
jEasyUI Expanding Row Details
jEasyUI Creating Sub-DataGrid
jEasyUI Displaying Large Data Sets
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 Menu
jEasyUI Creating Tree Menu with Markup
jEasyUI Creating Asynchronous Tree Menu
jEasyUI Adding Nodes to Tree Menu
jEasyUI Creating Tree Menu with Checkboxes
jEasyUI Tree Menu Drag and Drop Control
jEasyUI Tree Menu 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 Asynchronous Submit Form
jEasyUI Form Validation
jEasyUI Creating Tree ComboBox
jEasyUI Formatting ComboBox
jEasyUI Filtering DataGrid ComboBox
jEasyUI Reference Manual
jQuery EasyUI Plugins
jQuery EasyUI Extensions
jQuery EasyUI DataGrid โ Creating Custom View
jQuery EasyUI DataGrid โ Conditionally Setting Row Background Color
Deep Dive
Software
Programming
Computer Science
Web Design and Development
Web Services
Programming Languages
Scripting
Scripting Languages
Development Tools
Web Service
jQuery EasyUI DataGrid - Creating Footer Summary
In this tutorial, we will show you how to display a summary information row in the footer of a DataGrid.
To display a footer row, you should set the `showFooter` property to `true`, and then prepare the footer row defined in the DataGrid data. Here is the sample data:
ย ย ย ย {"total":1,"rows":[{"id":1,"name":"Chai","price":18.00}],"footer":[{"name":"Total","price":18.00}]}
Creating the DataGrid
ย ย ย ย
ย ย ย ย ย ย ย ย
ย ย ย ย ย ย ย ย ย ย ย ย
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย | Product Name |
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย Unit Price |
ย ย ย ย ย ย ย ย ย ย ย ย
ย ย ย ย ย ย ย ย
ย ย ย ย
The footer row is displayed the same way as the data rows, so you can display more than one summary in the footer.
Download jQuery EasyUI Example
jeasyui-datagrid-datagrid17.zip
jQuery EasyUI DataGrid โ Creating Custom View
jQuery EasyUI DataGrid โ Conditionally Setting Row Background Color
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 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 Basics
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 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 Border Layout
jEasyUI Creating Complex Layout
jEasyUI Creating Accordion Panels
jEasyUI Creating Tabs
jEasyUI Dynamically Adding Tabs
jEasyUI Adding Auto-play Tabs
jEasyUI Creating an 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 Conditionally Setting Row Background Color
jEasyUI Creating PropertyGrid
jEasyUI Expanding Row Details
jEasyUI Creating Sub-DataGrid
jEasyUI Displaying Large Data Sets
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 Menu
jEasyUI Creating Tree Menu with Markup
jEasyUI Creating Asynchronous Tree Menu
jEasyUI Adding Nodes to Tree Menu
jEasyUI Creating Tree Menu with Checkboxes
jEasyUI Tree Menu Drag and Drop Control
jEasyUI Tree Menu 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 Asynchronous Submit Form
jEasyUI Form Validation
jEasyUI Creating Tree ComboBox
jEasyUI Formatting ComboBox
jEasyUI Filtering DataGrid ComboBox
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
ยท 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
Bookmark Article
Browsing History
Clear All
No records yet