React EasyUI 數(shù)據(jù)表格

2020-06-24 12:12 更新

屬性列表

名稱(chēng) 數(shù)據(jù)類(lèi)型 作用描述 默認(rèn)值
idField string 指示哪個(gè)字段是標(biāo)識(shí)字段。 null
groupField string 指示要分組的字段。 null
expanderWidth number 展開(kāi)列寬。 30
renderDetail ({row,rowIndex}) 用于呈現(xiàn)細(xì)節(jié)視圖的函數(shù)。
renderGroup ({value,rows}) 用于呈現(xiàn)組行的函數(shù)。

事件列表

名稱(chēng) 參數(shù) 作用描述
onRowExpand row 在展開(kāi)行時(shí)觸發(fā)。
onRowCollapse row 當(dāng)行被折疊時(shí)觸發(fā)。
onGroupExpand group 在展開(kāi)組時(shí)觸發(fā)。
onGroupCollapse group 在組折疊時(shí)觸發(fā)。

方法列表

名稱(chēng) 參數(shù) 返回值 作用描述
sortData none void 對(duì)數(shù)據(jù)行進(jìn)行排序。
collapseGroup value void 一組折疊。。
expandGroup value void 擴(kuò)展一組。
toggleGroup value void 一組切換。
collapseRow row void 折疊一行。
expandRow row void 擴(kuò)充一行。
toggleRow row void 連續(xù)切換。

注:
- 繼承: GridBase 。

使用方法

  • 與表格列( gridcolumn )配合創(chuàng)建數(shù)據(jù)表格(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>
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)