标签：
下面介绍datagrid的数据网格详细视图和数据网格的分组视图
1、先引用的js和css文件
1）包含eauyui必备的四个文件easyui.css，icon.css, jquery-min.js、jquery-easyui.min.js
和详细视图需要的detailview.js 和 分组视图groupview.js
<link rel="stylesheet" type="text/css" href="js/easyui.css">
<link rel="stylesheet" type="text/css" href="js/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/datagrid-detailview.js"></script>
<script type="text/javascript" src="js/datagrid-groupview.js"></script>
一、创建数据网格详细视图
1) 创建html页面
2)创建数据详细视图
<script>
$(function(){
//数据网格详细视图事件
$(‘#aa‘).datagrid({
title:‘DataGrid - DetailView‘,
width:500,
height:250,
remoteSort:false,
singleSelect:true,
nowrap:false,
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:‘attr1‘,title:‘Attribute‘,width:150,sortable:true},
{field:‘status‘,title:‘Status‘,width:60,align:‘center‘}
]],
view: detailview,
detailFormatter: function(rowIndex, rowData){
return ‘<table><tr>‘ +
‘<td rowspan=2 style="border:0"><img src="images/‘ + rowData.itemid + ‘.png" style="height:50px;"></td>‘ +
‘<td style="border:0">‘ +
‘<p>Attribute: ‘ + rowData.attr1 + ‘</p>‘ +
‘<p>Status: ‘ + rowData.status + ‘</p>‘ +
‘</td>‘ +
‘</tr></table>‘;
}
});
}）;
</script>
3)实现的效果图
二、创建数据网格分组视图
1）创建html页面
<body>
<div align="center">
<p><h2>2、数据网格分组视图</h2></p>
<table id="bb"></table>
</div>
</body>
2)创建数据网格分组事件
<script>
$(function(){
$(‘#bb‘).datagrid({
title:‘DataGrid - GroupView‘,
width:500,
height:250,
rownumbers:true,
remoteSort:false,
nowrap:false,
fitColumns:true,
url:‘datagrid_data.json‘,
columns:[[
{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:‘attr1‘,title:‘Attribute‘,width:150,sortable:true},
{field:‘status‘,title:‘Status‘,width:60,align:‘center‘}
]],
groupField:‘productid‘,
view: groupview,
groupFormatter:function(value, rows){
return value + ‘ - ‘ + rows.length + ‘ Item(s)‘;
}
});
});
</script>
3)分组视图效果图
三、其他数据网格缓存视图和数据网格虚拟滚动视图例子在这个上面都有，参考一下就行了
http://www.jeasyui.net/extension/189.html
easyui数据网格视图（Datagrid View）的简单应用
标签：
原文地址：http://www.cnblogs.com/xielong/p/5359178.html
