jQuery EasyUI Data Grid - Création d'une vue personnalisée
Dans des circonstances différentes, vous devrez peut-être une grille de données (DataGrid) en utilisant la mise en page plus souple. Pour les utilisateurs, la vue de la carte (Card View) est un bon choix. Cet outil peut acquérir rapidement et afficher des données dans la grille de données (DataGrid) dans. Dans la tête grille de données (DataGrid), vous pouvez simplement en cliquant sur un en-tête de colonne pour trier les données. Ce tutoriel va vous montrer comment créer une vue de carte personnalisé (carte View).
Création d'une vue de carte (Card View)
Hérité de Data Grid (DataGrid) vue par défaut, créez une vue personnalisée est une bonne méthode. Nous allons créer une vue de carte (Card View) pour afficher certaines des informations pour chaque ligne.
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(''); } });
Création d'une grille de données (DataGrid)
Maintenant, nous utilisons en vue de créer une grille de données (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 ({ Vue: Vignettes });
Notez que nous définissons les propriétés de la vue, et il est notre carte de vue.