jQuery EasyUI DataGrid -Crear una vista personalizada

En diferentes casos, es posible que necesite aplicar un diseño más flexible para el datagrid. Para los usuarios, la Card View es una buena opción. Esta herramienta puede obtener y mostrar datos rápidamente en el datagrid. En el encabezado del datagrid, puede ordenar los datos simplemente haciendo clic en el encabezado de la columna. Este tutorial le mostrará cómo crear una Card View personalizada.

Crear una vista de tarjeta (Card View)

Heredar de la vista predeterminada del datagrid es un buen método para crear una vista personalizada. Vamos a crear una Card View para mostrar información en cada fila.

    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/index.html' + 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('');
        }
    });

Crear un DataGrid

Ahora usaremos la vista para crear el 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
    });

Tenga en cuenta que configuramos la propiedad `view` y su valor es nuestra Card View.

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid16.zip