jQuery EasyUI Data Grid - Create a custom view

jQuery EasyUI Data Grid - Create a custom view

In jQuery EasyUI, Card View provides a more flexible layout for datagrids.

The Card View tool quickly gets and displays data in a data grid. At the head of the data grid, you can sort the data simply by clicking on the head of the column.

The following example shows you how to create a custom card view.

Create a Card View

Inheriting from the default view of the data grid is a great way to create a custom view. We're 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 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[i]);                     cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
               }
             cc.push('</div>');
            }
         cc.push('</td>');
         return cc.join('');
     }
 });

Create a data grid (DataGrid)

Now let's use the view to create a data grid.

  <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 the jQuery EasyUI instance

jeasyui-datagrid-datagrid16.zip