React EasyUI 数据表格
属性列表
| 名称 |
数据类型 |
作用描述 |
默认值 |
| idField |
string |
指示哪个字段是标识字段。 |
null |
| groupField |
string |
指示要分组的字段。 |
null |
| expanderWidth |
number |
展开列宽。 |
30 |
| renderDetail |
({row,rowIndex}) |
用于呈现细节视图的函数。 |
|
| renderGroup |
({value,rows}) |
用于呈现组行的函数。 |
|
事件列表
| 名称 |
参数 |
作用描述 |
| onRowExpand |
row |
在展开行时触发。 |
| onRowCollapse |
row |
当行被折叠时触发。 |
| onGroupExpand |
group |
在展开组时触发。 |
| onGroupCollapse |
group |
在组折叠时触发。 |
方法列表
| 名称 |
参数 |
返回值 |
作用描述 |
| sortData |
none |
void |
对数据行进行排序。 |
| collapseGroup |
value |
void |
一组折叠。。 |
| expandGroup |
value |
void |
扩展一组。 |
| toggleGroup |
value |
void |
一组切换。 |
| collapseRow |
row |
void |
折叠一行。 |
| expandRow |
row |
void |
扩充一行。 |
| toggleRow |
row |
void |
连续切换。 |
注：
- 继承： GridBase 。
使用方法
- 与表格列（ gridcolumn ）配合创建数据表格（datagrid）。
<DataGrid data={this.state.data} style={{height:250}}>
<GridColumn field="itemid" title="Item ID"></GridColumn>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="listprice" title="List Price" align="right"></GridColumn>
<GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
<GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
<GridColumn field="status" title="Status" align="center"></GridColumn>
</DataGrid>