1. Home
  2. jQuery EasyUI danych Siatka - Tworzenie własnych widoków

Najlepszy samouczek jQuery EasyUI danych Siatka - Tworzenie własnych widoków W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

jQuery EasyUI danych Siatka - Tworzenie własnych widoków

W innych okolicznościach, być może trzeba siatki danych (datagrid) używając bardziej elastyczny układ. Dla użytkowników, widok karty (karta View) jest dobrym wyborem. To narzędzie może szybko pozyskać i wyświetlać dane w siatce danych (DataGrid) w. W sieci danych (DataGrid) głowicy, można po prostu klikając nagłówek kolumny, aby posortować dane. Ten poradnik pokaże Ci, jak stworzyć własnego widoku karty (View).

Tworzenie widoku karty (Zobacz)

Odziedziczone Siatka danych (DataGrid) domyślnego widoku, tworzyć własny widok jest dobra metoda. Mamy zamiar utworzyć widok karty (Widok), aby wyświetlić niektóre informacje dla każdego wiersza. 

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

Tworzenie siatki danych (DataGrid)

Teraz używamy widoku do tworzenia siatki danych (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 ({
		Widok: cardview
	});

Zauważ, że ustawienie właściwości widzenia, i to jest nasz pogląd karty.

Pobierz przykłady jQuery EasyUI

jeasyui-datagrid-datagrid16.zip

Hot Tutorials

Contact US

jQuery EasyUI danych Siatka - Tworzenie własnych widoków
10/30