数据表格展示

扩展组件 » 数据表格展示

数据表格展示

步骤 1: 创建HTML页面

步骤 2: 创建数据表格

$('#tt').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 '' +

'' +

'' +

'

Attribute: ' + rowData.attr1 + '' +

'

Status: ' + rowData.status + '' +

'' +

'';

}

});

属性

名称

类型

描述

默认

autoUpdateDetail

boolean

定义更新行时是否更新行细节内容。

true

detailFormatter

function(index,row)

格式化程序函数以返回行详细信息内容。

事件

名称

参数

描述

onExpandRow

index,row

展开一行时触发。

onCollapseRow

index,row

当一行折叠时触发。

方法

名称

参数

描述

fixDetailRowHeight

index

固定细节行高度。

getExpander

index

获取行扩展对象。

getRowDetail

index

获取行细节容器。

expandRow

index

扩展一行。

collapseRow

index

折叠一行。

subgrid

conf

创建一个嵌套的子网格。conf参数具有“options”和“subgrid”属性。

1)选项:定义如何呈现datagrid。子网格的options对象有一个“foreignField”属性。foregin值将被发送到服务器以检索子网格的数据。

2)子网格:定义是否创建子网格。定义后，将创建嵌套的子网格。

用法实例:

var conf = {

options:{

//the master grid options

},

subgrid:{

options:{

foreignField:'orderid',// the foregin field name

//foreignField:function(prow){

//return {

//orderid: prow.id,

//ordername: prow.name

//}

//}

//other grid options

},

subgrid:{

options:{

foreignField:...,

//other grid options

}

}

}

};

$('#dg').datagrid().datagrid('subgrid', conf);

getSelfGrid

none

获取本身 datagrid对象。

getParentGrid

none

获取父类datagrid对象。

getParentRowIndex

none

获取父行索引。

数据表格展示

步骤 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)

返回组内容的格式化程序函数。值参数表示由“groupField”属性定义的组值。rows参数根据指定的组值指示数据行。

groupStyler

function(value,rows)

返回组的CSS样式的函数。值参数表示由“groupField”属性定义的组值。rows参数根据指定的组值指示数据行。

用法实例:

$('#dg').datagrid({

groupStyler: function(value,rows){

if (value == 'RP-LI-02'){

return 'background-color:#6293BB;color:#fff;'; // return inline style

// the function can return predefined css class and inline style

// return {class:'r1', style:{'color:#fff'}};

}

}

});

事件

名称

参数

描述

onExpandGroup

groupIndex

展开组时触发。

onCollapseGroup

groupIndex

当一组折叠时触发。

方法

名称

参数

描述

expandGroup

groupIndex

扩展一组。

collapseGroup

groupIndex

折叠一组。

scrollToGroup

groupIndex

滚动到一个组。

refreshGroupTitle

groupIndex

刷新组标题。

DataGrid BufferView

步骤 1: 包括bufferview javascript文件

步骤 2:创建数据表格

Inv No

Date

名称

Amount

Price

Cost

Note

数据表格虚拟视图

步骤 1: 包括scrollview javascript文件

使用虚拟滚动视图创建DataGrid

Inv No

Date

名称

Amount

Price

Cost

Note

方法

名称

参数

描述

getRow

index

获取指定的行数据。

gotoPage

page

转到指定的页面。

代码实例:

$('#dg').datagrid('gotoPage', 8); // go to the page 8

$('#dg').datagrid('gotoPage', {

page: 12,

callback: function(page){

console.log('go to page: ' + page);

}

});

scrollTo

index

将视图滚动到指定行.

代码实例:

$('#dg').datagrid('scrollTo', 200); // scroll to the row 200

$('#dg').datagrid('scrollTo', {

index: 120,

callback: function(index){

console.log('scroll to the row: ' + index);

}

});

fixDetailRowHeight

index

固定细节行高度。

getExpander

index

获取行扩展器对象。

getRowDetail

index

获取行细节容器。

expandRow

index

扩展一行。

collapseRow

index

折叠一行。

下载EasyUI扩展: