1. Casa
  2. jQuery EasyUI Data Grid - Creazione di una visualizzazione personalizzata

Il miglior tutorial jQuery EasyUI Data Grid - Creazione di una visualizzazione personalizzata Nel 2024, in questo tutorial puoi imparare Scarica esempi jQuery EasyUI,

jQuery EasyUI Data Grid - Creazione di una visualizzazione personalizzata

In circostanze diverse, può essere necessario una griglia di dati (DataGrid) utilizzando il layout più flessibile. Per gli utenti, la vista della carta (carta View) è una buona scelta. Questo strumento può acquisire rapidamente e visualizzare i dati in griglia di dati (DataGrid) in. Nella testa griglia dei dati (DataGrid), si può semplicemente cliccando su di una colonna per ordinare i dati. Questo tutorial vi mostrerà come creare una vista personalizzata carta (scheda di visione).

Creare una vista carta (scheda di visione)

Ereditato da Data Grid (DataGrid) visualizzazione predefinita, creare una visualizzazione personalizzata è un buon metodo. Stiamo per creare una vista carta (carta View) per visualizzare alcune delle informazioni per ogni riga. 

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

La creazione di una griglia di dati (DataGrid)

Ora usiamo al fine di creare una griglia di dati (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 ({
		Vista: CardView
	});

Si noti che impostare le proprietà di visualizzazione, ed è il nostro biglietto da vista.

Scarica esempi jQuery EasyUI

jeasyui-datagrid-datagrid16.zip

Tutorial caldi

Contattaci

jQuery EasyUI Data Grid - Creazione di una visualizzazione personalizzata
10/30