jQueryのEasyUIデータグリッド - カスタムビューの作成
異なる状況下では、より柔軟なレイアウトを使用してデータグリッド（データグリッドを）必要があるかもしれません。 ユーザーの場合、カードビュー（カードビュー）が良い選択です。 このツールは、迅速にデータグリッド（データグリッド）にデータを取得し、表示することができます。 データグリッド（データグリッド）ヘッドで、あなただけの列ヘッダをクリックすることでデータをソートすることができます。 このチュートリアルでは、カスタムカードビュー（カードビュー）を作成する方法を紹介します。
カードビューを作成します（カードビュー）
データグリッド（データグリッド）デフォルトのビューから継承され、カスタムビューを作成することは良い方法です。 私たちは、行ごとに情報の一部を表示するためのカードビュー（カードビュー）を作成しようとしています。
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('');
}
});
作成データグリッド（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の'）。データグリッド（{
ビュー：cardview
}）;
私たちは、ビューのプロパティを設定することに注意してください、そして、それは我々の見解カードです。