jQuery EasyUI Data Grid - Creación de una vista personalizada

En circunstancias diferentes, es posible que tenga una cuadrícula de datos (cuadrícula de datos) utilizando el diseño más flexible. Para los usuarios, la vista de la tarjeta (vista Carta) es una buena opción. Esta herramienta puede adquirir rápidamente y mostrar datos en cuadrícula de datos (DataGrid) en. En la cabeza de cuadrícula de datos (cuadrícula de datos), puede simplemente haciendo clic en un encabezado de columna para ordenar los datos. Este tutorial le mostrará cómo crear una vista de la tarjeta personalizada (vista Carta).

Crear una vista de la tarjeta (Ver tarjeta)

Heredado de la cuadrícula de datos (DataGrid) vista por defecto, crear una vista personalizada es un buen método. Vamos a crear una vista de la tarjeta (vista Carta) para mostrar algunos de los datos para 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/' + 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('');
		}
	});

Creación de una cuadrícula de datos (DataGrid)

Ahora usamos el fin de crear una cuadrícula de datos (cuadrícula de datos).

	<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 ({
		Vista: cardview
	});

Tenga en cuenta que hemos creado las propiedades de la vista, y es nuestra tarjeta de visión.

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid16.zip