jQuery EasyUI data Grid - Membuat Custom View
Dalam keadaan yang berbeda, Anda mungkin perlu data grid (datagrid) menggunakan tata letak yang lebih fleksibel. Untuk pengguna, tampilan kartu (Card View) adalah pilihan yang baik. Alat ini dapat dengan cepat memperoleh dan menampilkan data dalam grid data (datagrid) di. Dalam data grid (datagrid) kepala, Anda bisa hanya dengan mengklik header kolom untuk menyortir data. Tutorial ini akan menunjukkan cara untuk membuat tampilan kartu kustom (Kartu View).
Buat tampilan kartu (Card View)
Diwarisi dari tampilan default data Grid (datagrid), membuat tampilan kustom adalah metode yang baik. Kita akan membuat tampilan kartu (Card View) untuk menampilkan beberapa informasi untuk setiap baris.
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(''); } });
Membuat data Grid (datagrid)
Sekarang kita menggunakan maksud untuk membuat data grid (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 ({ lihat: cardview });
Perhatikan bahwa kita mengatur tampilan properti, dan itu adalah kartu pandangan kami.