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>