jEasyUI crée des vues personnalisées

Dans différentes situations, vous devrez peut-être utiliser une mise en page plus flexible pour votre grille de données. Pour les utilisateurs, Card View est un bon choix. Cet outil récupère et affiche rapidement les données dans une grille de données. Dans l'en-tête de la grille de données, vous pouvez trier les données simplement en cliquant sur l'en-tête de colonne. Ce didacticiel vous montrera comment créer une vue de carte personnalisée.

Créer une vue de carte

Hériter de la vue par défaut de la grille de données est un bon moyen de créer une vue personnalisée. Nous allons créer une vue Carte pour afficher des informations pour chaque ligne.

	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('');
		}
	});

Créer une grille de données (DataGrid)

Maintenant, nous utilisons la vue pour créer une grille de données (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
	});

Notez que nous définissons la propriété view et que sa valeur est notre vue de carte.

Télécharger l'instance jQuery EasyUI

jeasyui-datagrid-datagrid16.zip