EasyUI-DataGrid View（数据表格展示）
数据表格展示具有丰富的表现场景，为用户提供良好的前端体验。
DataGrid DetailView（数据表格详细展示）
第1步：创建一个HTML页面
第2步：创建数据表格
$(‘#tt').datagrid({ Attribute: ‘ + rowData.attr1 + ‘ Status: ‘ + rowData.status + ‘
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){
‘
‘
}
});
属性
|
属性名 |
属性值类型 |
描述 |
默认值 |
|
detailFormatter |
function(index,row) |
detailFormatter函数返回行详细内容。 |
事件
|
事件名 |
参数 |
描述 |
|
onExpandRow |
index,row |
在展开行的时候触发。 |
|
onCollapseRow |
index,row |
在折叠行的时候触发。 |
方法
|
方法名 |
参数 |
描述 |
|
fixDetailRowHeight |
index |
修复明细行高度。 |
|
getExpander |
index |
获取行展开对象。 |
|
getRowDetail |
index |
获取明细内容。 |
|
expandRow |
index |
展开一行。 |
|
collapseRow |
index |
折叠一行。 |
DataGrid GroupView（数据表格分组展示）
第1步：创建一个HTML页面
第2步：创建数据表格
$(‘#tt').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)';
}
});
属性
|
属性名 |
属性值类型 |
描述 |
默认值 |
|
groupField |
string |
声明哪些字段分组。 |
|
|
groupFormatter |
function(value,rows) |
groupFormatter函数返回分组内容。value参数指明了分组值定义的‘groupField'属性。rows参数指明了指定分组值的数据行。 |
方法
|
方法名 |
参数 |
描述 |
|
expandGroup |
groupIndex |
展开一个分组。 |
|
collapseGroup |
groupIndex |
折叠一个分组。 |
DataGrid BufferView（数据表格缓存视图）
第1步：导入缓存视图的js文件
第2步：创建数据表格
title=”DataGrid – BufferView”
data-options=”url:'get_data.php',view:bufferview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50″>
DataGrid VirtualScrollView（数据表格虚拟滚动视图）
第1步：导入滚动视图的js文件
第2步：创建包含虚拟滚动视图的数据表格
title=”DataGrid – VirtualScrollView”
data-options=”url:'get_data.php',view:scrollview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50″>
声明: 除非转自他站（如有侵权，请联系处理）外，本文采用 BY-NC-SA 协议进行授权 | 智乐兔
转载请注明：转自《EasyUI-DataGrid View（数据表格展示）》
本文地址：https://www.zhiletu.com/archives-2606.html
关注公众号：
微信赞赏
支付宝赞赏
鲁公网安备 37011302000311号
