赞
踩
npm install rc-easyui --save
样式css文件导入索引
- @import '~rc-easyui/dist/themes/default/easyui.css';
- @import '~rc-easyui/dist/themes/icon.css';
- @import '~rc-easyui/dist/themes/react.css';
- 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;
继承
Panel
属性
名称 | 类型 | 描述 | 默认 |
---|---|---|---|
title | string | 面板标题。 | |
collapsible | boolean | 定义是否在标题上显示可折叠按钮。 | true |
collapsed | boolean | 定义面板是否已经折叠。 | true |
selected | boolean | 定义是否选择面板。 | false |
expandIconCls | string | 展开图标类。 | accordion-expand |
collapseIconCls | string | 正在折叠的图标类。 | accordion-collapse |
继承
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 | 执行筛选操作。 |
继承
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 | 当拖放可拖动对象时触发。 |
继承
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 |
继承
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 | 当拖动结束时触发 |
继承
用法
- <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 |
继承
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 | 开关一行。 |
继承
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 | 单击菜单条项时触发。 |
方法</
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。