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

2024-04-18 1070阅读

安装步骤

1. 使用NPM进行安装

npm install rc-easyui --save

2. 引入样式文件

样式css文件导入索引

React EasyUI插件 学习笔记（基础）详细版
（图片来源网络，侵删）
@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 (
{height:250}}







);
}
}
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

用法

 

属性
 

名称
   类型
   描述
   默认
  
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
 

用法
 

{ textAlign: 'center' }}Drag Me

 this.setState({ isover: true })}
onDragLeave={() => this.setState({ isover: false })}
onDrop={() => this.setState({ dropped: true })}
>
{ textAlign: 'center' }}Drop here

 

属性
 

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

名称
   参数
   描述
  
onDragEnter
   scope
   当可拖动对象被拖动进入时触发。
  
onDragOver
   scope
   当拖动可拖动对象时触发。
  
onDragLeave
   scope
   离开可拖动动对象时触发。
  
onDrop
   scope
   当拖放可拖动对象时触发。
  
ComboGrid(数据表格下拉框)
 

继承
 

ComboBase
 

用法
 

{ width: 500 }}
valueField="itemid"
textField="name"
data={this.state.data}
value={this.state.value}
onChange={(value) = this.setState({ value: value })}>







 

属性
 

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

继承
 

none
 

用法
 

Drag Me


 

属性
 

名称
   类型
   描述
   默认
  
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
 

用法
 

{ 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
 

用法
 

{height:250}}







 

属性
 

名称
   类型
   描述
   默认
  
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
 

用法
 














 

属性
 

名称
   类型
   描述
   默认
  
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
   单击菜单条项时触发。
  
方法
VPS购买请点击我
		

		
		

		免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!		
					

	




	
相关阅读

	


				

		
	





	
目录[+]