React EasyUI插件 学习笔记（基础）详细版

安装步骤

1. 使用NPM进行安装

npm install rc-easyui --save

2. 引入样式文件

样式css文件导入索引

@import '~rc-easyui/dist/themes/default/easyui.css';
@import '~rc-easyui/dist/themes/icon.css';
@import '~rc-easyui/dist/themes/react.css';

3. 将组件导入“App.js”

import React from 'react';
import { DataGrid, GridColumn } from 'rc-easyui';

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.getData()
}
}
getData() {
return [
{"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
{"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
{"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"},
{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
{"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
]
}
render() {
return (
<div>
<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>
</div>
);
}
}

export default App;

AccordionPanel(分类面板)

继承

Panel

属性

名称	类型	描述	默认
title	string	面板标题。
collapsible	boolean	定义是否在标题上显示可折叠按钮。	true
collapsed	boolean	定义面板是否已经折叠。	true
selected	boolean	定义是否选择面板。	false
expandIconCls	string	展开图标类。	accordion-expand
collapseIconCls	string	正在折叠的图标类。	accordion-collapse

Tree(树)

继承

LocaleBase

用法

<Tree data={this.state.data} onSelectionChange={this.handleSelectionChange.bind(this)}></Tree>

属性

名称	类型	描述	默认
data	array	要加载的数据。	[]
selectLeafOnly	boolean	定义是否只选择叶节点。	false
checkbox	boolean	定义是否显示复选框在每个节点之前	false
cascadeCheck	boolean	定义是否级联检查	true
cascadeCheck	boolean	定义是否级联检查。	true

事件

名称	参数	描述
onSelectionChange	node	节点选中时触发
onNodeClick	node	节点单击时触发。
onNodeExpand	node	节点展开时触发。
onNodeCollapse	node	节点折叠时触发。
onNodeCheck	node	节点勾选时触发。
onNodeUncheck	node	节点取消勾选时触发。
onCheckChange	nodes	勾选改变时触发。
onNodeContextMenu	{node, originalEvent}	节点右击时触发。

方法

名称	参数	返回值	描述
selectNode	node	void	选择一个节点。
checkNode	node	void	勾选一个节点。
uncheckNode	node	void	取消勾选一个节点。
uncheckAllNodes	none	void	取消勾选所有节点。
doFilter	q	void	执行筛选操作。

Droppable(放置)

继承

LocaleBase

用法

<Draggable>
<div className="dragitem">
<p style={
  { textAlign: 'center' }}>Drag Me</p>
</div>
</Draggable>
<Droppable
onDragEnter={() => this.setState({ isover: true })}
onDragLeave={() => this.setState({ isover: false })}
onDrop={() => this.setState({ dropped: true })}
>
<div className={dropCls}>
<p style={
  { textAlign: 'center' }}>Drop here</p>
</div>
</Droppable>

属性

名称	类型	描述	默认
scope	string,array	放置范围。	null
disabled	boolean	为True时禁用调整	false

事件

名称	参数	描述
onDragEnter	scope	当可拖动对象被拖动进入时触发。
onDragOver	scope	当拖动可拖动对象时触发。
onDragLeave	scope	离开可拖动动对象时触发。
onDrop	scope	当拖放可拖动对象时触发。

ComboGrid(数据表格下拉框)

继承

ComboBase

用法

<ComboGrid
panelStyle={
  { width: 500 }}
valueField="itemid"
textField="name"
data={this.state.data}
value={this.state.value}
onChange={(value) => this.setState({ value: value })}>
<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>
</ComboGrid>

属性

名称	类型	描述	默认
value	string,number,array	字段值。	null
data	array	要加载的数据。	[]
valueField	string	绑定到此组件的底层数据值名称。	id
textField	string	绑定到此组件的基础数据字段名。	text
editable	boolean	定义用户是否可以直接在字段中键入文本。	false

Draggable(拖动)

继承

none

用法

<div v-Draggable="{drag:onDrag}" :style="dragStyle">
<p style="text-align:center">Drag Me</p>
</div>

属性

名称	类型	描述	默认
scope	string	拖动范围。	null
disabled	boolean	为True时禁用拖动。	false
handle	Element,selector	启动可拖动的手柄。	null
revert	boolean	如果设置为true，当拖动停止时，该元素将返回到初始位置。	false
deltaX	number	拖动的元素位置x与当前光标对应。	null
deltaY	number	拖动的元素位置y与当前光标对应。	null
edge	number	开始拖动的拖动宽度。	0
delay	number	定义启动拖动操作的延迟时间(以毫秒为单位)。	100
axis	string	定义被拖动元素移动的轴，可选值为“v”或“h”， 当设置为null时，将移动到“v”和“h”方向。	null
cursor	string	拖动时的css光标	move
proxy	DraggableProxy	拖动时使用的代理组件	null

事件

名称	参数	描述
dragStart	state	开始拖动时触发
drag	state	拖动放置
dragEnd	state	当拖动结束时触发

Draggable(标签框)

继承

ComboBox

用法

<TagBox
style={
  { width: 300 }}
value={this.state.value}
onChange={value => this.setState({ value: value })}
/>

属性

名称	类型	描述	默认
value	string,number,array	字段值。	null
hasDownArrow	boolean	定义是否显示向下箭头按钮。	false
multiple	boolean	定义是否支持多个选择。	true
limitToList	boolean	为True时将输入值限制为列出的项。	false
tagCss	any	标签CSS样式。值可以是样式类、内联样式或返回样式类或内联样式的自定义函数。 代码实例: tagCss(row) { if (row.id == 3){ return { background: '#ffd7d7', color: '#c65353' }; } else if (row.id == 4){ return { background: '#b8eecf', color: '#45872c' }; } else { return null; } }	null

DataGrid(数据表格)

继承

GridBase

用法

<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>

属性

名称	类型	描述	默认
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	开关一行。

Menu(菜单)

继承

LocaleBase

用法

<Menu inline onItemClick={this.handleItemClick.bind(this)}>
<MenuItem value="new" text="New"></MenuItem>
<MenuItem text="Open">
<SubMenu>
<MenuItem value="word" text="Word"></MenuItem>
<MenuItem value="excel" text="Excel"></MenuItem>
<MenuItem value="ppt" text="PowerPoint"></MenuItem>
</SubMenu>
</MenuItem>
<MenuItem value="save" text="Save" iconCls="icon-save"></MenuItem>
<MenuItem value="print" text="Print" iconCls="icon-print" disabled></MenuItem>
<MenuSep></MenuSep>
<MenuItem value="exit" text="Exit"></MenuItem>
</Menu>

属性

名称	类型	描述	默认
menuCls	string	菜单样式类。	null
menuStyle	Object	菜单内联样式。	null
menuWidth	number,string	菜单宽度。	null
inline	boolean	为True时,保留在其父元素中，false时,位于所有元素之上。	false
noline	boolean	定义是否在菜单上显示垂直线。	false
duration	number	以毫秒为单位定义持续时间，在鼠标离开菜单时隐藏。	100

事件

名称	参数	描述
onShow	none	菜单显示时触发。
onHide	none	菜单隐藏时触发。
onItemClick	value	单击菜单条项时触发。

方法</