Jeasyui Datagrid Datagrid16

jQuery EasyUI DataGrid - Creating Custom View

In different situations, you may need a more flexible layout for the datagrid. For users, the Card View is a good choice. This tool can quickly fetch and display data in the datagrid. In the datagrid header, you can sort data simply by clicking the column header. This tutorial will show you how to create a custom Card View.

Creating Card View

Inheriting from the default view of the datagrid is a good way to create a custom view. We will create a Card View to display some information for each row.

    var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
        renderRow: function(target, fields, frozen, rowIndex, rowData){
            var cc = [];
            cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');
            if (!frozen){
                var aa = rowData.itemid.split('-');
                var img = 'shirt' + aa + '.gif';
                cc.push('<img src="images/' + img + '" style="width:150px;float:left">');
                cc.push('<div style="float:left;margin-left:20px;">');
                for(var i=0; i<fields.length; i++){
                    var copts = $(target).datagrid('getColumnOption', fields);
                    cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields] + '</p>');
                }
                cc.push('</div>');
            }
            cc.push('</td>');
            return cc.join('');
        }
    });

Creating DataGrid

Now we use the view to create the datagrid.

    <table id="tt" style="width:500px;height:400px"
            title="DataGrid - CardView" singleSelect="true" fitColumns="true" remoteSort="false"
            url="datagrid8_getdata.php" pagination="true" sortOrder="desc" sortName="itemid">
        <thead>
            <tr>
                <th field="itemid" width="80" sortable="true">Item ID</th>
                <th field="listprice" width="80" sortable="true">List Price</th>
                <th field="unitcost" width="80" sortable="true">Unit Cost</th>
                <th field="attr1" width="150" sortable="true">Attribute</th>
                <th field="status" width="60" sortable="true">Status</th>
            </tr>
        </thead>
    </table>    
    $('#tt').datagrid({
        view: cardview
    });

Please note that we set the view property, and its value is our card view.

Download jQuery EasyUI Example

jeasyui-datagrid-datagrid16.zip

ByteArk Coding Plan

Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax. Official supply, 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

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 Drag and Drop Shopping Cart
jEasyUI Creating School Timetable
jEasyUI Menu and Button
jEasyUI Creating Simple Menu
jEasyUI Creating Link Button
jEasyUI Creating Menu Button
jEasyUI Creating Split Button
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 Query Function
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 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 Menu
jEasyUI Creating Tree Menu with Markup
jEasyUI Creating Async 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 Async Submit Form
jEasyUI Form Validation
jEasyUI Creating Tree ComboBox
jEasyUI Formatting ComboBox
jEasyUI Filtering DropDown 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

Large Model Multimodal (M...
Codex Advanced Configuration
AI Agent Terminology
ZCode Getting Started Tutorial
Loop Engineerin...
Claude Code Use...
Claude Code Use...

Site Information

Feedback
Disclaimer
About Us
Article Archive

Follow WeChat

My Favorites

Bookmark Article

Browsing History

Clear All

No records yet

YouTip