O melhor tutorial jQuery EasyUI Data Grid - Criar uma vista personalizada em 2024. Neste tutorial você pode aprender Baixar exemplos jQuery EasyUI,
Em circunstâncias diferentes, você pode precisar de uma grade de dados (datagrid) usando layout mais flexível. Para os usuários, a vista do cartão (cartão View) é uma boa escolha. Esta ferramenta pode rapidamente adquirir e exibir dados em grade de dados (datagrid) em. Na cabeça grade de dados (datagrid), você pode simplesmente clicando no cabeçalho da coluna para classificar os dados. Este tutorial irá mostrar-lhe como criar uma vista de cartão personalizado (Cartão View).
Herdado de Data Grid (grade de dados) de exibição padrão, criar uma exibição personalizada é um bom método. Vamos criar uma vista de cartão (cartão View) para exibir algumas das informações para cada linha.
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(''); } });
Agora usamos uma visão para criar uma grade de dados (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 ({ Ver: cardview });
Note que nós definir as propriedades de visualização, e é o nosso cartão de vista.