jQuery EasyUI Data Grid - Erstellen einer benutzerdefinierten Ansicht
Unter anderen Umständen, können Sie mit Hilfe flexibler Layout eines Datengitter (Datagrid) benötigen. Für den Anwender ist die Karte Ansicht (Karte anzeigen) eine gute Wahl. Dieses Tool kann schnell erwerben und Anzeige von Daten in Datenraster (Datagrid) in. In dem Datenraster (Datagrid) Kopf, können Sie einfach, indem Sie auf eine Spaltenüberschrift klicken, um die Daten zu sortieren. Dieses Tutorial zeigt Ihnen, wie Sie eine benutzerdefinierte Karte Ansicht (Karte anzeigen) zu erstellen.
Erstellen Sie eine Karte Ansicht (Karte anzeigen)
Geerbt von Data Grid (Datagrid) Standardansicht erstellen Sie eine benutzerdefinierte Ansicht eine gute Methode ist. Wir werden eine Karte Ansicht (Karte anzeigen) zu erstellen, einige der Informationen für jede Zeile angezeigt werden soll.
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(''); } });
Erstellen eines Data Grid (Datagrid)
Jetzt verwenden wir eine Ansicht, die ein Datengitter (Datagrid) zu erstellen.
<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 ({ Ausblick: cardview });
Beachten Sie, dass wir die Eigenschaften anzeigen und es ist unsere View-Karte gesetzt.