jQuery EasyUI DataGrid - Creating Custom Views

In different scenarios, you might need a more flexible layout for the datagrid. For users, the Card View is a good choice. This tool allows for quick retrieval and display of data within the datagrid. In the header of the datagrid, you can sort the data just by clicking the column headers. This tutorial will show you how to create a custom Card View.

Creating a Card View

Inheriting from the datagrid's default view is a good way to create a custom view. We are going to 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[1] + '.gif';
            cc.push('<img decoding="async" src="images/' + img + '" style="width:150px;float:left">');
            cc.push('<div style="float:left;margin-left:20px;">');
            for(var i=0; i&lt;fields.length; i++){
                var copts = $(target).datagrid('getColumnOption', fields[i]);
                cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
            }
            cc.push('</div>');
        }
        cc.push('</td>');
        return cc.join('');
    }
});

Creating a DataGrid

Now we use the view to create a 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
});

Note that we set the view property, and its value is our Card View.

Download jQuery EasyUI Example

jeasyui-datagrid-datagrid16.zip