jQuery를 EasyUI 데이터 그리드는 - 사용자 지정보기 만들기
다른 상황에서, 당신은보다 유연한 레이아웃을 사용하여 데이터 그리드 (데이터 그리드)을해야 할 수도 있습니다. 사용자의 경우, 뷰 카드 (카드보기) 좋은 선택이다. 이 도구는 신속하게 획득하고 데이터 그리드 (데이터 그리드)에 표시 데이터 수 있습니다. 데이터 그리드 (DataGrid를) 머리에, 당신은 단지 열 머리글을 클릭하여 데이터를 정렬 할 수 있습니다. 이 튜토리얼에서는 사용자 지정 카드보기 (카드보기)를 만드는 방법을 보여줍니다.
카드 뷰를 생성합니다 (카드보기)
데이터 그리드 (DataGrid를) 기본보기에서 상속, 사용자 지정보기 좋은 방법입니다 만듭니다. 우리는 각각의 행에 대한 일부 정보를 표시하는 카드보기 (카드보기)을 만들려고하고있다.
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에)
이제 우리는 데이터 그리드 (데이터 그리드)을 생성하는 뷰를 사용합니다.
<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>
$ ( '# 고작').에서 Datagrid ({ 보기 : cardview });
우리가보기 속성을 설정합니다, 그것은 우리의 전망 카드입니다.