jquery easyui自定义DataGrid视图
在DataGrid中自定义视图可以做各种个性化的显示方式。
例子,建立一个CardView的视图,说明定义一个视图的方法。
效果图:
1,通过扩展$.fn.datagrid.defaults.view定义一个视图:
renderRow: function(target, fields, frozen, rowIndex, rowData){
var cc = [];
cc.push('<td colspan=' + fields.length + ' style="padding:5px;border:0;">');
if (!frozen){
cc.push('<img src="images/' + rowData.itemid + '.png" style="height:150px;float:left">');
cc.push('<div style="float:left">');
for(var i=0; i<fields.length; i++){
cc.push('<p>' + fields[i] + ': ' + rowData[fields[i]] + '</p>');
}
cc.push('</div>');
}
cc.push('</td>');
return cc.join('');
}
});
2,建立DataGrid并应用这个视图:
title:'DataGrid - CardView',
width:500,
height:400,
remoteSort:false,
singleSelect:true,
striped:true,
fitColumns:true,
url:'datagrid_data.json',
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:100,sortable:true},
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'status',title:'Status',width:60,align:'center'}
]],
view: cardview
});
原文地址:http://jquery-easyui.wikidot.com/tutorial:datagrid16
您可能感兴趣的文章:
jquery easyui自定义DataGrid视图
jquery easyUI创建分组属性编辑器
php使用EasyUI DataGrid获取资料的方式
jquery easyui 分页的使用方法
Jquery easyui之datagird查询框扩展示例
jquery easyui展开datagrid行显示明细数据
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
jQuery easyui datagrid动态查询数据实例讲解
jquery easyui利用DataGrid实现CRUD操作
jquery easyui combox一些实用的小方法