JQuery EasyUI Data Grid - Создание пользовательского вида
При других обстоятельствах, возможно, потребуется сетки данных (DataGrid), используя более гибкую компоновку. Для пользователей, вид карты (Card View) является хорошим выбором. Этот инструмент может быстро приобретать и отображать данные в сетке данных (DataGrid) в. В сетке данных (DataGrid) головы, вы можете просто нажав на заголовок столбца, чтобы отсортировать данные. Этот учебник покажет вам, как создать представление пользовательской карты (Card View).
Создание вида карты (Card View)
Унаследованные от Data Grid (DataGrid) представление по умолчанию, создать пользовательский вид хороший метод. Мы собираемся создать вид карты (Card View), чтобы отобразить часть информации для каждой строки.
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)
Теперь мы используем представление для создания сетки данных (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 ({ Вид: cardview });
Обратите внимание, что мы устанавливаем свойства вид, и на наш взгляд карты.