原創(chuàng)|使用教程|編輯:龔雪|2016-03-16 09:06:20.000|閱讀 761 次
概述:在不同的情況下,您可能需要為數(shù)據(jù)網(wǎng)格運(yùn)用更靈活的布局,Cardview是個(gè)不錯(cuò)的選擇。這個(gè)工具可以在數(shù)據(jù)網(wǎng)格中迅速獲取和顯示數(shù)據(jù)。在數(shù)據(jù)網(wǎng)格的頭部,您可以?xún)H僅通過(guò)點(diǎn)擊列的頭部來(lái)排序數(shù)據(jù)。本教程將向您展示如何創(chuàng)建自定義Cardview。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
Kendo UI for jQuery——?jiǎng)?chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)!查看詳情>>>
在不同的情況下,您可能需要為數(shù)據(jù)網(wǎng)格運(yùn)用更靈活的布局,Cardview是個(gè)不錯(cuò)的選擇。這個(gè)工具可以在數(shù)據(jù)網(wǎng)格中迅速獲取和顯示數(shù)據(jù)。在數(shù)據(jù)網(wǎng)格的頭部,您可以?xún)H僅通過(guò)點(diǎn)擊列的頭部來(lái)排序數(shù)據(jù)。本教程將向您展示如何創(chuàng)建自定義Cardview。

從數(shù)據(jù)網(wǎng)格的默認(rèn)視圖繼承,是個(gè)創(chuàng)建自定義視圖的不錯(cuò)方法。我們將要?jiǎng)?chuàng)建一個(gè)Card View來(lái)為每行顯示一些信息。
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('');
}
});
現(xiàn)在我們使用視圖創(chuàng)建數(shù)據(jù)網(wǎng)格。
<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({
view: cardview
});
請(qǐng)注意,我們?cè)O(shè)置view屬性,且它的值為我們的card view。
下載EasyUI示例:
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都控件網(wǎng)