jQuery EasyUI 数据网格 - 创建自定义视图
在不同的情况下，您可能需要为数据网格(datagrid)运用更灵活的布局。对于用户来说，卡片视图(Card View)是个不错的选择。这个工具可以在数据网格(datagrid)中迅速获取和显示数据。在数据网格(datagrid)的头部，您可以仅仅通过点击列的头部来排序数据。本教程将向您展示如何创建自定义卡片视图(Card View)。
创建卡片视图(Card View)
从数据网格(datagrid)的默认视图继承，是个创建自定义视图的不错方法。我们将要创建一个卡片视图(Card View)来为每行显示一些信息。
var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
renderRow: function(target, fields, frozen, rowIndex, rowData){
var cc = [];
cc.push('');
if (!frozen){
var aa = rowData.itemid.split('-');
var img = 'shirt' + aa[1] + '.gif';
cc.push('
');
cc.push('
for(var i=0; i<fields.length; p="" i++){<="">
var copts = $(target).datagrid('getColumnOption', fields[i]);
cc.push('
' + copts.title + ': ' + rowData[fields[i]] + '
');
}
cc.push('
');
}
cc.push('');
return cc.join('');
}
});
创建数据网格(DataGrid)
现在我们使用视图创建数据网格(datagrid)。
title="DataGrid - CardView" singleSelect="true" fitColumns="true" remoteSort="false"
url="datagrid8_getdata.php" pagination="true" sortOrder="desc" sortName="itemid">
| Item ID | List Price | Unit Cost | Attribute | Status |
|---|
$('#tt').datagrid({
view: cardview
});
请注意，我们设置 view 属性，且它的值为我们的卡片视图。
下载 jQuery EasyUI 实例
jeasyui-datagrid-datagrid16.zip
本文转载自：w3cschool(编辑：雷林鹏 来源：网络 侵删)