Match-id-47baa1f889cabd1da2bdd130dcf125118115aa41
This commit is contained in:
*
commit
c4fd11d4cc
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 不可用状态
|
||||
en-US: Button Style with Title
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
|
||||
|
||||
## en-US
|
||||
|
||||
```jsx
|
||||
import Button from "eview-ui/Button";
|
||||
import LabelField from "eview-ui/LabelField";
|
||||
import create_default from "@images/create_default";
|
||||
import delete_disabled from "@images/delete_disabled";
|
||||
import collecte_disabled from "@images/collecte_disabled";
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class IconButtonStyle extends React.Component {
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
let divStyle = { margin: "20px 0px 20px 20px" };
|
||||
let iconButtonStyle = { marginRight: "5px", width: "90px" };
|
||||
let labelStyle = {
|
||||
display: "block",
|
||||
fontSize: "14px",
|
||||
marginBottom: "10px",
|
||||
paddingLeft: "0px"
|
||||
};
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div id="evu_button_example">
|
||||
<div style={divStyle}>
|
||||
<Button
|
||||
text="Primary"
|
||||
status="primary"
|
||||
style={{marginRight: "1rem", marginBottom: "20px"}}
|
||||
/>
|
||||
<Button
|
||||
text="Disable Primary"
|
||||
status="primary"
|
||||
disabled={true}
|
||||
style={{marginBottom: "20px"}}
|
||||
/>
|
||||
<br/>
|
||||
<Button
|
||||
text="Default"
|
||||
tipShow="overflow"
|
||||
style={{marginRight: "1rem", marginBottom: "20px"}}
|
||||
/>
|
||||
<Button
|
||||
text="Disable Default"
|
||||
disabled={true}
|
||||
style={{marginBottom: "20px"}}
|
||||
/>
|
||||
<br/>
|
||||
<Button
|
||||
text="Risk"
|
||||
status="risk"
|
||||
style={{marginRight: "1rem", marginBottom: "20px"}}
|
||||
/>
|
||||
<Button
|
||||
text="Disable Risk"
|
||||
status="risk"
|
||||
disabled={true}
|
||||
style={{marginBottom: "20px"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<IconButtonStyle />, mountNode);
|
||||
```
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 自动聚焦
|
||||
en-US: Button Style with Title
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`focused`属性可以让页面渲染完成后进行自动聚焦到按钮上
|
||||
|
||||
## en-US
|
||||
|
||||
```jsx
|
||||
import Button from "eview-ui/Button";
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class IconButtonStyle extends React.Component {
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<Button text="自动聚焦按钮" focused={true}/>;
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<IconButtonStyle />, mountNode);
|
||||
```
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 带图标的按钮
|
||||
en-US: Button Style with Title
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
`leftIcon` `leftIconProps`可以设置左图标<br/>
|
||||
`rightIcon` `rightIconProps`可以设置右图标
|
||||
|
||||
## en-US
|
||||
|
||||
```jsx
|
||||
import Button from "eview-ui/Button";
|
||||
import LabelField from "eview-ui/LabelField";
|
||||
import create_default from "@images/create_default";
|
||||
import delete_disabled from "@images/delete_disabled";
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class IconButtonStyle extends React.Component {
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
let divStyle = { display: "flex" };
|
||||
let iconButtonStyle = { flex: "1", marginRight: "0.5rem" };
|
||||
let labelStyle = {
|
||||
display: "block",
|
||||
fontSize: "14px",
|
||||
marginBottom: "10px",
|
||||
paddingLeft: "0px"
|
||||
};
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div id="evu_button_example">
|
||||
<div style={divStyle}>
|
||||
<Button
|
||||
leftIcon={create_default}
|
||||
leftIconProps={{
|
||||
leftHoverIcon: delete_disabled,
|
||||
leftIconClass: 'my-icon-class',
|
||||
}}
|
||||
onClick={() => {
|
||||
alert(123);
|
||||
}}
|
||||
style={{padding: 0, border: 0, height: '100%', marginRight: '1rem'}}
|
||||
/>
|
||||
<Button
|
||||
text="Primary Button"
|
||||
tipShow="overflow"
|
||||
tipData={"Hello React"}
|
||||
status="primary"
|
||||
rightIcon={create_default}
|
||||
style={iconButtonStyle}
|
||||
/>
|
||||
<Button
|
||||
text="Default Button"
|
||||
tipShow="overflow"
|
||||
leftIcon={create_default}
|
||||
style={iconButtonStyle}
|
||||
/>
|
||||
<Button
|
||||
text="Risk Button"
|
||||
tipShow="overflow"
|
||||
tipData={"Hello React"}
|
||||
status="risk"
|
||||
style={iconButtonStyle}
|
||||
leftIcon={delete_disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<IconButtonStyle />, mountNode);
|
||||
```
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 按钮尺寸
|
||||
en-US: Button Style with Title
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
按钮有大、默认两种尺寸。
|
||||
通过设置 `size` 为 `large` `default` 分别把按钮设为大、默认尺寸。
|
||||
|
||||
## en-US
|
||||
|
||||
```jsx
|
||||
import Button from "eview-ui/Button";
|
||||
import LabelField from "eview-ui/LabelField";
|
||||
import Radio from "eview-ui/Radio";
|
||||
import create_default from "@images/create_default";
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class IconButtonStyle extends React.Component {
|
||||
state = {
|
||||
size: "default"
|
||||
};
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
const { size } = this.state;
|
||||
const btnStyle = {
|
||||
marginRight: "1rem",
|
||||
marginTop: "0.5rem",
|
||||
};
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div id="evu_button_example">
|
||||
<div style={{marginBottom: "1rem", display: "flex"}}>
|
||||
<LabelField text="尺寸:"/>
|
||||
<Radio
|
||||
value="large"
|
||||
label="large"
|
||||
checked={size === "large"}
|
||||
onChange={value => this.setState({size: value})}
|
||||
style={{marginRight: "0.5rem"}}
|
||||
/>
|
||||
<Radio
|
||||
value="default"
|
||||
label="default"
|
||||
checked={size === "default"}
|
||||
onChange={value => this.setState({size: value})}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
text="Primary Button"
|
||||
status="primary"
|
||||
size={size}
|
||||
style={btnStyle}
|
||||
/>
|
||||
<Button
|
||||
text="Default Button"
|
||||
tipShow="overflow"
|
||||
size={size}
|
||||
style={btnStyle}
|
||||
/>
|
||||
<Button text="Risk Button" status="risk" size={size} style={btnStyle}/>
|
||||
<Button
|
||||
text="Default Button"
|
||||
leftIcon={create_default}
|
||||
size={size}
|
||||
style={btnStyle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<IconButtonStyle />, mountNode);
|
||||
```
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 提示功能
|
||||
en-US: Button Style with Title
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`tipData`设置提示信息
|
||||
|
||||
## en-US
|
||||
|
||||
```jsx
|
||||
import Button from "eview-ui/Button";
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class IconButtonStyle extends React.Component {
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
let divStyle = { margin: "20px 0px 20px 20px" };
|
||||
let iconButtonStyle = { marginRight: "5px", width: "90px" };
|
||||
let labelStyle = {
|
||||
display: "block",
|
||||
fontSize: "14px",
|
||||
marginBottom: "10px",
|
||||
paddingLeft: "0px"
|
||||
};
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div id="evu_button_example">
|
||||
<div style={divStyle}>
|
||||
<Button
|
||||
text="带提示的按钮"
|
||||
tipData="Hello eViews!"
|
||||
tipShow="always"
|
||||
style={{width: '8rem', marginRight: "1rem", marginBottom: "20px"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<IconButtonStyle />, mountNode);
|
||||
```
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 按钮类型
|
||||
en-US: Basic Settings
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
按钮有三种类型：主按钮`primary`、次按钮`default`、危险按钮`risk`
|
||||
|
||||
## en-US
|
||||
|
||||
Text Button
|
||||
|
||||
|
||||
```jsx
|
||||
import { Button } from 'eview-ui';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
|
||||
export default class ButtonExample extends React.Component {
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div>
|
||||
<Button text="Primary Button" status="primary" style={{marginRight: "16px"}}/>
|
||||
<Button text="Default Button" tipShow='overflow' style={{marginRight: "16px"}}/>
|
||||
<Button text="Risk Button" status="risk"/>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
ReactDOM.render(<ButtonExample />, mountNode);
|
||||
```
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
category: Components
|
||||
type: 通用
|
||||
title: Button
|
||||
subtitle: 按钮
|
||||
group: Button 按钮
|
||||
---
|
||||
|
||||
该组件默认分default和primary两种样式，支持添加图标、设置按钮文本，自定义样式，同时该组件底层采用原生的button标签，支持原生button的所有事件。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| id | 自定义id | string | - |
|
||||
| className | 自定义class | string | - |
|
||||
| style | 自定义组件样式 | React.CSSProperties | - |
|
||||
| title | 显示的title | string | - |
|
||||
| status | 设置Button的使用场景，默认default样式，特殊场景下设置该属性值为primary | `default`\|`primary`\|`risk`| `default `|
|
||||
| size | 设置组件的类型 | `small`\|`normal`\|`large` | `normal` |
|
||||
| text | Button中的文本 | string | '' |
|
||||
| disabled | 设置Button的灰化状态 | bool | `false` |
|
||||
| onClick | 点击按钮时的回调<br>*event:* 原生dom的点击事件 <br> | function: <br>`(event: object) => void` | - |
|
||||
| focused| 设置组件是否默认聚焦 | bool| `false`|
|
||||
| leftIcon | 在Button中文本的左边设置图标，传入值为图标的绝对路径 | string | - |
|
||||
| rightIcon | 在Button中文本的右边设置图标，传入值为图标的绝对路径 | string | - |
|
||||
| leftIconProps | 设置leftIcon的附加属性 <br>**属性：** <br> *leftHoverIcon*: 光标悬停时的leftIcon <br>*leftIconClass*: leftIcon的自定义类 | object | null |
|
||||
| rightIconProps | 设置rightIcon的附加属性 <br>**属性：** <br> *rightHoverIcon*: 光标悬停时的rightIcon <br> *rightIconClass*: rightIcon的自定义类 | object | null |
|
||||
| toolTipProps | tip配置 *优先级高于其他tip相关配置* <br> **请使用Tooltip组件添加提示框,结构清晰,组件控制便捷** | object(具体配置见Tooltip组件文档) | null |
|
||||
| tipStyle | tip样式 | React.CSSProperties | - |
|
||||
| tipShow | 是否展示tip | `always`\|`never`\|`overflow`| `never` |
|
||||
| tipData | tip值,默认显示text属性值 | string | text属性值 |
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本属性设置
|
||||
en-US: Basic Setting
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import InputSelect from 'eview-ui/InputSelect';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class InputSelectExample extends React.Component {
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
let style = { marginRight: "30px", marginLeft: "5px" }
|
||||
let labelStyle = { display: "block", paddingLeft: "0px" };
|
||||
let options = [{ text: "China is very very big country", value: 1 }, { text: "UK is small country & in Europe", value: 2 }, { text: "USA", value: 3 }, { text: "USAB", value: 4 }, { text: "USAC", value: 5 }, { text: "USAD", value: 6 }, { text: "USAE", value: 7 }, { text: "USAF", value: 8 }, { text: "USAG", value: 9 }];
|
||||
let options1 = [{ text: "BeiJIng", value: 1 }, { text: "UK", value: 2 }, { text: "USA hjnm ghyh ", value: 3 }];
|
||||
let options2 = [{ text: "China", value: 1 }, { text: "A quick brown fox jumps over the white lazy dog", value: 2 }, { text: "USA", value: 3 }, { text: "USAB", value: 4 }, { text: "USAC", value: 5 }, { text: "USAD", value: 6 }, { text: "USAE", value: 7 }, { text: "USAF", value: 8 }, { text: "USAG", value: 9 }];
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div id="evu_InputSelect_example" style={{ marginLeft: "20px" }}>
|
||||
<InputSelect options={options} label="Default style" labelStyle={labelStyle} selectStyle={{width: '150px'}} selectedIndex={0} style={style}/>
|
||||
<InputSelect options={options1} label="Disabled style" labelStyle={labelStyle} value={1} disabled={true} />
|
||||
<InputSelect options={options2} label="Default with Width and Scrollbar" labelStyle={labelStyle} selectedIndex={0} style={style} optionStyle={{width: '300px'}} enablHorzScroll={true} maxLength={15}/>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<InputSelectExample />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: API使用
|
||||
en-US: API Usage
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import InputSelect from 'eview-ui/InputSelect';
|
||||
import Button from 'eview-ui/Button';
|
||||
import DivMessage from 'eview-ui/DivMessage';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class InputSelectEvent extends React.Component {
|
||||
|
||||
state = {
|
||||
msg: '',
|
||||
selectedValue: ''
|
||||
};
|
||||
|
||||
handleChange = (value) => {
|
||||
this.setState({msg: "onChange event callback, Selected value : " + value, selectedValue: value});
|
||||
};
|
||||
handleKeyUp = (value) => {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
this.setState({msg: "getValue API, Current value : " + this.select.getValue()});
|
||||
};
|
||||
|
||||
handleClickValidate = (result) => {
|
||||
if (this.select.validate()) {
|
||||
this.setState({
|
||||
msg: "Validated, Current value : " + this.select.getValue(),
|
||||
selectedValue: this.select.getValue()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleClickFocus = () => {
|
||||
this.select.focus();
|
||||
};
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
let options = [{text: "All", value: -1},
|
||||
{text: "Shelf0-12-53ND2-1(IN1/OUT1)", value: 0},
|
||||
{text: "Shelf0-12-53ND2-2(IN2/OUT2)", value: 1},
|
||||
{text: "Shelf0-13-11LEM24-3(IN3/OUT3)", value: 2},
|
||||
{text: "USA", value: 3},
|
||||
{text: "a1", value: 4},
|
||||
{text: "a2", value: 5},
|
||||
{text: "a3", value: 6},
|
||||
{text: "a4", value: 7},
|
||||
{text: "a5", value: 8},
|
||||
{text: "a6", value: 9},
|
||||
{text: "a7", value: 10},
|
||||
{text: "a8", value: 11},
|
||||
{text: "a9", value: 12},
|
||||
{text: "a10", value: 13},
|
||||
{text: "a11", value: 14},
|
||||
{text: "a12", value: 15},];
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div id="evu_InputSelect_example">
|
||||
<div style={{marginLeft: "20px"}}>
|
||||
<InputSelect id={"ID_InputSelect"} label="Event callback function" options={options} required
|
||||
value={this.state.selectedValue} onChange={this.handleChange} onInputKeyUp={this.handleKeyUp} ref={(select) => this.select = select}/>
|
||||
<Button text="Value" onClick={this.handleClick} style={{marginRight: "5px"}}></Button>
|
||||
<Button text="Verification" onClick={this.handleClickValidate} style={{marginRight: "5px"}}></Button>
|
||||
<Button text="Focusing" onClick={this.handleClickFocus} style={{marginRight: "5px"}}></Button>
|
||||
{this.state.msg ?
|
||||
<DivMessage text={this.state.msg} type="success" style={{marginTop: '10px', width: '500px',}}/> : ''}
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<InputSelectEvent />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
category: Components
|
||||
type: 数据录入
|
||||
title: InputSelect
|
||||
subtitle: 可输可选组件
|
||||
cols: 1
|
||||
---
|
||||
|
||||
该组件用来设置可输入的下拉框，需设置文本显示值text和数据库存取值value，同时可设置初始化选中项，同时可在输入框中过滤下拉选项，当下拉列表中只有一个选项时，可回车选中。
|
||||
|
||||
## API
|
||||
|
||||
|方法名|描述|参数|返回值|
|
||||
|---|---|---|---|
|
||||
|getValue|用来获取下拉框中被选中项的value值|无|下拉框选中项的值|
|
||||
|validate|用来校验下拉选项是否被选中，返回是否通过校验|无|校验结果，bool类型|
|
||||
|focus|用来设置下拉框聚焦|无|无|
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名称 | 描述 | 输入 | 默认 |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| options | 设置传入数据let options = [{ text: "111", value: 1 }, {text: "222", value: 2}, {text: "333",value: 2}]; <br>其中text是页面展示值，value是数据库存取值 | array | |
|
||||
| id | 设置InputSelect的id | string | |
|
||||
| style | 通过自定义style来改变InputSelect的整体样式 例如:边缘边距宽度 | object | |
|
||||
| className | 通过自定义class来改变InputSelect的整体样式 例如:边缘边距宽度 | string | |
|
||||
| labelClassName | 通过添加class的方式自定义下拉框的名称的样式 | string | |
|
||||
| labelStyle | 通过添加style的方式自定义下拉框的名称的样式 | object | |
|
||||
| selectClassName | 通过自定义class来改变input的样式 例如:边框颜色背景 | string | |
|
||||
| selectStyle | 通过自定义style来改变input的样式 例如:边框颜色背景 | object | |
|
||||
| optionClassName | 通过自定class来改变option的样式 | string | |
|
||||
| optionStyle | 通过自定style来改变option的样式, *set optionStyle={{width:'300px'}} for setting the width of the dropdown width | object | |
|
||||
| label | 设置下拉框的名称文字 | string | |
|
||||
| labelPosition | 设置输入框的名称文字的位置 before代表名称文字在输入框的左边，after代表名称文字在输入框的右边 | enum:<br> "before"<br> "after"<br> | "before" |
|
||||
| value | 设置默认的value值,若同时设置了selectedIndex则以value为准 | number | |
|
||||
| selectedIndex | 设置默认的index,此处为数据属性options中对应的index | number | |
|
||||
| disabled | 设置inputSelect的灰化 | bool | false |
|
||||
| enablHorzScroll | 是否为弹出窗口设置水平滚动条 | bool | false |
|
||||
| showSearchTip | 是否启用“未找到”提示 | bool | true |
|
||||
| required | 设置组件是否为必填项 | bool | false |
|
||||
| zIndex | InputSelect Popup zIndex can be override by the user | number | 9999 |
|
||||
| popupDirection | 下拉框弹出方向(注:当弹出方向空间不够时会自动切换到其他方向) | "top"<br>"bottom" | "bottom" |
|
||||
| onChange | 设置inputSelect的onChange事件,监听inputSelect选中值得变化<br><br>**签名:**<br>`function(value: any, oldValue: any) => void`<br>*value:* 当前选中的选项的value值<br>*oldValue:* 组件上一次算中值 | function | |
|
||||
| onFocus | 设置inputSelect的onFocus事件<br><br>**签名:**<br>`function(e: object) => void`<br>*e:* 原生dom事件 | function | |
|
||||
| onBlur | 设置inputSelect的onBlur事件<br><br>**签名:**<br>`function(e: object) => void`<br>*e:* 原生dom事件 | function | |
|
||||
| onInputEnter | return the value of input on Enter press. <br><br>**Signature:**<br>`function(e: object, value) => void`<br>*e:* Primary dom events`<br>*value:* value entered| function | |
|
||||
| onInputKeyUp | inputSelect on inputbox keyUp event should fire this call back.<br><br>**Signature:**<br>`function(value) => void`<br>*value:* value entered | function | |
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本属性设置
|
||||
en-US: Basic Setting
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Select from 'eview-ui/Select';
|
||||
import navForm from "@images/nav_form";
|
||||
import navFormActive from "@images/nav_form_active";
|
||||
import navMsg from "@images/nav_msg";
|
||||
import navMsgActive from "@images/nav_msg_active";
|
||||
import navHeart from "@images/nav_heart";
|
||||
import navHeartActive from "@images/nav_heart_active";
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
export default class SelectExample extends React.Component {
|
||||
|
||||
render() {
|
||||
let compStyle = { marginRight: "40px", marginLeft: "20px" };
|
||||
let style = { width: '250px' }
|
||||
let labelStyle = { display: "block", paddingLeft: "0px" };
|
||||
|
||||
let options = [{ text: "China is big country", value: 1 },
|
||||
{ text: "UK is small country", value: 2 },
|
||||
{ text: "USA", value: 3 },
|
||||
{ text: "USAB", value: 4 },
|
||||
{ text: "USAC", value: 5 },
|
||||
{ text: "USAD", value: 6 },
|
||||
{ text: "USAE", value: 7 },
|
||||
{ text: "USAF", value: 8 },
|
||||
{ text: "USAG", value: 9 }];
|
||||
|
||||
let optionsWithIcon = [{ text: "Create", value: 1, icon: navForm, iconActive: navFormActive },
|
||||
{ text: "Export", value: 2, icon: navMsg, iconActive: navMsgActive },
|
||||
{ text: "Delete", value: 3, icon: navHeart, iconActive: navHeartActive }];
|
||||
|
||||
let options1 = [{ text: "Beijing", value: 1 },
|
||||
{ text: "London", value: 2 },
|
||||
{ text: "Washington DC", value: 3 }];
|
||||
|
||||
let options2 = [{ text: "Label 1:", value: 1, label: true },
|
||||
{ text: "A quick brown fox jumps over the white lazy dog", value: 2 },
|
||||
{ text: "China", value: 3},
|
||||
{ text: "USA", value: 4 },
|
||||
{ text: "Label 2:", value: 5, label: true },
|
||||
{ text: "USAB", value: 6 },
|
||||
{ text: "USAC", value: 7 },
|
||||
{ text: "USAD", value: 8 },
|
||||
{ text: "USAE", value: 9 }];
|
||||
|
||||
let options3 = [{ text: "China is big country", value: 1 },
|
||||
{ text: "UK is small country", value: 2 },
|
||||
{ text: "USA", value: 3 },
|
||||
{ text: "USAB", value: 4 },
|
||||
{ text: "USAC", value: 5 },
|
||||
{ text: "USAD", value: 6 },
|
||||
{ text: "USAE", value: 7 },
|
||||
{ text: "USAF", value: 8 },
|
||||
{ text: "USAG", value: 9 },
|
||||
{ text: "...", value: 10 ,tipData: 'options' }];
|
||||
|
||||
let options4 = [{ text: "China is big country", value: 1 ,disabled:true },
|
||||
{ text: "UK is small country", value: 2 ,disabled:true},
|
||||
{ text: "USA", value: 3 , disabled:true},
|
||||
{ text: "USAB", value: 4 ,disabled:true},
|
||||
{ text: "USAC", value: 5 ,disabled:true },
|
||||
{ text: "USAD", value: 6 ,disabled:true},
|
||||
{ text: "USAE", value: 7 ,disabled:true},
|
||||
{ text: "USAF", value: 8 ,disabled:true},
|
||||
{ text: "USAG", value: 9 ,disabled:true}];
|
||||
|
||||
let options5 = [{ text: "China is big country", value: 1 ,disabled:true },
|
||||
{ text: "UK is small country", value: 2 ,disabled:true},
|
||||
{ text: "Label 1:", value: 3 , label: true, disabled:true},
|
||||
{ text: "USAB", value: 4 ,disabled:true},
|
||||
{ text: "USAC", value: 5 ,disabled:true },
|
||||
{ text: "USAD", value: 6 ,disabled:true},
|
||||
{ text: "Label 2:", value: 7 ,label: true ,disabled:true},
|
||||
{ text: "USAF", value: 8 ,disabled:true},
|
||||
{ text: "USAG", value: 9 ,disabled:true}];
|
||||
const [version, theme] = getDemoVersion();
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div id="evu_Select_example" >
|
||||
<div>
|
||||
<Select options={options} label="Default style" required={true} labelStyle={labelStyle} defaultLabel="请选择国家" style={compStyle} />
|
||||
<Select options={options} label="Popup Up" required={true} labelStyle={labelStyle} selectedIndex={3} style={compStyle} popupDirection="top" isScrollAlwaysDisplay={true}/>
|
||||
<Select options={optionsWithIcon} label="With Icon" labelStyle={labelStyle} style={compStyle} />
|
||||
<br /><br />
|
||||
<Select options={options1} label="Disabled style" popupDirection="top" labelStyle={labelStyle} value={1} disabled={true} style={compStyle} />
|
||||
<Select options={options2} label="Default style with Width and scrollbar" required={true} selectStyle={style} labelStyle={labelStyle} style={compStyle}
|
||||
optionStyle={{ width: '250px' }} //for setting the width of the popup window
|
||||
enablHorzScroll={true} //enabling the horizontal scroll for the popup window
|
||||
/>
|
||||
<Select options={options3} label="Default style with moreOptions" labelStyle={labelStyle} style={compStyle} />
|
||||
<br /><br />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ color:"#999999",marginLeft: "20px" , marginBottom:"20px"}}>All Disable item Options </div>
|
||||
<Select options={options4} selectedIndex={3} style={compStyle} />
|
||||
<Select options={options5} style={compStyle} />
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<SelectExample />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 事件处理
|
||||
en-US: Event Handling
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Select from 'eview-ui/Select';
|
||||
import Button from 'eview-ui/Button';
|
||||
import DivMessage from 'eview-ui/DivMessage';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class SelectEventExample extends React.Component {
|
||||
|
||||
state = {
|
||||
msg: '',
|
||||
selectedValue: undefined,
|
||||
};
|
||||
|
||||
handleChange = (value) => {
|
||||
this.setState({ msg: "OnChange Event Callback, Selected Value: " + value, selectedValue: value });
|
||||
};
|
||||
|
||||
handleInputChange = (value) => {
|
||||
this.setState({ msg: "OnChange Event Callback, Selected Value: " + value.value, selectedValue: value });
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
this.setState({ msg: "getValue API: current Value:" + this.select.getValue() });
|
||||
};
|
||||
|
||||
handleClickValidate = (result) => {
|
||||
if (this.select.validate()) {
|
||||
this.setState({ msg: "Validate API Passed", selectedValue: this.select.getValue() });
|
||||
}
|
||||
};
|
||||
|
||||
handleClickFocus = () => {
|
||||
this.select.focus();
|
||||
};
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
let options = [{ text: "China", value: 1 }, { text: "UK", value: 2 }, { text: "USA", value: 3 }];
|
||||
let options1 = [{ text: "China", value: { value: 'China' } }, { text: "UK", value: { timeDim: "custom", value: 'UK' } },
|
||||
{ text: "USA", value: { interval: "message", value: 'USA' } }];
|
||||
let buttonStyle = { marginLeft: "20px" };
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div id="evu_Select_example" style={{ marginLeft: "20px", minHeight: '80px' }}>
|
||||
<Select label="Event callback" value={this.state.selectedValue} required
|
||||
options={options} ref={(select) => this.select = select} onChange={this.handleChange} />
|
||||
<Button text="Value" onClick={this.handleClick} style={buttonStyle}></Button>
|
||||
<Button text="Validate" onClick={this.handleClickValidate} style={buttonStyle}></Button>
|
||||
<Button text="Focusing" onClick={this.handleClickFocus} style={buttonStyle}></Button>
|
||||
<br /><br />
|
||||
<Select label="Event callback passing value as object" value={this.state.selectedValue} required
|
||||
options={options1} onChange={this.handleInputChange} />
|
||||
{this.state.msg ? <DivMessage text={this.state.msg} type="success" style={{ marginTop: "10px", width: "560px" }} /> : ''}
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<SelectEventExample />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 懒加载选择
|
||||
en-US: Lazy Select
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Select from 'eview-ui/Select';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class LazySelectExample extends React.Component {
|
||||
|
||||
handleLoadOptions = (index) => {
|
||||
console.log("handleLoadOptions index: ", index);
|
||||
const newOptions = OPTIONS_DB.slice(index, index + 10);
|
||||
this.setState(() => ({
|
||||
options: newOptions,
|
||||
}));
|
||||
return 20;
|
||||
}
|
||||
|
||||
state = {
|
||||
lazyOptions: { totalRecords: 119, onLoadRecords: this.handleLoadOptions },
|
||||
options: OPTIONS_DB.slice(0, 10),
|
||||
};
|
||||
|
||||
render() {
|
||||
console.log("lazyOptions : ", this.state.lazyOptions);
|
||||
const [version, theme] = getDemoVersion();
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div id="evu_Select_example" >
|
||||
<Select
|
||||
options={this.state.options}
|
||||
label="Lazy Select"
|
||||
selectedIndex={0}
|
||||
lazySearch={this.state.lazyOptions}
|
||||
/>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const OPTIONS_DB = [
|
||||
{ text: "Afghanistan", value: 1 },
|
||||
{ text: "Albania", value: 2 },
|
||||
{ text: "Algeria", value: 3 },
|
||||
{ text: "Andorra", value: 4 },
|
||||
{ text: "Angola", value: 5 },
|
||||
{ text: "Anguilla", value: 6 },
|
||||
{ text: "Antigua & Barbuda", value: 7 },
|
||||
{ text: "Argentina", value: 8 },
|
||||
{ text: "Armenia", value: 9 },
|
||||
{ text: "Australia", value: 10 },
|
||||
{ text: "Austria", value: 11 },
|
||||
{ text: "Azerbaijan", value: 12 },
|
||||
{ text: "Bahamas", value: 13 },
|
||||
{ text: "Bahrain", value: 14 },
|
||||
{ text: "Bangladesh", value: 15 },
|
||||
{ text: "Barbados", value: 16 },
|
||||
{ text: "Belarus", value: 17 },
|
||||
{ text: "Belgium", value: 18 },
|
||||
{ text: "Belize", value: 19 },
|
||||
{ text: "Benin", value: 20 },
|
||||
{ text: "Bermuda", value: 21 },
|
||||
{ text: "Bhutan", value: 22 },
|
||||
{ text: "Bolivia", value: 23 },
|
||||
{ text: "Bosnia & Herzegovina", value: 24 },
|
||||
{ text: "Botswana", value: 25 },
|
||||
{ text: "Brazil", value: 26 },
|
||||
{ text: "Brunei Darussalam", value: 27 },
|
||||
{ text: "Bulgaria", value: 28 },
|
||||
{ text: "Burkina Faso", value: 29 },
|
||||
{ text: "Myanmar/Burma", value: 30 },
|
||||
{ text: "Burundi", value: 31 },
|
||||
{ text: "Cambodia", value: 32 },
|
||||
{ text: "Cameroon", value: 33 },
|
||||
{ text: "Canada", value: 34 },
|
||||
{ text: "Cape Verde", value: 35 },
|
||||
{ text: "Cayman Islands", value: 36 },
|
||||
{ text: "Central African Republic", value: 37 },
|
||||
{ text: "Chad", value: 38 },
|
||||
{ text: "Chile", value: 39 },
|
||||
{ text: "China", value: 40 },
|
||||
{ text: "Colombia", value: 41 },
|
||||
{ text: "Comoros", value: 42 },
|
||||
{ text: "Congo", value: 43 },
|
||||
{ text: "Costa Rica", value: 44 },
|
||||
{ text: "Croatia", value: 45 },
|
||||
{ text: "Cuba", value: 46 },
|
||||
{ text: "Cyprus", value: 47 },
|
||||
{ text: "Czech Republic", value: 48 },
|
||||
{ text: "Democratic Republic of the Congo", value: 49 },
|
||||
{ text: "Denmark", value: 50 },
|
||||
{ text: "Djibouti", value: 51 },
|
||||
{ text: "Dominican Republic", value: 52 },
|
||||
{ text: "Dominica", value: 53 },
|
||||
{ text: "Ecuador", value: 54 },
|
||||
{ text: "Egypt", value: 55 },
|
||||
{ text: "El Salvador", value: 56 },
|
||||
{ text: "Equatorial Guinea", value: 57 },
|
||||
{ text: "Eritrea", value: 58 },
|
||||
{ text: "Estonia", value: 59 },
|
||||
{ text: "Ethiopia", value: 60 },
|
||||
{ text: "Fiji", value: 61 },
|
||||
{ text: "Finland", value: 62 },
|
||||
{ text: "France", value: 63 },
|
||||
{ text: "French Guiana", value: 64 },
|
||||
{ text: "Gabon", value: 65 },
|
||||
{ text: "Gambia", value: 66 },
|
||||
{ text: "Georgia", value: 67 },
|
||||
{ text: "Germany", value: 68 },
|
||||
{ text: "Ghana", value: 69 },
|
||||
{ text: "Great Britain", value: 70 },
|
||||
{ text: "Greece", value: 71 },
|
||||
{ text: "Grenada", value: 72 },
|
||||
{ text: "Guadeloupe", value: 73 },
|
||||
{ text: "Guatemala", value: 74 },
|
||||
{ text: "Guinea", value: 75 },
|
||||
{ text: "Guinea-Bissau", value: 76 },
|
||||
{ text: "Guyana", value: 77 },
|
||||
{ text: "Haiti", value: 78 },
|
||||
{ text: "Honduras", value: 79 },
|
||||
{ text: "Hungary", value: 80 },
|
||||
{ text: "Iceland", value: 81 },
|
||||
{ text: "India", value: 82 },
|
||||
{ text: "Indonesia", value: 83 },
|
||||
{ text: "Iran", value: 84 },
|
||||
{ text: "Iraq", value: 85 },
|
||||
{ text: "Israel and the Occupied Territories", value: 86 },
|
||||
{ text: "Italy", value: 87 },
|
||||
{ text: "Ivory Coast (Cote d'Ivoire)", value: 88 },
|
||||
{ text: "Jamaica", value: 89 },
|
||||
{ text: "Japan", value: 90 },
|
||||
{ text: "Jordan", value: 91 },
|
||||
{ text: "Kazakhstan", value: 92 },
|
||||
{ text: "Kenya", value: 93 },
|
||||
{ text: "Kosovo", value: 94 },
|
||||
{ text: "Kuwait", value: 95 },
|
||||
{ text: "Kyrgyz Republic (Kyrgyzstan)", value: 96 },
|
||||
{ text: "Laos", value: 97 },
|
||||
{ text: "Latvia", value: 98 },
|
||||
{ text: "Lebanon", value: 99 },
|
||||
{ text: "Lesotho", value: 100 },
|
||||
{ text: "Liberia", value: 101 },
|
||||
{ text: "Libya", value: 102 },
|
||||
{ text: "Liechtenstein", value: 103 },
|
||||
{ text: "Lithuania", value: 104 },
|
||||
{ text: "Luxembourg", value: 105 },
|
||||
{ text: "Republic of Macedonia", value: 106 },
|
||||
{ text: "Madagascar", value: 107 },
|
||||
{ text: "Malawi", value: 108 },
|
||||
{ text: "Malaysia", value: 109 },
|
||||
{ text: "Maldives", value: 110 },
|
||||
{ text: "Mali", value: 111 },
|
||||
{ text: "Malta", value: 112 },
|
||||
{ text: "Martinique", value: 113 },
|
||||
{ text: "Mauritania", value: 114 },
|
||||
{ text: "Mauritius", value: 115 },
|
||||
{ text: "Mayotte", value: 116 },
|
||||
{ text: "Mexico", value: 117 },
|
||||
{ text: "Moldova", value: 118 },
|
||||
{ text: "Mongolia", value: 119 },
|
||||
|
||||
];
|
||||
|
||||
ReactDOM.render(<LazySelectExample />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
category: Components
|
||||
type: 数据录入
|
||||
title: Select
|
||||
subtitle: 下拉选择框
|
||||
cols: 1
|
||||
group: Selector 选择框
|
||||
---
|
||||
|
||||
该组件用来设置下拉框，需设置文本显示值text和数据库存取值value，同时可设置初始化选中项，支持自定义样式和onChange事件的回调。
|
||||
|
||||
## API
|
||||
|
||||
| 方法名 | 描述 | 参数 | 返回 |
|
||||
|---|---|---|---|
|
||||
|getValue|用于获取选定项的值在下拉框中|不|下拉框选择配置项的值|
|
||||
|validate|用于手动进行非空检查返回是否通过|不|检查结果bool类型|
|
||||
|focus|设置下拉框焦点|No|不|
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名称 | 描述 | 输入 | 默认 |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| options | 设置传入数据<br> [{`text`: "Create", //页面展示值<br> `value`: 1, //.该值作为回调参数传入，*每个列表项有唯一的回调参数*。<br> `icon`:"image/create-default.png",//下拉项中的图标（可不定义）<br> `iconActive`:"image/create-selected.png" //下拉项选中时的图标（可不定义）<br> `label`: true // //将列表项设置为标签。（可不定义）<br>},<br> {text: "Delete",value: 3, icon:"image/delete-default.png", iconActive:"image/delete-selected.png" }]; | array | |
|
||||
| id | 设置Select的id | string | |
|
||||
| style | 通过自定义style来改变组件的的整体样式 例如:margin padding display | object | |
|
||||
| className | 通过自定义class来改变组件的整体样式 例如:margin padding display | string | |
|
||||
| labelClassName | 通过添加class的方式自定义label的名称的样式 | string | |
|
||||
| labelStyle | 通过添加style的方式自定义label的名称的样式 | object | |
|
||||
| selectClassName | 通过自定义class来改变select的样式 例如:border color background width height | string | |
|
||||
| selectStyle | 通过自定义style来改变select的样式 例如:border color background width height | object | |
|
||||
| optionClassName | 通过自定class来改变option的样式 | string | |
|
||||
| optionStyle | 通过自定style来改变option的样式, *set optionStyle.width for setting the width of the popup window | object | |
|
||||
| iconClassName | 通过添加class的方式自定义下拉框中的图标以及样式 | string | |
|
||||
| iconStyle | 通过添加style的方式自定义下拉框中的图标以及样式 | object | |
|
||||
| label | 设置下拉框的名称文字 | string | |
|
||||
| labelPosition | 设置组件的名称文字的位置 before代表名称文字在组件的左边，after代表名称文字在组件的右边 | enum:<br> "before"<br> "after"<br> | "before" |
|
||||
| selectedIndex | 设置选中的index,此处为数据属性options中对应的index | number | |
|
||||
| value | 通过设置value值来选中select中的对应项 | any | |
|
||||
| disabled | 设置组件的灰化 | bool | false |
|
||||
| defaultLabel | 在列表中指定默认的建议文本。| string | |
|
||||
| enablHorzScroll | Set the horizontal Scrollbar for the popup window | bool | false |
|
||||
| hintType | 显示提示信息 | enum:<br> "div"<br> "tip"<br> | 'div' |
|
||||
| required | 设置组件是否为必填项 | bool | |
|
||||
| zIndex | select Popup zIndex can be override by the user | number | 9999 |
|
||||
| onChange | 设置select的onChange事件，参数为：<br><br>**签名:**<br>`function(value: any, oldValue: any, text: any, oldText: any) => void`<br>*value:* 当前选中的select的value值<br>*oldValue:* 组件上一次选中值<br>*text:* Selected Displayed Text<br>*oldText:* Selected Old Displayed Text | function | |
|
||||
| onFocus | 设置select的onFocus事件，参数为：<br><br>**签名:**<br>`function(event: object) => void`<br>*event:* 原生dom的聚焦事件 | function | |
|
||||
| onBlur | 设置select的onBlur事件，参数为：<br><br>**签名:**<br>`function(event: object) => void`<br>*event:* 原生dom的聚焦事件 | function | |
|
||||
| popupDirection | 定义弹出方向选择控制 | enum:<br> 'top'<br> 'bottom'<br> | |
|
||||
| lazySearch | Object that defines the lazy search options. If this property is defined, then the records that are being shown in the search suggestion drop down will be paged, and lazy loaded through the defined callback method. User need to provide only a set of 10 records at a time. The data structure is as : <br>`totalRecords`: The total number of search results for the searched string <br>`onLoadRecords`: The callback that will load next set of the data to be displayed in the popup. This method will have the index of the first element in the view port as the parameter. [Under development]| object | |
|
||||
| isScrollAlwaysDisplay | 设置滚动条一直出现 | bool | false |
|
||||
| tipStyle | 通过添加tipStyle来自定义提示框的样式 | object | |
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
---
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: 列选择选项
|
||||
en-US: Additional Data
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import Select from 'eview-ui/Select';
|
||||
import Checkbox from 'eview-ui/Checkbox';
|
||||
import DropDown from 'eview-ui/DropDown';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
const optionsValue = [{ text: "5", value: 5 }, { text: "10", value: 10 }, { text: "20", value: 20 }];
|
||||
const columns = [
|
||||
{
|
||||
title: 'CheckBox',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
key: 'Name_1',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
},
|
||||
{
|
||||
title: 'select ',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
key: 'Name_2',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
renderType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'age_1',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
},
|
||||
{
|
||||
title: 'DropDown',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
key: 'dropDown_1',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
},
|
||||
{
|
||||
title: 'Progress',
|
||||
renderType: Table.ColumnRenderType.PROGRESS_BAR,
|
||||
options: {
|
||||
format: 'percent',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default class TableAdditionalData extends React.Component {
|
||||
|
||||
handleCellEdit = (old, newVal, cell, row) => {
|
||||
console.log(`Editing the cell value ... Old Value:- ${old}, New Value:- ${newVal}, Edited Cell:- ${cell}, Edited Row:- ${row}`);
|
||||
};
|
||||
handleEditingCellBlur = (cell, row) => {
|
||||
console.log('handleEditingCellBlur .. ', cell, row);
|
||||
};
|
||||
handleChangeCheck = (a, b, event, data) => {
|
||||
console.log('handleChange..additional data: ', data);
|
||||
};
|
||||
handleClickButton = (e, data) => {
|
||||
console.log('handleClickButton: ', data);
|
||||
};
|
||||
|
||||
render() {
|
||||
let switchStyle = { background: "blue" };
|
||||
const data = [1, 2];
|
||||
|
||||
let options = [{ text: "Disabled", value: 1, disabled: true }, { text: "UK", value: 2 }, { text: "USA", value: 3 },
|
||||
{ text: "UFO", value: 5 }, { text: "China", value: 4 }];
|
||||
|
||||
let checkedState = null; let disabledState = null;
|
||||
|
||||
const rows = [];
|
||||
for (let c = 1; c <= 5; c++) {
|
||||
rows.push([
|
||||
<Checkbox value="1" label="The Internet" checked={true} additionalData={{ row: c, column: 1 }} onChange={this.handleChangeCheck}></Checkbox>,
|
||||
<Select options={optionsValue} />,
|
||||
'28 dfgdfg_' + c,
|
||||
<DropDown text="text" position="left" data={options} />,
|
||||
Math.floor((Math.random() * 100) + 1) //Return a random number between 1 and 100
|
||||
]);
|
||||
}
|
||||
const [version, theme] = getDemoVersion();
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataset={rows}
|
||||
pageSize={10}
|
||||
ref={table => { this.table = table; }}
|
||||
className="tableColor"
|
||||
height={310}
|
||||
onEdit={this.handleCellEdit}
|
||||
onEditingCellBlur={this.handleEditingCellBlur}
|
||||
useCustomToolTip={false}
|
||||
/>
|
||||
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableAdditionalData />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 数据作为对象数组
|
||||
en-US: Data as Array of Objects
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import img1 from "@images/table_1";
|
||||
import img2 from "@images/table_2";
|
||||
import expend from "@images/expend";
|
||||
import Button from "eview-ui/Button";
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class TableDemo extends React.Component {
|
||||
|
||||
onRowRightClick = (e, row) => {
|
||||
console.log(row);
|
||||
};
|
||||
|
||||
handleRowClick = (event, row) => {
|
||||
console.log("RowClick event...", row);
|
||||
};
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
const columns = [
|
||||
{
|
||||
title: "VPN Name",
|
||||
width: 160,
|
||||
allowSort: false,
|
||||
key: "hideV"
|
||||
},
|
||||
{
|
||||
title: "State",
|
||||
render: cell => {
|
||||
if (cell === 'TO BE') {
|
||||
return (
|
||||
<div>
|
||||
<img src={img1} style={{ verticalAlign: 'bottom' }} alt="TO BE" />
|
||||
{' '}
|
||||
TO BE
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<img src={img2} style={{ verticalAlign: 'bottom' }} alt="Active" />
|
||||
{' '}
|
||||
Active
|
||||
</div>
|
||||
);
|
||||
},
|
||||
ellipsis: true,
|
||||
width: 230,
|
||||
sort: "asc",
|
||||
getCompareValue: v => v.age,
|
||||
key: "hideX"
|
||||
},
|
||||
{
|
||||
title: "Site",
|
||||
RenderType: Table.ColumnRenderType.TEXT,
|
||||
ellipsis: true,
|
||||
selected: true,
|
||||
key: "hideY"
|
||||
},
|
||||
{
|
||||
title: "Alarm",
|
||||
RenderType: Table.ColumnRenderType.TEXT,
|
||||
ellipsis: true,
|
||||
key: "hideZ"
|
||||
}
|
||||
];
|
||||
const rows = [];
|
||||
rows.push({
|
||||
hideV: "R&D VPN2 YHHHHHHHHHHHHHHHHHHHHHHHHH",
|
||||
hideX: "TO BE",
|
||||
hideY: "3",
|
||||
hideZ: "ICMP Echo",
|
||||
hideM: "ICMP Echo"
|
||||
});
|
||||
rows.push({
|
||||
hideV: "Shop Storage",
|
||||
hideX: "Active",
|
||||
hideY: "3",
|
||||
hideZ: "ICMP Echo XXXXXXXXXXXXXkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk"
|
||||
});
|
||||
rows.push({
|
||||
hideV: "IT Link XXXXXXXXXXXXXkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk bbb",
|
||||
hideX: "TO BE",
|
||||
hideY: "7",
|
||||
hideZ: "ICMP Echo"
|
||||
});
|
||||
rows.push({
|
||||
hideV: "R&D VPN1",
|
||||
hideX: "Active",
|
||||
hideY: "3",
|
||||
hideZ: "ICMP Echo"
|
||||
});
|
||||
rows.push({
|
||||
hideV: "R&D VPN6",
|
||||
hideX: "Active",
|
||||
hideY: "5",
|
||||
hideZ: "ICMP Echo"
|
||||
});
|
||||
rows.push({
|
||||
hideV: "R&D VPN2",
|
||||
hideX: "TO BE",
|
||||
hideY: "7",
|
||||
hideZ: "ICMP Echo"
|
||||
});
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
|
||||
<p className='note'>
|
||||
This demo takes row data as an <code>array</code> of <code>object</code>s(against the above demo which takes <code>array</code> of <code>array</code>s).
|
||||
<br />
|
||||
Please note that each column <code>key</code> values should be unique for this data structure to work properly.
|
||||
</p>
|
||||
|
||||
<Table
|
||||
onRowRightClick={this.onRowRightClick}
|
||||
columns={columns}
|
||||
dataset={rows}
|
||||
pageSize={10}
|
||||
hideColumns={["hide", "hideX"]}
|
||||
onRowClick={this.handleRowClick}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableDemo />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本属性设置
|
||||
en-US: Basic Setting
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import img1 from '@images/table_1';
|
||||
import img2 from '@images/table_2';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
const rows = [];
|
||||
rows.push(['R&D VPN2', 'TO BE', 3, 'ICMP Echo']);
|
||||
rows.push(['Shop Storage', 'Active', 3, 'ICMP Echo']);
|
||||
rows.push(['IT Link', 'Active', 7, 'Critical']);
|
||||
rows.push(['R&D VPN1', 'Active', 3, 'Major']);
|
||||
rows.push(['R&D VPN6', 'TO BE', 5, 'ICMP Echo']);
|
||||
|
||||
const childTableRowCheckRecord = {};
|
||||
export default class TableBasic extends React.Component {
|
||||
|
||||
state = {
|
||||
checkedRows: []
|
||||
};
|
||||
handleHeaderCheck = (row, checkedRows, e) => {
|
||||
console.log("header checked...")
|
||||
};
|
||||
handleRowCheckForChildTable = (selects, curParentRowIndex) => {
|
||||
childTableRowCheckRecord[curParentRowIndex] = selects;
|
||||
};
|
||||
|
||||
handleRowExpend = (row) => {
|
||||
let columns = [
|
||||
{
|
||||
title: 'VPN Name',
|
||||
width: 300,
|
||||
key: 'col_1',
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
width: 300,
|
||||
key: 'col_2',
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
width: 300,
|
||||
key: 'col_3',
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
allowSort: false,
|
||||
key: 'col_4',
|
||||
},
|
||||
];
|
||||
const rowsdata = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
rowsdata.push([`R&D VPN2${i}`, 'Active', i, 'ICMP Echo']);
|
||||
}
|
||||
return (<div style={{ padding: "20px", background: "#efefef" }}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataset={rowsdata}
|
||||
enableCheckBox
|
||||
headerCheckBoxSortAllow={true}
|
||||
checkedRows={childTableRowCheckRecord[row.rowIndex]}
|
||||
onRowCheck={(curRow, rows) => this.handleRowCheckForChildTable(rows, row.rowIndex)}
|
||||
ref={innerTable => { this.innerTable = innerTable; }} /></div>);
|
||||
}
|
||||
handleItemClick1 = (item) => {
|
||||
let res = [];
|
||||
if (item.value === 1) {
|
||||
rows.forEach((_, index) => res.push(index));
|
||||
} else if (item.value === 2) {
|
||||
rows.forEach((_, index) => {
|
||||
(index + 1) % 2 !== 0 && res.push(index);
|
||||
});
|
||||
} else if (item.value === 3) {
|
||||
rows.forEach((_, index) => {
|
||||
(index + 1) % 2 === 0 && res.push(index);
|
||||
});
|
||||
}
|
||||
this.setState({ checkedRows: res})
|
||||
};
|
||||
renderStateColumn(cell) {
|
||||
if (cell === 'TO BE') {
|
||||
return (
|
||||
<div>
|
||||
<img src={img1} style={{ verticalAlign: 'bottom' }} alt="TO BE" />
|
||||
{' '}
|
||||
TO BE
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<img src={img2} style={{ verticalAlign: 'bottom' }} alt="Active" />
|
||||
{' '}
|
||||
Active
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
const columns = [
|
||||
{
|
||||
title: 'VPN Name',
|
||||
key: 'c_1',
|
||||
id: "col_1",
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
key: 'c_2',
|
||||
render: cell => this.renderStateColumn(cell),
|
||||
allowSort: false,
|
||||
id: "col_2",
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
display: true, // Hide column,
|
||||
id: "col_3",
|
||||
key: 'c_3',
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
key: 'c_4',
|
||||
},
|
||||
];
|
||||
|
||||
let options = [{ text: "Select All Data", value: 1 },
|
||||
{ text: "Select Odd Rows", value: 2 },
|
||||
{ text: "Select Even Rows", value: 3 }];
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<Table
|
||||
columns={columns} // Column Details
|
||||
dataset={rows} // Data Set
|
||||
selectedRowIndex={2} // Row ID 2 is selected.
|
||||
enableColumnFilter //Allow column to be selected.
|
||||
checkBoxOptions={options}
|
||||
onRowExpend={this.handleRowExpend}
|
||||
onRowCheck={this.handleHeaderCheck}
|
||||
enableCheckBox
|
||||
checkedRows={this.state.checkedRows}
|
||||
enableRowExpand
|
||||
disableRowExpand={[2]}
|
||||
checkBoxPopupData={{ data: options, optionStyle: { width: '15rem' }, onItemClick: this.handleItemClick1 }}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableBasic />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 基本属性设置(list)
|
||||
en-US: Table Paging (list default) with Fixed Column'
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import Button from 'eview-ui/Button';
|
||||
import DivMessage from 'eview-ui/DivMessage';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class TableMultiCheck extends React.Component {
|
||||
|
||||
handlePaging = (currentPage) => {
|
||||
let checkedRows = this.table1.getCheckedRowsIndexes();
|
||||
let start = (this.state.currentPage - 1) * this.state.pageSize;
|
||||
//选中
|
||||
for (let position = start; position < start + this.state.pageSize; position++) {
|
||||
let rowId = position - start;
|
||||
if (checkedRows.indexOf(rowId) != -1) {
|
||||
this.state.rows[position].check = true;
|
||||
} else {
|
||||
this.state.rows[position].check = false;
|
||||
}
|
||||
}
|
||||
this.setState({currentPage});
|
||||
};
|
||||
|
||||
handlePageSize = (pageSize) => {
|
||||
|
||||
let checkedRows = this.table1.getCheckedRowsIndexes();
|
||||
let start = (this.state.currentPage - 1) * this.state.pageSize;
|
||||
//选中
|
||||
for (let position = start; position < start + this.state.pageSize; position++) {
|
||||
let rowId = position - start;
|
||||
if (checkedRows.indexOf(rowId) != -1) {
|
||||
this.state.rows[position].check = true;
|
||||
} else {
|
||||
this.state.rows[position].check = false;
|
||||
}
|
||||
}
|
||||
this.setState({pageSize});
|
||||
};
|
||||
|
||||
onFilterOkClick = (leftItems, rightItems) => {
|
||||
console.log("leftItems:", leftItems);
|
||||
console.log("rightItems:", rightItems);
|
||||
};
|
||||
|
||||
handleRowCHeckClick = (row, checkedRows, e) => {
|
||||
let start = (this.state.currentPage - 1) * this.state.pageSize;
|
||||
let position = start + row.id;
|
||||
//选中
|
||||
if (checkedRows.indexOf(row.id) != -1) {
|
||||
this.state.rows[position].check = true;
|
||||
} else {
|
||||
this.state.rows[position].check = false;
|
||||
}
|
||||
};
|
||||
|
||||
onHeaderClick = (checkedRowsRef) => {
|
||||
console.log("call back");
|
||||
let start = (this.state.currentPage - 1) * this.state.pageSize;
|
||||
let toIndex = this.state.currentPage * this.state.pageSize;
|
||||
|
||||
if (toIndex > this.state.recordCount) {
|
||||
toIndex = this.state.recordCount;
|
||||
}
|
||||
for (let i = start; i < toIndex; i++) {
|
||||
//去勾选
|
||||
if (checkedRowsRef.length == 0) {
|
||||
this.state.rows[i].check = false;
|
||||
} else {
|
||||
this.state.rows[i].check = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onrowClick = (row, e) => {
|
||||
let checkedRows = this.table1.getCheckedRowsIndexes();
|
||||
let start = (this.state.currentPage - 1) * this.state.pageSize;
|
||||
let position = start + row.id;
|
||||
if (this.rowClickFlag) {
|
||||
//选中
|
||||
if (checkedRows.indexOf(row.id) != -1) {
|
||||
this.state.rows[position].check = false;
|
||||
} else {
|
||||
this.state.rows[position].check = true;
|
||||
}
|
||||
this.setState({selectedRowIndex: row.id});
|
||||
}
|
||||
};
|
||||
|
||||
handleOnMouseUpOnRowForDrag = (startRow, endRow, checkedRows, e) => {
|
||||
console.log("check rows: " + checkedRows);
|
||||
console.log("start row: " + startRow);
|
||||
console.log("end row: " + endRow);
|
||||
};
|
||||
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
|
||||
let columns = [
|
||||
{
|
||||
title: 'VPN Name',
|
||||
width: 300,
|
||||
freezeCol: true,
|
||||
key: 'col_1',
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
width: 300,
|
||||
key: 'col_2',
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
width: 300,
|
||||
key: 'col_3',
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
allowSort: false,
|
||||
freezeCol: true,
|
||||
key: 'col_4',
|
||||
},
|
||||
];
|
||||
|
||||
const rows = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
rows.push([`R&D VPN2${i}`, 'Active', i, 'ICMP Echo']);
|
||||
}
|
||||
|
||||
this.state = {
|
||||
columns: columns,
|
||||
rows: rows,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
recordCount: 100,
|
||||
msg: '',
|
||||
slidingMultipleSelected: false,
|
||||
selectedRowIndex: undefined
|
||||
};
|
||||
|
||||
this.rowClickFlag = false;
|
||||
}
|
||||
|
||||
handleGetCheckedRow = () => {
|
||||
const rows = this.table1.getCheckedRowsData();
|
||||
let checkedRows = this.table1.getCheckedRowsIndexes();
|
||||
let start = (this.state.currentPage - 1) * this.state.pageSize;
|
||||
//选中
|
||||
for (let position = start; position < start + this.state.pageSize; position++) {
|
||||
let rowId = position - start;
|
||||
if (checkedRows.indexOf(rowId) != -1) {
|
||||
this.state.rows[position].check = true;
|
||||
} else {
|
||||
this.state.rows[position].check = false;
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
GetCheckedRowsData：
|
||||
<br/>
|
||||
{rows
|
||||
.map(row => `[${row.map(v => v.toString()).join(',')}]`)
|
||||
.join(',')}
|
||||
</div>
|
||||
),
|
||||
});
|
||||
};
|
||||
handleRowTrigerCHeckBox = () => {
|
||||
this.rowClickFlag = !this.rowClickFlag;
|
||||
};
|
||||
handleMouseMoveTrigerCHeckBox = () => {
|
||||
if (this.state.slidingMultipleSelected) {
|
||||
this.setState({slidingMultipleSelected: false});
|
||||
} else {
|
||||
this.setState({slidingMultipleSelected: true});
|
||||
}
|
||||
let checkedRows = this.table1.getCheckedRowsIndexes();
|
||||
let start = (this.state.currentPage - 1) * this.state.pageSize;
|
||||
//选中
|
||||
for (let position = start; position < start + this.state.pageSize; position++) {
|
||||
let rowId = position - start;
|
||||
if (checkedRows.indexOf(rowId) != -1) {
|
||||
this.state.rows[position].check = true;
|
||||
} else {
|
||||
this.state.rows[position].check = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
onHeaderColumnSortFunc = (e, sort) => {
|
||||
console.log("sort type: " + sort);
|
||||
};
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
let buttonStyle = {marginRight: "5px"};
|
||||
const rowsdata = [];
|
||||
let toIndex = this.state.currentPage * this.state.pageSize;
|
||||
|
||||
if (toIndex > this.state.recordCount) {
|
||||
toIndex = this.state.recordCount;
|
||||
}
|
||||
|
||||
let start = (this.state.currentPage - 1) * this.state.pageSize;
|
||||
|
||||
if (start > toIndex) {
|
||||
start = toIndex - this.state.pageSize;
|
||||
this.setState({currentPage: this.state.recordCount / this.state.pageSize});
|
||||
}
|
||||
|
||||
let checkedRows = [];
|
||||
for (let i = start; i < toIndex; i++) {
|
||||
rowsdata.push(this.state.rows[i]);
|
||||
if (this.state.rows[i].check) {
|
||||
checkedRows.push(i - start);
|
||||
}
|
||||
}
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div>
|
||||
<Button onClick={this.handleGetCheckedRow} style={buttonStyle} text="Read Selected Checked Rows Data"/>
|
||||
<Button onClick={this.handleRowTrigerCHeckBox} style={buttonStyle} text="open rowClick trigger checkbox"/>
|
||||
<Button onClick={this.handleMouseMoveTrigerCHeckBox} style={buttonStyle} text="mouse move trigger checkbox"/>
|
||||
</div>
|
||||
<div>
|
||||
<Table
|
||||
maxHeight={700}
|
||||
columns={this.state.columns}
|
||||
dataset={rowsdata}
|
||||
pageSize={this.state.pageSize}
|
||||
currentPage={this.state.currentPage}
|
||||
recordCount={this.state.recordCount}
|
||||
onPageChange={this.handlePaging}
|
||||
onPageSizeChange={this.handlePageSize}
|
||||
enableCheckBox
|
||||
enablePagination
|
||||
enableColumnFilter
|
||||
itemOrderChanger
|
||||
mutiSelectEnable={true}
|
||||
selectedRowIndex={this.state.selectedRowIndex}
|
||||
splitPagination={true}
|
||||
onFilterOkClick={this.onFilterOkClick}
|
||||
onRowCheck={this.handleRowCHeckClick}
|
||||
onHeaderCheck={this.onHeaderClick}
|
||||
checkedRows={checkedRows}
|
||||
headerCheckBoxSortAllow={true}
|
||||
onRowClick={this.onrowClick}
|
||||
slidingMultipleSelected={this.state.slidingMultipleSelected}
|
||||
onMouseUpOnRowForDrag={this.handleOnMouseUpOnRowForDrag}
|
||||
onHeaderColumnSort={this.onHeaderColumnSortFunc}
|
||||
ref={table1 => {
|
||||
this.table1 = table1;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<DivMessage text={this.state.msg} type="success" style={{marginTop: '10px', width: '100%'}}/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableMultiCheck />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 基本属性设置(select)
|
||||
en-US: Table Paging (select)
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import img1 from '@images/table_1';
|
||||
import img2 from '@images/table_2';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
export default class TablePaging extends React.Component {
|
||||
state = {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
recordCount: 100,
|
||||
};
|
||||
|
||||
handlePaging = (currentPage) => {
|
||||
this.setState({ currentPage });
|
||||
};
|
||||
|
||||
handlePageSize = (pageSize) => {
|
||||
this.setState({ pageSize });
|
||||
};
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
const columns = [
|
||||
{
|
||||
title: 'VPN Name',
|
||||
width: '25%',
|
||||
enableRowMoveUpDown: true,
|
||||
key: 'col_1',
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
width: '25%',
|
||||
key: 'col_2',
|
||||
render: cell => {
|
||||
if (cell === 'TO BE') {
|
||||
return (
|
||||
<div>
|
||||
<img
|
||||
src={img1}
|
||||
style={{ verticalAlign: 'bottom' }}
|
||||
alt="TO BE"
|
||||
/>
|
||||
{' '}
|
||||
TO BE
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<img
|
||||
src={img2}
|
||||
style={{ verticalAlign: 'bottom' }}
|
||||
alt="Active"
|
||||
/>
|
||||
{' '}
|
||||
Active
|
||||
</div>
|
||||
);
|
||||
},
|
||||
allowSort: false,
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
width: '25%',
|
||||
key: 'col_3',
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
width: '25%',
|
||||
key: 'col_4',
|
||||
},
|
||||
];
|
||||
const rows = [];
|
||||
let toIndex = this.state.currentPage * this.state.pageSize;
|
||||
if (toIndex > this.state.recordCount) {
|
||||
toIndex = this.state.recordCount;
|
||||
}
|
||||
for (let i = (this.state.currentPage - 1) * this.state.pageSize; i < toIndex; i++) {
|
||||
rows.push([`R&D VPN2${i}`, 'Active', i, 'ICMP Echo']);
|
||||
}
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme} locale='zh'>
|
||||
<div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataset={rows}
|
||||
enablePagination
|
||||
pageSize={this.state.pageSize}
|
||||
currentPage={this.state.currentPage}
|
||||
recordCount={this.state.recordCount}
|
||||
onPageChange={this.handlePaging}
|
||||
onPageSizeChange={this.handlePageSize}
|
||||
pagingType="select"
|
||||
/>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TablePaging />, mountNode);
|
||||
```
|
||||
|
|
@ -0,0 +1,409 @@
|
|||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 基本属性设置
|
||||
en-US: TableCell ClassName Update and set Focus to column
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
TableCell ClassName Update and set Focus to column
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import Dialog from 'eview-ui/Dialog';
|
||||
import Select from 'eview-ui/Select';
|
||||
import Button from 'eview-ui/Button';
|
||||
import PopUpMenu from 'eview-ui/PopUpMenu';
|
||||
import PropTypes from 'prop-types';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
const events = {
|
||||
once(el, type, callback) {
|
||||
const typeArray = type ? type.split(' ') : [];
|
||||
const recursiveFunction = (event) => {
|
||||
event.target.removeEventListener(event.type, recursiveFunction);
|
||||
return callback(event);
|
||||
};
|
||||
|
||||
for (let i = typeArray.length - 1; i >= 0; i--) {
|
||||
this.on(el, typeArray[i], recursiveFunction);
|
||||
}
|
||||
},
|
||||
|
||||
on(el, type, callback) {
|
||||
if (el.addEventListener) {
|
||||
el.addEventListener(type, callback);
|
||||
} else {
|
||||
// IE8+ Support
|
||||
el.attachEvent(`on${type}`, () => {
|
||||
callback.call(el);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
off(el, type, callback) {
|
||||
if (el.removeEventListener) {
|
||||
el.removeEventListener(type, callback);
|
||||
} else {
|
||||
// IE8+ Support
|
||||
el.detachEvent(`on${type}`, callback);
|
||||
}
|
||||
},
|
||||
|
||||
isKeyboard(event) {
|
||||
return [
|
||||
'keydown',
|
||||
'keypress',
|
||||
'keyup',
|
||||
].indexOf(event.type) !== -1;
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
const isDescendant = (el, target) => {
|
||||
if (target !== null) {
|
||||
return el === target || isDescendant(el, target.parentNode);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const bind = (eventTypes, callback) => eventTypes.forEach((event) => events.on(document, event, callback));
|
||||
const unbind = (eventTypes, callback) => eventTypes.forEach((event) => events.off(document, event, callback));
|
||||
|
||||
const bindOnwindow = (eventTypes, callback) => eventTypes.forEach((event) => events.on(window, event, callback));
|
||||
const unbindOnwindow = (eventTypes, callback) => eventTypes.forEach((event) => events.off(window, event, callback));
|
||||
|
||||
class ClickAwayListener extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.element,
|
||||
onClickAway: PropTypes.func,
|
||||
eventTypes: PropTypes.array,
|
||||
eventTypesOnWindow: PropTypes.array,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
eventTypes: ['mousedown'],
|
||||
eventTypesOnWindow: [],
|
||||
};
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
this.isCurrentlyMounted = true;
|
||||
if (this.props.onClickAway) {
|
||||
bind(this.props.eventTypes, this.handleClickAway);
|
||||
bindOnwindow(this.props.eventTypesOnWindow, this.handleClickAway);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.onClickAway !== this.props.onClickAway) {
|
||||
unbind(this.props.eventTypes, this.handleClickAway);
|
||||
unbindOnwindow(this.props.eventTypesOnWindow, this.handleClickAway);
|
||||
if (this.props.onClickAway) {
|
||||
bind(this.props.eventTypes, this.handleClickAway);
|
||||
bindOnwindow(this.props.eventTypesOnWindow, this.handleClickAway);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.isCurrentlyMounted = false;
|
||||
unbind(this.props.eventTypes, this.handleClickAway);
|
||||
unbindOnwindow(this.props.eventTypesOnWindow, this.handleClickAway);
|
||||
}
|
||||
|
||||
isWindow(obj) {
|
||||
return typeof obj.closed !== 'undefined';
|
||||
}
|
||||
|
||||
handleClickAway = (event) => {
|
||||
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
// IE11 support, which trigger the handleClickAway even after the unbind
|
||||
if (this.isCurrentlyMounted) {
|
||||
|
||||
if (this.isWindow(event.target)) {
|
||||
this.props.onClickAway(event);
|
||||
return;
|
||||
}
|
||||
const el = ReactDOM.findDOMNode(this);
|
||||
if (document.documentElement.contains(event.target) && !isDescendant(el, event.target)) {
|
||||
this.props.onClickAway(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'VPN Name',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'VPN_ID',
|
||||
width: '120',
|
||||
customSort: true,
|
||||
render: cell => {
|
||||
return <div>{cell.value}</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'Site_ID',
|
||||
width: '120',
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'Alarm_ID',
|
||||
width: '120',
|
||||
},
|
||||
{
|
||||
title: 'Error',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'Error_ID',
|
||||
width: '120',
|
||||
},
|
||||
{
|
||||
title: 'Information',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'Information_ID',
|
||||
width: '120',
|
||||
},
|
||||
{
|
||||
title: 'Warn',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'Warn_ID',
|
||||
width: '120',
|
||||
},
|
||||
{
|
||||
title: 'CreateTime',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'CreateTime_ID',
|
||||
width: '120',
|
||||
},
|
||||
{
|
||||
title: 'DeleteTime',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'DeleteTime_ID',
|
||||
width: '220',
|
||||
},
|
||||
{
|
||||
title: 'ModifyTime',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'ModifyTime_ID',
|
||||
width: '220',
|
||||
},
|
||||
{
|
||||
title: 'MaxVal',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'MaxVal_ID',
|
||||
width: '240',
|
||||
},
|
||||
{
|
||||
title: 'MinVal',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'MinVal_ID',
|
||||
width: '240',
|
||||
},
|
||||
{
|
||||
title: 'ClearenceMaxval',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'ClearenceMaxval_ID',
|
||||
width: '240',
|
||||
},
|
||||
{
|
||||
title: 'ClearenceMinval',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'ClearenceMinval_ID',
|
||||
width: '240',
|
||||
},
|
||||
{
|
||||
title: 'ThresholdMaxVal',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'ThresholdMaxVal_ID',
|
||||
width: '240',
|
||||
},
|
||||
{
|
||||
title: 'ThresholdMinVal',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'ThresholdMinVal_ID',
|
||||
width: '240',
|
||||
},
|
||||
{
|
||||
title: 'Remark',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'Remark_ID',
|
||||
width: '200',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
export default class TableCellUpdate extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
columns:[],
|
||||
}
|
||||
}
|
||||
componentDidMount(){
|
||||
setTimeout(()=>{
|
||||
this.setState({columns:[...columns]}); // 模拟接口请求columns，初始值columns为空 ,渲染子table组件
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return <MainTable columns={this.state.columns}/>
|
||||
}
|
||||
}
|
||||
|
||||
class MainTable extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.selectedName = '';
|
||||
}
|
||||
state = {
|
||||
isMenuOpen: false,
|
||||
X: 100,
|
||||
Y: 100,
|
||||
offset: {
|
||||
X: 100,
|
||||
Y: 100
|
||||
},
|
||||
parentId: "",
|
||||
selectOptions: [],
|
||||
columnName: '',
|
||||
isOpen: false,
|
||||
value: undefined,
|
||||
}
|
||||
|
||||
handleCustomSort = (key, aValue, bValue) => {
|
||||
console.log("handleCustomSort: ", key, aValue, bValue);
|
||||
if(typeof(aValue) === "object") {
|
||||
aValue = aValue.value;
|
||||
}
|
||||
if(typeof(bValue) === "object") {
|
||||
bValue = bValue.value;
|
||||
}
|
||||
if (aValue > bValue) {
|
||||
return -1;
|
||||
} else if (aValue < bValue) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
onRowRightClick = (e, cbData) => {
|
||||
console.log("Table onRowRightClick cbData : ", cbData, e);
|
||||
|
||||
this.setState({
|
||||
isMenuOpen: true,
|
||||
X: e.pageX,
|
||||
Y: e.pageY,
|
||||
offset: {
|
||||
X: e.offsetX, Y: e.offsetY
|
||||
},
|
||||
parentId: cbData.id,
|
||||
columnName: this.selectedName,
|
||||
})
|
||||
}
|
||||
|
||||
handleMenuClick = (evt) => {
|
||||
console.log("Popup menu onClick : ", evt);
|
||||
}
|
||||
handleToSetFocus = (e) => {
|
||||
let columnsIfo = this.props.columns;
|
||||
let columnOptions = [];
|
||||
for (let i = 0; i < columnsIfo.length; i++) {
|
||||
columnOptions.push({ text: columnsIfo[i].title, value: i + 1, key: { i } })
|
||||
}
|
||||
this.setState({ iframeOpen: true, selectOptions: columnOptions, isMenuOpen: false });
|
||||
}
|
||||
hanleIframeClose = (e) => {
|
||||
this.setState({ iframeOpen: false, isMenuOpen: false });
|
||||
}
|
||||
handleSelectChange = (value, oldValue, text, oldText) => {
|
||||
this.selectedName = text;
|
||||
}
|
||||
handleClickOkButton = (e) => {
|
||||
|
||||
if (this.table) {
|
||||
this.table.setScrollPositionToColumn(this.selectedName);
|
||||
}
|
||||
this.setState({ iframeOpen: false, isMenuOpen: false });
|
||||
|
||||
}
|
||||
|
||||
handleCellClick = (cell, row, e) => {
|
||||
const cellValue = cell.value;
|
||||
this.setState({ isOpen: true, value: cellValue instanceof Object ? cellValue.value : cellValue });
|
||||
}
|
||||
|
||||
handleClick = ()=>{
|
||||
this.setState({isOpen:false});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const [version, theme] = getDemoVersion();
|
||||
const rows = [];
|
||||
rows.push([{ value: "AV&Pn", cellClassName: 'eui_cell_table_bgColor0', key: '0' }, '3', 'ICMP Echo', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
|
||||
rows.push([{ value: "Shop Storage", cellClassName: 'eui_cell_table_bgColor1', key: '1' }, '3', 'ICMP Echo ', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
|
||||
rows.push([{ value: "ITLink", cellClassName: 'eui_cell_table_bgColor2', key: '2' }, '7', 'ICMP Echo', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
|
||||
rows.push([{ value: "R&D VPN4", cellClassName: 'eui_cell_table_bgColor3', key: '3' }, '3', 'ICMP Echo', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
|
||||
rows.push([{ value: "R&D VPN6", cellClassName: 'eui_cell_table_bgColor4', key: '4' }, '5', 'ICMP Echo', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
|
||||
rows.push([{ value: "R&D VPN2", cellClassName: 'eui_cell_table_bgColor2', key: '5' }, '7', 'ICMP Echo', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
|
||||
|
||||
let PopUpMenuOptions = [
|
||||
{
|
||||
text: "FocusToSelectedColumn", serialno: 1, onClick: this.handleToSetFocus,
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
return (
|
||||
<ConfigProvider ConfigProvider version={version} theme={theme}>
|
||||
<Table onRowRightClick={this.onRowRightClick}
|
||||
columns={this.props.columns}
|
||||
dataset={rows}
|
||||
customSortFun={this.handleCustomSort}
|
||||
ref={table => { this.table = table; }}
|
||||
onCellClick={this.handleCellClick}
|
||||
key={this.props.columns}
|
||||
/>
|
||||
<PopUpMenu options={PopUpMenuOptions} parentId={this.state.parentId} isOpen={this.state.isMenuOpen} X={this.state.X} Y={this.state.Y} offset={this.state.offset}
|
||||
onClick={this.handleMenuClick}></PopUpMenu>
|
||||
<ClickAwayListener eventTypes={['mousewheel', 'mousedown']} eventTypesOnWindow={['resize']}>
|
||||
<Dialog
|
||||
title='Hello React'
|
||||
isOpen={this.state.iframeOpen}
|
||||
onClose={this.hanleIframeClose}
|
||||
modal={true}
|
||||
size={[300, 200]}
|
||||
style={{ minWidth: '400px', minHeight: '200px' }}
|
||||
children={<div><Select options={this.state.selectOptions} ref={(select) => this.select = select} onChange={this.handleSelectChange} />
|
||||
<Button text="ok" onClick={this.handleClickOkButton} /></div>}
|
||||
/>
|
||||
</ClickAwayListener>
|
||||
<Dialog title={'Dialog'} isOpen={this.state.isOpen} onClose={this.handleClick} closeOnEscape
|
||||
children={<div>{this.state.value}</div>} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableCellUpdate />, mountNode);
|
||||
```
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
---
|
||||
order: 11
|
||||
title:
|
||||
zh-CN: 列依赖性
|
||||
en-US: Column Dependency
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import Button from 'eview-ui/Button';
|
||||
import DivMessage from 'eview-ui/DivMessage';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
const columns = [
|
||||
{
|
||||
title: 'VPN data Name',
|
||||
renderType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'vpndata',
|
||||
options: { isFocus: true }
|
||||
},
|
||||
{
|
||||
title: 'Select Site',
|
||||
renderType: Table.ColumnRenderType.SELECT,
|
||||
key: 'selectSite',
|
||||
options: [
|
||||
{ text: 'China', value: 1 },
|
||||
{ text: 'UK', value: 2 },
|
||||
{ text: 'USA', value: 3 },
|
||||
],
|
||||
render: (v, row, options, rowdata) => {
|
||||
if (options) {
|
||||
if (options[v - 1]) {
|
||||
return options[v - 1].text;
|
||||
} else {
|
||||
return options[0]
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Select Data',
|
||||
renderType: Table.ColumnRenderType.SELECT,
|
||||
key: 'DataSite',
|
||||
options: [
|
||||
{ text: 'CM Data', value: 1 },
|
||||
{ text: 'Vm data', value: 2 },
|
||||
{ text: 'OS Data', value: 3 },
|
||||
],
|
||||
render: (v, row, options, rowdata) => {
|
||||
if (options) {
|
||||
if (options[v - 1]) {
|
||||
return options[v - 1].text;
|
||||
} else {
|
||||
return options[0];
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const rows = [];
|
||||
rows.push(['R&D VPN2', 1, 1]);
|
||||
rows.push(['Shop Storage', 2, 1]);
|
||||
rows.push(['IT Link', 3, 3]);
|
||||
rows.push(['R&D VPN1', 3, 2]);
|
||||
rows.push(['R&D VPN6', 1, 1]);
|
||||
rows.push(['R&D VPN2', 2, 2]);
|
||||
|
||||
//Override the options
|
||||
const rows2 = [];
|
||||
//1st Row
|
||||
rows2.push({
|
||||
selectSite: {
|
||||
options: [
|
||||
{ text: 'Site A ', value: 1 },
|
||||
{ text: 'Site B ', value: 2 },
|
||||
{ text: 'Site C ', value: 3 },
|
||||
{ text: 'Site D ', value: 4 },
|
||||
]
|
||||
},
|
||||
DataSite: {
|
||||
options: [
|
||||
{ text: 'CM data ', value: 1 },
|
||||
{ text: 'junk data ', value: 2 },
|
||||
{ text: 'OS data ', value: 3 },
|
||||
{ text: 'VM data ', value: 4 },
|
||||
]
|
||||
},
|
||||
});
|
||||
|
||||
//2nd Row.. Nothing pushed, so default options will be considered
|
||||
rows2.push({});
|
||||
|
||||
//3rd Row.
|
||||
rows2.push({
|
||||
selectSite: {
|
||||
options: [
|
||||
{ text: 'NonEdit-1 ', value: 1 },
|
||||
{ text: 'NonEdit-2', value: 2 },
|
||||
{ text: 'NonEdit-3', value: 3 },
|
||||
{ text: 'NonEdit-4', value: 4 },
|
||||
],
|
||||
isEditable: false
|
||||
}
|
||||
});
|
||||
|
||||
export default class TableColumnDependency extends React.Component {
|
||||
|
||||
state = {
|
||||
rows2: rows2,
|
||||
rows: rows
|
||||
};
|
||||
|
||||
handleCellEdit = (old, newVal, cell, row, e) => {
|
||||
console.log(`Editing the cell value ... Old Value:- ${old}, New Value:- ${newVal}, Edited Cell:- ${cell}, Edited Row:- ${row}`);
|
||||
let id = 0;
|
||||
let editData = this.state.rows2;
|
||||
|
||||
const rowsData = this.state.rows.map(rows => {
|
||||
|
||||
if (row.id == id) { //This example only control the first row(0). Based on "Select Site" column, option of "Select Data" will be changed.
|
||||
rows[cell.cid] = newVal;
|
||||
if (cell.cid == 1) {
|
||||
if (newVal == 2) {
|
||||
editData[row.id] = {
|
||||
selectSite: {
|
||||
options: [
|
||||
{ text: 'Site A ', value: 1 },
|
||||
{ text: 'Site B ', value: 2 },
|
||||
{ text: 'Site C ', value: 3 },
|
||||
{ text: 'Site D ', value: 4 },
|
||||
]
|
||||
},
|
||||
DataSite: {
|
||||
options: [
|
||||
{ text: 'OS Data ', value: 1 },
|
||||
{ text: 'Cloud Data ', value: 2 },
|
||||
],
|
||||
isEditable: false
|
||||
},
|
||||
}
|
||||
|
||||
} else if (newVal == 3) {
|
||||
editData[row.id] = {
|
||||
selectSite: {
|
||||
options: [
|
||||
{ text: 'Site A ', value: 1 },
|
||||
{ text: 'Site B ', value: 2 },
|
||||
{ text: 'Site C ', value: 3 },
|
||||
{ text: 'Site D ', value: 4 },
|
||||
]
|
||||
},
|
||||
DataSite: {
|
||||
options: [
|
||||
{ text: 'Cloud Data ', value: 1 },
|
||||
],
|
||||
isEditable: false
|
||||
},
|
||||
}
|
||||
} else if (newVal == 4) {
|
||||
editData[row.id] = {
|
||||
selectSite: {
|
||||
options: [
|
||||
{ text: 'Site A ', value: 1 },
|
||||
{ text: 'Site B ', value: 2 },
|
||||
{ text: 'Site C ', value: 3 },
|
||||
{ text: 'Site D ', value: 4 },
|
||||
]
|
||||
},
|
||||
DataSite: {
|
||||
options: [
|
||||
{ text: 'Junk Data ', value: 1 },
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
} else {
|
||||
editData[row.id] = {
|
||||
selectSite: {
|
||||
options: [
|
||||
{ text: 'Site A ', value: 1 },
|
||||
{ text: 'Site B ', value: 2 },
|
||||
{ text: 'Site C ', value: 3 },
|
||||
{ text: 'Site D ', value: 4 },
|
||||
]
|
||||
},
|
||||
DataSite: {
|
||||
options: [
|
||||
{ text: 'Site data ', value: 1 },
|
||||
{ text: 'junk data ', value: 2 },
|
||||
{ text: 'OS data ', value: 3 },
|
||||
{ text: 'VM data ', value: 4 },
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
id++;
|
||||
return rows;
|
||||
})
|
||||
|
||||
this.setState({
|
||||
rows2: editData,
|
||||
rows: rowsData
|
||||
});
|
||||
};
|
||||
|
||||
handleEditingCellBlur = (cell, row) => {
|
||||
console.log('handleEditingCellBlur: ', cell, row);
|
||||
}
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataset={this.state.rows}
|
||||
onRowExpend={this.handleRowExpend}
|
||||
onEdit={this.handleCellEdit}
|
||||
onEditingCellBlur={this.handleEditingCellBlur}
|
||||
editOptions={this.state.rows2}
|
||||
ref={table => { this.table = table; }}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableColumnDependency />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,509 @@
|
|||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 开启列编辑
|
||||
en-US: Column Edit
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import Button from 'eview-ui/Button';
|
||||
import DivMessage from 'eview-ui/DivMessage';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
import img1 from '@images/table_1';
|
||||
import img2 from '@images/table_2';
|
||||
|
||||
let clientTimezoneRule = (year, id) => {
|
||||
|
||||
let ruleForYear = {
|
||||
dstEndTime: "2017-10-29 04:00:00",
|
||||
dstStartTime: "2017-03-26 03:00:00",
|
||||
endDuration: "-3600",
|
||||
startDuration: "3600"
|
||||
}
|
||||
return ruleForYear;
|
||||
}
|
||||
|
||||
let onEnterPress = () => {
|
||||
console.log("On Enter key press CallBack!!");
|
||||
}
|
||||
|
||||
const optionStyle = {
|
||||
items: 2
|
||||
};
|
||||
const customProps = {
|
||||
optionStyle: optionStyle,
|
||||
};
|
||||
const columns = [
|
||||
{
|
||||
title: 'VPN data Name',
|
||||
titleTipShow: 'never',
|
||||
renderType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
width: 150,
|
||||
key: 'vpndata',
|
||||
customSort: true,
|
||||
options: { isFocus: true },
|
||||
tipFormatter: (v) => {
|
||||
console.log("hello: ", v);
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'SelectSite',
|
||||
titleTipShow: 'always',
|
||||
titleTipData: "Custom Title for this header",
|
||||
renderType: Table.ColumnRenderType.SELECT,
|
||||
options: [
|
||||
{ text: 'China', value: 1 },
|
||||
{ text: 'UK', value: 2 },
|
||||
{ text: 'USA', value: 3 },
|
||||
],
|
||||
width: 100,
|
||||
isShowPopup: true,
|
||||
key: 'site',
|
||||
customProps: customProps,
|
||||
render: (v, row, options, rowdata) => {
|
||||
if (v === 1) {
|
||||
return 'China';
|
||||
} else if (v === 2) {
|
||||
return 'UK';
|
||||
}
|
||||
else if (v === 3) {
|
||||
return 'USA';
|
||||
}
|
||||
return 'Others';
|
||||
},
|
||||
tipFormatter: (v) => {
|
||||
console.log("v: ", v);
|
||||
if (v === 1) {
|
||||
return 'China';
|
||||
} else if (v === 2) {
|
||||
return 'UK';
|
||||
}
|
||||
else if (v === 3) {
|
||||
return 'USA';
|
||||
}
|
||||
return 'Others';
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Time',
|
||||
renderType: Table.ColumnRenderType.TIME_SELECTOR,
|
||||
width: 200,
|
||||
render: v => {
|
||||
let renderVal = '';
|
||||
if (v && v.length == 3) {
|
||||
renderVal = v[0] + ':' + v[1] + ':' + v[2];
|
||||
}
|
||||
if (v && v.length == 2) {
|
||||
renderVal = v[0] + ':' + v[1];
|
||||
}
|
||||
return renderVal;
|
||||
},
|
||||
options: { format: 'hh:mm:ss' },
|
||||
key: 'time'
|
||||
},
|
||||
{
|
||||
title: 'gender',
|
||||
width: 150,
|
||||
renderType: Table.ColumnRenderType.RADIO_GROUP,
|
||||
render: v => {
|
||||
if (v === 1) {
|
||||
return 'Male';
|
||||
} else if (v === 0) {
|
||||
return 'Female';
|
||||
}
|
||||
return 'Others';
|
||||
},
|
||||
options: [
|
||||
{ text: 'Male', value: 1 },
|
||||
{ text: 'Female', value: 0 },
|
||||
{ text: 'Others', value: 2 },
|
||||
],
|
||||
key: 'gender'
|
||||
},
|
||||
{
|
||||
title: 'Hobbies',
|
||||
width: 200,
|
||||
renderType: Table.ColumnRenderType.CHECK_BOX_GROUP,
|
||||
render: v => {
|
||||
if (v && v.length) {
|
||||
//Conctruct the value to be displayed
|
||||
var value = '';
|
||||
for (var i = 0; i < v.length; i++) {
|
||||
if (v[i] === 1) {
|
||||
value = value + 'Singing';
|
||||
} else if (v[i] === 2) {
|
||||
value = value + 'Swimming';
|
||||
}
|
||||
else if (v[i] === 3) {
|
||||
value = value + 'Movies';
|
||||
}
|
||||
else if (v[i] === 4) {
|
||||
value = value + 'Play';
|
||||
}
|
||||
value = value + ' ';
|
||||
}
|
||||
return value;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
options: [
|
||||
{ text: 'Singing', value: 1 },
|
||||
{ text: 'Swimming', value: 2 },
|
||||
{ text: 'Movies', value: 3 },
|
||||
{ text: 'Play', value: 4 },
|
||||
],
|
||||
|
||||
key: 'hobbies'
|
||||
},
|
||||
{
|
||||
title: 'Stamina',
|
||||
width: 150,
|
||||
options: {
|
||||
format: 'percent',
|
||||
},
|
||||
customSort: true
|
||||
},
|
||||
{
|
||||
title: 'Acitve',
|
||||
width: 100,
|
||||
renderType: Table.ColumnRenderType.CHECK_BOX,
|
||||
options: {
|
||||
label: 'Acitve',
|
||||
},
|
||||
render: v => {
|
||||
if (v) {
|
||||
return 'Active';
|
||||
}
|
||||
return 'DeActive';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'InputSelectSite',
|
||||
width: 200,
|
||||
renderType: Table.ColumnRenderType.INPUT_SELECT,
|
||||
options: [
|
||||
{ text: 'China', value: 1 },
|
||||
{ text: 'UK', value: 2 },
|
||||
{ text: 'USA', value: 3 },
|
||||
],
|
||||
onEnterCallBack: onEnterPress,
|
||||
key: 'inputsite',
|
||||
render: v => {
|
||||
if (v === 1) {
|
||||
return 'China';
|
||||
} else if (v === 2) {
|
||||
return 'UK';
|
||||
}
|
||||
else if (v === 3) {
|
||||
return 'USA';
|
||||
}
|
||||
return 'Others';
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
title: 'Date',
|
||||
renderType: Table.ColumnRenderType.DATE_PICKER,
|
||||
width: 200,
|
||||
options: { type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss', callBack: clientTimezoneRule },
|
||||
render: (value, rowData, options, row) => {
|
||||
return options ? options.updateValue : value ? typeof value == 'string' ? value : value.toDateString() : "";
|
||||
},
|
||||
key: 'date'
|
||||
|
||||
},
|
||||
];
|
||||
|
||||
var rows = [];
|
||||
rows.push(['R&D VPN2', 1, [10, 20, 20], 1, [1, 2], 12, true, 3, '2017-10-11 11:57:11']);
|
||||
rows.push(['Shop Storage', 2, [10, 20, 20], 1, [4], 28, true, 3, '2017-10-11 11:57:11']);
|
||||
rows.push(['IT Link', 3, [10, 20, 20], 1, [3, 4], 97, false, 2, '2017-10-11 11:57:11']);
|
||||
rows.push(['Long text example Long text example Long text example Long text example', 3, [10, 20, 20], 0, [2, 3], 66, true, 1, '2017-10-11 11:57:11']);
|
||||
rows.push(['R&D VPN6', 1, [10, 20, 20], 0, [2], 89, false, 1, '2017-10-11 11:57:11']);
|
||||
rows.push(['R&D VPN2', 2, [10, 20, 20], 0, [3], 91, false, 2, '2017-10-11 11:57:11']);
|
||||
|
||||
const cellstyl = {
|
||||
0: {
|
||||
'hobbies': 'testcellgreen',
|
||||
'site': 'testcellgreen',
|
||||
},
|
||||
1: {
|
||||
'hobbies': 'testcellgreen',
|
||||
'site': 'testcellblue',
|
||||
'gender': 'testcellpink'
|
||||
},
|
||||
2: {
|
||||
'hobbies': 'testcellgreen',
|
||||
'site': 'testcellblue',
|
||||
},
|
||||
3: {
|
||||
'hobbies': 'testcellgreen',
|
||||
'site': 'testcellred',
|
||||
},
|
||||
4: {
|
||||
'hobbies': 'testcellgreen',
|
||||
'site': 'testcellblue',
|
||||
},
|
||||
5: {
|
||||
'hobbies': 'testcellgreen',
|
||||
'site': 'testcellblue',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default class TableEdit extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
msg: null,
|
||||
showEmptyImage: true,
|
||||
disableRowIds: [],
|
||||
checkType: "multi",
|
||||
selectedIndex: [3]
|
||||
};
|
||||
}
|
||||
|
||||
handleCellEdit = (old, newVal, cell, row, e) => {
|
||||
console.log(`Editing the cell value ... Old Value:- ${old}, New Value:- ${newVal}, Edited Cell:- ${cell}, Edited Row:- ${row}`);
|
||||
}
|
||||
|
||||
handleEditingCellBlur = (cell, row) => {
|
||||
console.log('handleEditingCellBlur .. ', cell, row);
|
||||
}
|
||||
|
||||
handleRowCheck = (row, data) => {
|
||||
this.setState({ checkedRows: data , isRequiredToUpdateColumns: true})
|
||||
/* Get the state and order of the table save */
|
||||
console.log(this.table.state.columns)
|
||||
};
|
||||
|
||||
handleEditClick = () => {
|
||||
this.table.setRowEditable(2);
|
||||
};
|
||||
|
||||
hanldeChangeLastTwoColumns = () => {
|
||||
rows = [['R&D VPN2', 1, [10, 20, 20], 1, [1, 2], 12, true, '2017-10-11 11:57:11', 3]];
|
||||
this.setState({ selectedIndex: [2]})
|
||||
}
|
||||
|
||||
handleEditOtherOneClick = () => {
|
||||
this.table.setRowEditable(4);
|
||||
};
|
||||
|
||||
handleClearEdit = () => {
|
||||
this.table.setRowEditable();
|
||||
};
|
||||
|
||||
handleGetRow = () => {
|
||||
const row = this.table.getEditData();
|
||||
if (!row) {
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
getEditData：<br />
|
||||
null
|
||||
</div>
|
||||
),
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
getEditData：<br />
|
||||
[{row.map(v => v.toString()).join(',')}]
|
||||
</div>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
handleGetSelectedRow = () => {
|
||||
const row = this.table.getSelectedRowData();
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
getSelectedRowData<br />
|
||||
[{row.map(v => v.toString()).join(',')}]
|
||||
</div>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
handleGetAllRow = () => {
|
||||
const rows = this.table.getDataset();
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
getDataset：
|
||||
<br />
|
||||
[
|
||||
<br />
|
||||
{rows
|
||||
.map(row => `[${row.map(v => v.toString()).join(',')}]`)
|
||||
.join(',')}
|
||||
<br />
|
||||
]
|
||||
</div>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
handleGetCheckedRow = () => {
|
||||
const rows = this.table.getCheckedRowsData();
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
getCheckedRowsData：
|
||||
<br />
|
||||
[
|
||||
<br />
|
||||
{rows
|
||||
.map(row => `[${row.map(v => v.toString()).join(',')}]`)
|
||||
.join(',')}
|
||||
<br />
|
||||
]
|
||||
</div>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
onRowRightClick = (e, row) => {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
handleAutoFit = () => {
|
||||
this.table.setSizeColumnFit(0);
|
||||
};
|
||||
|
||||
onRClick = () => {
|
||||
this.table.reSetcolumnSize();
|
||||
};
|
||||
|
||||
onEmptyDataClick = () => {
|
||||
rows = [];
|
||||
this.setState({ showEmptyImage: true })
|
||||
};
|
||||
hanldeDisableRows = () => {
|
||||
this.setState({ disableRowIds: [0, 1, 2], checkedRows: this.table.getCheckedRowsIndexes(), selectedIndex: this.table.getSelectedRowIndex() });
|
||||
}
|
||||
hanldeEnableRows = () => {
|
||||
this.setState({ disableRowIds: [], checkedRows: this.table.getCheckedRowsIndexes(), selectedIndex: this.table.getSelectedRowIndex() });
|
||||
}
|
||||
|
||||
hanldeCheckType = () => {
|
||||
if (this.state.checkType === "single") {
|
||||
this.setState({ checkType: "multi" });
|
||||
}
|
||||
else {
|
||||
this.setState({ checkType: "single" });
|
||||
}
|
||||
}
|
||||
|
||||
onEmptyDataNoImageClick = () => {
|
||||
rows = [];
|
||||
this.setState({ showEmptyImage: false })
|
||||
};
|
||||
|
||||
handleCustomSort = (key, aValue, bValue) => {
|
||||
console.log("handleCustomSort: ", key, aValue, bValue);
|
||||
if (aValue > bValue) {
|
||||
return -1;
|
||||
} else if (aValue < bValue) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
onColumnSizeChange = (columnD) => {
|
||||
console.log(columnD);
|
||||
}
|
||||
|
||||
onDoubleClickHandle = (row, cell, event) => {
|
||||
console.log("On double click", row, cell, event);
|
||||
}
|
||||
|
||||
GetColumnOrder = () => {
|
||||
console.log(this.table.state.columns)
|
||||
}
|
||||
|
||||
render() {
|
||||
let buttonStyle = { margin: "2px 2px" };
|
||||
const [version, theme] = getDemoVersion();
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
<Button onClick={this.handleEditClick} style={buttonStyle} text="Edit 3rd Row" />
|
||||
<Button onClick={this.handleEditOtherOneClick} style={buttonStyle} text="Edit 5th Row" />
|
||||
<Button onClick={this.handleGetRow} style={buttonStyle} text="Read Data of Edit Line" />
|
||||
<Button onClick={this.handleClearEdit} style={buttonStyle} text="Remove Edit" />
|
||||
<Button onClick={this.handleGetSelectedRow} style={buttonStyle} text="Read Selected Row Data" />
|
||||
<Button onClick={this.handleGetCheckedRow} style={buttonStyle} text="Read Selected Checked Rows Data" />
|
||||
<Button onClick={this.handleGetAllRow} style={buttonStyle} text="Read All Data" />
|
||||
</div>
|
||||
|
||||
<Table onRowRightClick={this.onRowRightClick}
|
||||
columns={columns}
|
||||
dataset={rows}
|
||||
checkedRows={this.state.checkedRows}
|
||||
pageSize={10}
|
||||
onRowExpend={this.handleRowExpend}
|
||||
customSortFun={this.handleCustomSort}
|
||||
enableColumnDrag
|
||||
enableCheckBox
|
||||
checkType={this.state.checkType}
|
||||
onRowCheck={this.handleRowCheck}
|
||||
selectedRowIndex={this.state.selectedIndex}
|
||||
disableRowIds={this.state.disableRowIds}
|
||||
onEdit={this.handleCellEdit}
|
||||
onEditingCellBlur={this.handleEditingCellBlur}
|
||||
cellClassName={cellstyl}
|
||||
mutiSelectEnable={true}
|
||||
onColumnSizeChange={this.onColumnSizeChange}
|
||||
onDoubleClick={this.onDoubleClickHandle}
|
||||
enableColumnFilter
|
||||
enableMulitiExpand
|
||||
className='eui_table_height'
|
||||
showEmptyImage={this.state.showEmptyImage}
|
||||
ref={table => { this.table = table; }}
|
||||
useCustomToolTip={true}
|
||||
customToolTipStyle={{ maxWidth: '12rem' }}
|
||||
itemOrderChanger={true}
|
||||
/>
|
||||
|
||||
{this.state.msg && <DivMessage text={this.state.msg} type="success" style={{ marginTop: '10px', width: '100%' }} />}
|
||||
|
||||
<br />
|
||||
<Button text={"1st column auto Fit"} style={buttonStyle} onClick={this.handleAutoFit} />
|
||||
<Button text={"columns reset"} style={buttonStyle} onClick={this.onRClick} />
|
||||
<Button text={"Empty Data"} style={buttonStyle} onClick={this.onEmptyDataClick} />
|
||||
<Button text={"Empty Data No Image"} style={buttonStyle} onClick={this.onEmptyDataNoImageClick} />
|
||||
<Button text={"Disable Rows"} style={buttonStyle} onClick={this.hanldeDisableRows} />
|
||||
<Button text={"EnableRows"} style={buttonStyle} onClick={this.hanldeEnableRows} />
|
||||
<Button text={"Check Type"} style={buttonStyle} onClick={this.hanldeCheckType} />
|
||||
<Button text={"Get column order"} style={buttonStyle} onClick={this.GetColumnOrder} />
|
||||
<br />
|
||||
<Button text={"After the last two columns exchange positions, click this button to pass parameters"} style={buttonStyle} onClick={this.hanldeChangeLastTwoColumns} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableEdit />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
---
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 列选择选项
|
||||
en-US: Column Select Options
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
|
||||
import img1 from '@images/table_1';
|
||||
import img2 from '@images/table_2';
|
||||
import img3 from '@images/expend';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class TableDoubleSelectOptions extends React.Component {
|
||||
|
||||
handleRowExpend = (row) => {
|
||||
console.log("handleRowExpend callback row : ", row);
|
||||
return (<div style={{paddingLeft : "30px" , background : "#edeeef"}}>
|
||||
<img src={img3}/></div>);
|
||||
}
|
||||
|
||||
validate = (value) => {
|
||||
let validationReturnMap = {};
|
||||
let validationResult = value.match(new RegExp("@", "g"));
|
||||
validationReturnMap['result'] = validationResult;
|
||||
validationReturnMap['message'] = "Incorrect input";
|
||||
return validationReturnMap;
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
const columns = [
|
||||
{
|
||||
title: 'VPN Name',
|
||||
width: 300,
|
||||
isMovable: false,
|
||||
key: 'c_1',
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
width: 300,
|
||||
key: 'c_2',
|
||||
// 自定义渲染
|
||||
render: cell => {
|
||||
if (cell === 'TO BE') {
|
||||
return (
|
||||
<div>
|
||||
<img src={img1} style={{ verticalAlign: 'bottom' }} alt="TO BE" />
|
||||
{' '}
|
||||
TO BE
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<img src={img2} style={{ verticalAlign: 'bottom' }} alt="Active" />
|
||||
{' '}
|
||||
Active
|
||||
</div>
|
||||
);
|
||||
},
|
||||
allowSort: false // 禁用列排序
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
width: 300,
|
||||
isEditable: true,
|
||||
validator: this.validate,
|
||||
cid: "1",
|
||||
key: 'c_3',
|
||||
display: true // 隐藏列
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
width: 300,
|
||||
key: 'c_4',
|
||||
},
|
||||
];
|
||||
const rows = [];
|
||||
rows.push(['R&D VPN2', 'TO BE', 3, 'ICMP Echo']);
|
||||
rows.push(['Shop Storage', 'Active', 3, 'ICMP Echo']);
|
||||
rows.push(['IT Link', 'Active', 7, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN1', 'Active', 3, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN6', 'TO BE', 5, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN2', 'Active', 7, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN2', 'Active', 7, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN2', 'Active', 2, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN2', 'Active', 5, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN2', 'Active', 1, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN2', 'Active', 9, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN2', 'Active', 9, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN2', 'Active', 4, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN2', 'Active', 2, 'ICMP Echo']);
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<Table
|
||||
columns={columns} // 行定义
|
||||
dataset={rows} // 数据数组
|
||||
enableRowExpand // 启用行展开
|
||||
onRowExpend={this.handleRowExpend} // 行展开事件回调
|
||||
pageSize={10} // 分页大小
|
||||
selectedRowIndex={2} // 默认选中行
|
||||
|
||||
enableColumnFilter
|
||||
enableMulitiExpand
|
||||
itemOrderChanger={true}
|
||||
enableCheckBox
|
||||
/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableDoubleSelectOptions />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
---
|
||||
order: 12
|
||||
title:
|
||||
zh-CN: 列自定义
|
||||
en-US: Custom Columns
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import { TextField, Button, Radio, Select, Checkbox, ButtonMenu, DatePicker, FileUpload, ProgressBar, SearchInput, LinkField, TextArea } from 'eview-ui';
|
||||
import createDefaultImg from '@images/create_default';
|
||||
import deleteDefaultImg from '@images/delete_default';
|
||||
import exportDefaultImg from '@images/export_default';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class TableMultiComponents extends React.Component {
|
||||
state = {
|
||||
msg: null,
|
||||
checkedRows: [],
|
||||
enableProgress: false,
|
||||
fileUploadStatus: 'loading',
|
||||
};
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { value: {}, fileUploadStatus: {}, disable: false };
|
||||
}
|
||||
|
||||
handleRowCheck = (row, data) => {
|
||||
this.setState({ checkedRows: data })
|
||||
};
|
||||
|
||||
handleEditClick = () => {
|
||||
this.table.setRowEditable(2);
|
||||
};
|
||||
|
||||
handleEditOtherOneClick = () => {
|
||||
this.table.setRowEditable(4);
|
||||
};
|
||||
|
||||
uploadCallback = (obj) => {
|
||||
console.log(this.fileupload.getValue());
|
||||
if (obj) {
|
||||
let fileName = obj.data[0].name
|
||||
setTimeout(() => this.setState(this.getNameAndVal(fileName, 10)), 500);
|
||||
setTimeout(() => this.setState(this.getNameAndVal(fileName, 40)), 2000);
|
||||
setTimeout(() => this.setState(this.getNameAndVal(fileName, 100)), 6000);
|
||||
}
|
||||
}
|
||||
|
||||
getNameAndVal = (fileName, progress, loadingStatus) => {
|
||||
|
||||
let createVal = { value: {}, fileUploadStatus: {} };
|
||||
createVal.value[fileName] = progress;
|
||||
if (progress < 100 && loadingStatus != 'fail' && this.state.fileUploadStatus[fileName] != 'fail') {
|
||||
createVal.fileUploadStatus[fileName] = "loading";
|
||||
}
|
||||
else if (progress == 100 && this.state.fileUploadStatus[fileName] != "fail") {
|
||||
createVal.fileUploadStatus[fileName] = "success";
|
||||
}
|
||||
else if (progress != 100 || this.state.fileUploadStatus[fileName] == 'fail') {
|
||||
createVal.fileUploadStatus[fileName] = "fail";
|
||||
createVal.value[fileName] = 100;
|
||||
}
|
||||
return createVal;
|
||||
}
|
||||
handleCancelUpload = (event) => {
|
||||
console.log('cancel CallBack');
|
||||
}
|
||||
|
||||
onRowRightClick = (e, row) => {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
const progressBarParam = {
|
||||
format: "percent",
|
||||
current: 10
|
||||
};
|
||||
const columns = [
|
||||
{
|
||||
title: 'TextField',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 200,
|
||||
key: 'key_1',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Button',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 200,
|
||||
key: 'key_2',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: (cellValue) => {
|
||||
// ???title??????
|
||||
return cellValue.props && cellValue.props.text
|
||||
? cellValue.props.text
|
||||
: '';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Radio',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 100,
|
||||
key: 'key_3',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
{
|
||||
title: 'CheckBox',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 100,
|
||||
key: 'key_4',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
{
|
||||
title: 'ButtonMenu',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 200,
|
||||
key: 'key_5',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
{
|
||||
title: 'DatePicker',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 300,
|
||||
key: 'key_6',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
{
|
||||
title: 'Select',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 250,
|
||||
key: 'key_7',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
{
|
||||
title: 'Upload Single',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 600,
|
||||
key: 'key_8',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
{
|
||||
title: 'ProgressBar',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 400,
|
||||
key: 'key_9',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
{
|
||||
title: 'Search Input',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 300,
|
||||
key: 'key_10',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
{
|
||||
title: 'Link',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 300,
|
||||
key: 'key_11',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
{
|
||||
title: 'TextArea',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
width: 300,
|
||||
key: 'key_12',
|
||||
align: 'center',
|
||||
allowSort: true,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
tipFormatter: 'custom_NO_TIP',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
let dateStyle = { position: "absolute", margin: "-18px 0px 0px -100px" };
|
||||
|
||||
const rows = [];
|
||||
rows.push([
|
||||
<TextField value="Input Value" />,
|
||||
<Button type="button" text="Primary" />,
|
||||
<Radio value="1" checked={true} />,
|
||||
<Checkbox value="1" checked={true} />,
|
||||
<ButtonMenu text="Operation" iconUrl={createDefaultImg} options={[{ text: "Create", value: 1, iconUrl: createDefaultImg }, { text: "Export", value: 2, iconUrl: exportDefaultImg }, { text: "Delete", value: 3, iconUrl: deleteDefaultImg }]} selectedIndex={0} />,
|
||||
<DatePicker value={new Date()} type='datetime' time={[10, 10, 10]} format='yyyy-MM-dd HH:mm:ss' style={dateStyle} required />,
|
||||
<Select options={[{ text: "BeiJIng", value: 1 }, { text: "UK", value: 2 }, { text: "USA", value: 3 }]} required={true} selectedIndex={0} />,
|
||||
<FileUpload type='single' width={'450px'} buttonText='Upload' enableProgress={true} disable={false} fileUploadStatus={this.state.fileUploadStatus} accept=".png"
|
||||
updateProgressStatus={this.state.value} buttonText='Upload File' ref={fileupload => { this.fileupload = fileupload }}
|
||||
placeHolder='please select' handleSubmit={this.uploadCallback} onCancelUpload={this.handleCancelUpload} />,
|
||||
<ProgressBar {...progressBarParam} />,
|
||||
<SearchInput placeholder="search" />,
|
||||
<LinkField text={"LinkTarget: blank"} target="_blank" href={'http://rnd-iemp.huawei.com/node/rest/component/preview/start.html'} disabled={false} />,
|
||||
<TextArea placeholder="Please Enter" rows={4} cols={40} maxLength={100} />,
|
||||
|
||||
]);
|
||||
rows.push([
|
||||
<TextField value="Input Value" />,
|
||||
<Button type="button" text="Primary" />,
|
||||
<Radio value="1" checked={false} />,
|
||||
<Checkbox value="1" checked={false} />,
|
||||
<ButtonMenu text="Operation" iconUrl={createDefaultImg} options={[{ text: "Create", value: 1, iconUrl: createDefaultImg }, { text: "Export", value: 2, iconUrl: exportDefaultImg }, { text: "Delete", value: 3, iconUrl: deleteDefaultImg }]} selectedIndex={0} />,
|
||||
<DatePicker value={new Date()} type='datetime' time={[10, 10, 10]} format='yyyy-MM-dd HH:mm:ss' required style={dateStyle} />,
|
||||
<Select options={[{ text: "BeiJIng", value: 1 }, { text: "UK", value: 2 }, { text: "USA", value: 3 }]} required={true} selectedIndex={0} />,
|
||||
<FileUpload type='single' width={'450px'} buttonText='Upload' enableProgress={true} disable={false} fileUploadStatus={this.state.fileUploadStatus} accept=".png"
|
||||
updateProgressStatus={this.state.value} buttonText='Upload File' ref={fileupload => { this.fileupload = fileupload }}
|
||||
placeHolder='please select' handleSubmit={this.uploadCallback} onCancelUpload={this.handleCancelUpload} />,
|
||||
<ProgressBar {...progressBarParam} />,
|
||||
<SearchInput placeholder="search" />,
|
||||
<LinkField text={"LinkTarget: self"} target="_self" href={'http://rnd-iemp.huawei.com/node/rest/component/preview/start.html'} disabled={false} />,
|
||||
<TextArea placeholder="Please Enter" rows={4} cols={40} maxLength={100} />,
|
||||
|
||||
]);
|
||||
let optionsDown = [{ text: "Create", value: 1, iconUrl: createDefaultImg }, { text: "Export", value: 2, iconUrl: exportDefaultImg }, { text: "Delete", value: 3, iconUrl: deleteDefaultImg },
|
||||
{ text: "Create1", value: 1, iconUrl: createDefaultImg }, { text: "Export1", value: 2, iconUrl: exportDefaultImg }, { text: "Delete1", value: 3, iconUrl: deleteDefaultImg },
|
||||
{ text: "Create2", value: 1, iconUrl: createDefaultImg }, { text: "Export2", value: 2, iconUrl: exportDefaultImg }, { text: "Delete2", value: 3, iconUrl: deleteDefaultImg },
|
||||
{ text: "Create3", value: 1, iconUrl: createDefaultImg }, { text: "Export3", value: 2, iconUrl: exportDefaultImg }, { text: "Delete3", value: 3, iconUrl: deleteDefaultImg }];
|
||||
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div style={{ width: "100%", overflow: "auto" }}>
|
||||
<Table onRowRightClick={this.onRowRightClick}
|
||||
headerCheckBoxSortAllow={true}
|
||||
columns={columns}
|
||||
dataset={rows}
|
||||
pageSize={10}
|
||||
ref={table => { this.table = table; }}
|
||||
enableenableColumnDrag
|
||||
enableCheckBox
|
||||
selectedRowIndex={2}
|
||||
/>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableMultiComponents />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,552 @@
|
|||
---
|
||||
order: 12
|
||||
title:
|
||||
zh-CN: 可筛选
|
||||
en-US: Custom Columns
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Button from "eview-ui/Button";
|
||||
import React, { Component } from "react";
|
||||
import Table from "eview-ui/Table";
|
||||
import expend from "@images/expend";
|
||||
import Select from 'eview-ui/Select';
|
||||
import DivMessage from 'eview-ui/DivMessage';
|
||||
import PopUpMenu from 'eview-ui/PopUpMenu';
|
||||
import Dialog from 'eview-ui/Dialog';
|
||||
import TextField from 'eview-ui/TextField';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class TableColFilter extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.textBoxVal = '';
|
||||
}
|
||||
|
||||
handleValueChange = (textVal) => {
|
||||
this.textBoxVal = textVal;
|
||||
}
|
||||
|
||||
handleClickOK = e => {
|
||||
if(typeof this.props.onClickOk == "function") {
|
||||
this.props.onClickOk(e,this.textBoxVal, this.props.columnTitle);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{ width: '280px', height: '50px' }}>
|
||||
<div style={{ margin: '10px', display: 'flex',alignItems: 'center' }}>
|
||||
<TextField onChange={this.handleValueChange} id={this.props.id+'_input'} inputStyle={{ width: '150px', marginRight: '12px'}} />
|
||||
<Button text='Ok' onClick={this.handleClickOK} /> </div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
let clientTimezoneRule = (year, id) => {
|
||||
|
||||
let ruleForYear = {
|
||||
dstEndTime: "2017-10-29 04:00:00",
|
||||
dstStartTime: "2017-03-26 03:00:00",
|
||||
endDuration: "-3600",
|
||||
startDuration: "3600"
|
||||
}
|
||||
return ruleForYear;
|
||||
}
|
||||
const optionStyle = {
|
||||
items: 2,
|
||||
background: "Yellow",
|
||||
color: "Black"
|
||||
|
||||
};
|
||||
const customProps = {
|
||||
optionStyle: optionStyle,
|
||||
};
|
||||
|
||||
let optionsSelect = [{ text: "China ", value: 0 }, { text: "UK", value: 1 }, { text: "USA", value: 2 }, { text: "USAB", value: 3 },
|
||||
{ text: "USAC", value: 4 }, { text: "USAD", value: 5 }, { text: "USAE", value: 6 }, { text: "USAF", value: 7 }, { text: "USAG", value: 8 }];
|
||||
let style = { width: '150px' };
|
||||
|
||||
|
||||
const rows = [
|
||||
{
|
||||
VPNData: 'R&D VPN6',
|
||||
hideV: "R&D VPN2",
|
||||
Country: 'India',
|
||||
hobbies: "Sport",
|
||||
Act: true,
|
||||
hideY: <Select options={optionsSelect} selectStyle={style} required={true} selectedIndex={1} />,
|
||||
inputsite: 1,
|
||||
date: '2017-10-11 11:57:11',
|
||||
},
|
||||
{
|
||||
VPNData: 'R&D VPN6',
|
||||
hideV: "R&D VPNHHHHHHH",
|
||||
Country: 'China',
|
||||
hobbies: "Cricket",
|
||||
Act: true,
|
||||
hideY: <Select options={optionsSelect} selectStyle={style} required={true} selectedIndex={1} />,
|
||||
inputsite: 1,
|
||||
date: '2017-10-11 11:57:11',
|
||||
},
|
||||
{
|
||||
VPNData: 'R&D VPN6',
|
||||
hideV: "R&D VPN2HHHHHHHHHHHHHH",
|
||||
Country: 'India',
|
||||
hobbies: "Football",
|
||||
Act: true,
|
||||
hideY: <Select options={optionsSelect} selectStyle={style} required={true} selectedIndex={1} />,
|
||||
inputsite: 1,
|
||||
date: '2017-10-11 11:57:11',
|
||||
},
|
||||
{
|
||||
VPNData: 'R&D VPN6',
|
||||
hideV: "VPN2 YHHHHHHHHHHHHHHHHHHHHHHHHH",
|
||||
Country: 'China',
|
||||
hobbies: "Sport",
|
||||
Act: true,
|
||||
hideY: <Select options={optionsSelect} selectStyle={style} required={true} selectedIndex={1} />,
|
||||
inputsite: 1,
|
||||
date: '2017-10-11 11:57:11',
|
||||
},
|
||||
{
|
||||
VPNData: 'R&D VPN6',
|
||||
hideV: "R&D VHHHH",
|
||||
Country: 'India',
|
||||
hobbies: "Cricket",
|
||||
Act: true,
|
||||
hideY: <Select options={optionsSelect} selectStyle={style} required={true} selectedIndex={1} />,
|
||||
inputsite: 1,
|
||||
date: '2017-10-11 11:57:11',
|
||||
},
|
||||
{
|
||||
VPNData: 'R&D VPN6',
|
||||
hideV: "HHHHHHHHH",
|
||||
Country: 'China',
|
||||
hobbies: "Football",
|
||||
Act: true,
|
||||
hideY: <Select options={optionsSelect} selectStyle={style} required={true} selectedIndex={1} />,
|
||||
inputsite: 1,
|
||||
date: '2017-10-11 11:57:11',
|
||||
},
|
||||
{
|
||||
VPNData: 'R&D VPN6',
|
||||
hideV: "Huawei",
|
||||
Country: 'India',
|
||||
hobbies: "Sport",
|
||||
Act: true,
|
||||
hideY: <Select options={optionsSelect} selectStyle={style} required={true} selectedIndex={1} />,
|
||||
inputsite: 1,
|
||||
date: '2017-10-11 11:57:11',
|
||||
},
|
||||
{
|
||||
VPNData: 'R&D VPN6',
|
||||
hideV: "Center",
|
||||
Country: 'China',
|
||||
hobbies: "Cricket",
|
||||
Act: true,
|
||||
hideY: <Select options={optionsSelect} selectStyle={style} required={true} selectedIndex={1} />,
|
||||
inputsite: 1,
|
||||
date: '2017-10-11 11:57:11',
|
||||
},
|
||||
{
|
||||
VPNData: 'R&D VPN6',
|
||||
hideV: "R&D",
|
||||
Country: 'India',
|
||||
hobbies: "Football",
|
||||
Act: true,
|
||||
hideY: <Select options={optionsSelect} selectStyle={style} required={true} selectedIndex={1} />,
|
||||
inputsite: 1,
|
||||
date: '2017-10-11 11:57:11',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
export default class TableColFilterExample extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: 'VPP data',
|
||||
allowSort: true,
|
||||
key: "VPNData",
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: 'Engine',
|
||||
width:200,
|
||||
renderType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
isEditable: true,
|
||||
allowSort: true,
|
||||
filter: { component: <TableColFilter
|
||||
id="selectSiteInput"
|
||||
onClickOk={this.handleClickFilter} columnTitle='hideV' />, className: 'eui_table_filter', style: { color: 'red' } },
|
||||
key: "hideV",
|
||||
customSort: true,
|
||||
options: { isFocus: true }
|
||||
},
|
||||
{
|
||||
title: 'Country',
|
||||
width:200,
|
||||
renderType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
isEditable: true,
|
||||
allowSort: true,
|
||||
filter: { component: <TableColFilter
|
||||
id="selectSiteInput"
|
||||
onClickOk={this.handleClickFilter} columnTitle='Country' />, className: 'eui_table_filter', style: { color: 'red' } },
|
||||
key: "Country",
|
||||
customSort: true,
|
||||
options: { isFocus: true },
|
||||
help: {
|
||||
tipContent: 'arrow left, and you can set the position',
|
||||
arrowDirection: 'left',
|
||||
tipStyle: { width: '200px', backgroundColor: 'lightBlue', borderRadius: '5px'}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Hobbies',
|
||||
width:200,
|
||||
renderType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
isEditable: true,
|
||||
allowSort: true,
|
||||
filter: { component: <TableColFilter
|
||||
id="selectSiteInput"
|
||||
onClickOk={this.handleClickFilter} columnTitle='hobbies' />, className: 'eui_table_filter', style: { color: 'red' } },
|
||||
customSort: true,
|
||||
options: { isFocus: true },
|
||||
key: 'hobbies'
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Acitve',
|
||||
display: false,
|
||||
width:200,
|
||||
renderType: Table.ColumnRenderType.CHECK_BOX,
|
||||
key: 'Act',
|
||||
options: {
|
||||
label: 'Acitve',
|
||||
},
|
||||
render: v => {
|
||||
if (v) {
|
||||
return 'Active';
|
||||
}
|
||||
return 'DeActive';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Country',
|
||||
renderType: Table.ColumnRenderType.CUSTOM,
|
||||
key: 'hideY',
|
||||
align: 'center',
|
||||
customProps: customProps,
|
||||
allowSort: true,
|
||||
width:200,
|
||||
display: true,
|
||||
isMovable: true,
|
||||
render: (v, row, options, rowdata, r1, r2) => {
|
||||
return <Select options={v.props.options} selectStyle={style} required={true} onChange={this.handleChange} selectedIndex={this.state.selectedIndexValue} />;
|
||||
},
|
||||
help: {
|
||||
tipContent: 'arrow bottom, and you can set the position',
|
||||
arrowDirection: 'bottom',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'InputSelectSite',
|
||||
renderType: Table.ColumnRenderType.INPUT_SELECT,
|
||||
options: [
|
||||
{ text: 'China', value: 1 },
|
||||
{ text: 'UK', value: 2 },
|
||||
{ text: 'USA', value: 3 },
|
||||
],
|
||||
width:200,
|
||||
key: 'inputsite',
|
||||
render: v => {
|
||||
if (v === 1) {
|
||||
return 'China';
|
||||
} else if (v === 2) {
|
||||
return 'UK';
|
||||
}
|
||||
else if (v === 3) {
|
||||
return 'USA';
|
||||
}
|
||||
return 'Others';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Date',
|
||||
width:200,
|
||||
renderType: Table.ColumnRenderType.DATE_PICKER,
|
||||
filter: { component: <TableColFilter /> },
|
||||
options: { type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss', callBack: clientTimezoneRule },
|
||||
render: (value, rowData, options, row) => {
|
||||
return options ? options.updateValue : value ? typeof value == 'string' ? value : value.toDateString() : "";
|
||||
},
|
||||
key: 'date'
|
||||
},
|
||||
];
|
||||
|
||||
this.state = {
|
||||
selectedRowIndex: null,
|
||||
msg: null,
|
||||
open: false,
|
||||
itemOrderChanger: false,
|
||||
selectedValue: 1,
|
||||
recordCount: 100,
|
||||
isMenuOpen: false,
|
||||
selectedIndexValue: 0,
|
||||
columns: this.columns,
|
||||
rows: rows,
|
||||
X: 100,
|
||||
Y: 100,
|
||||
offset: {
|
||||
X: 100,
|
||||
Y: 100
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
handleFileter = (event) => {
|
||||
console.log(event);
|
||||
this.setState({ open: !this.state.open });
|
||||
}
|
||||
|
||||
handleClickFilter = (event, data, key) => {
|
||||
let newRow = [];
|
||||
if(data == "") {
|
||||
newRow = rows;
|
||||
} else {
|
||||
for(let i = 0; i < rows.length; i++) {
|
||||
if(rows[i][key].indexOf(data) > -1) {
|
||||
newRow.push(rows[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setState(prevState => ({
|
||||
columns: prevState.columns.map(prevColumn => {
|
||||
if(prevColumn && prevColumn.filter) {
|
||||
if(prevColumn.key == key && data != "") {
|
||||
prevColumn.isFiltered = true;
|
||||
return prevColumn;
|
||||
}
|
||||
}
|
||||
prevColumn.isFiltered = false;
|
||||
return prevColumn;
|
||||
})
|
||||
}));
|
||||
this.setState({
|
||||
rows: newRow
|
||||
})
|
||||
}
|
||||
|
||||
handleCellEdit = (old, newVal, cell, row, e) => {
|
||||
console.log(`Editing the cell value ... Old Value:- ${old}, New Value:- ${newVal}, Edited Cell:- ${cell}, Edited Row:- ${row}`);
|
||||
}
|
||||
|
||||
handleEditingCellBlur = (cell, row) => {
|
||||
console.log('handleEditingCellBlur .. ', cell, row);
|
||||
}
|
||||
|
||||
handleRowCheck = (row, data) => {
|
||||
this.setState({
|
||||
checkedRows: data,
|
||||
isMenuOpen: false
|
||||
})
|
||||
};
|
||||
|
||||
handleGetRow = () => {
|
||||
const row = this.table.getEditData();
|
||||
if (!row) {
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
getEditData:<br />
|
||||
null
|
||||
</div>
|
||||
),
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
getEditData:<br />
|
||||
[{row.map(v => v.toString()).join(',')}]
|
||||
</div>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
handleRowExpend = () => <img src={expend} alt="expend demo" />;
|
||||
|
||||
handleGetSelectedRow = () => {
|
||||
const row = this.table.getSelectedRowData();
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
getSelectedRowData<br />
|
||||
[{row.map(v => v.toString()).join(',')}]
|
||||
</div>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
handleGetAllRow = () => {
|
||||
const rows = this.table.getDataset();
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
getDataset:
|
||||
<br />
|
||||
[
|
||||
<br />
|
||||
{rows
|
||||
.map(row => `[${row.map(v => v.toString()).join(',')}]`)
|
||||
.join(',')}
|
||||
<br />
|
||||
]
|
||||
</div>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
handleGetCheckedRow = () => {
|
||||
const rows = this.table.getCheckedRowsData();
|
||||
this.setState({
|
||||
msg: (
|
||||
<div>
|
||||
getCheckedRowsData:
|
||||
<br />
|
||||
[
|
||||
<br />
|
||||
{rows
|
||||
.map(row => `[${row.map(v => v.toString()).join(',')}]`)
|
||||
.join(',')}
|
||||
<br />
|
||||
]
|
||||
</div>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
onRowRightClick = (e, row) => {
|
||||
console.log(row);
|
||||
this.setState({
|
||||
isMenuOpen: true,
|
||||
X: e.pageX,
|
||||
Y: e.pageY,
|
||||
offset: {
|
||||
X: e.offsetX, Y: e.offsetY
|
||||
},
|
||||
parentId: row.id,
|
||||
selectedRowIndex: row.data.id
|
||||
})
|
||||
}
|
||||
|
||||
handleRowClick = (event, row) => {
|
||||
console.log("RowClick event...", row);
|
||||
};
|
||||
|
||||
handleAutoFit = () => {
|
||||
this.table.setSizeColumnFit(0);
|
||||
};
|
||||
|
||||
onRClick = () => {
|
||||
this.table.reSetcolumnSize();
|
||||
};
|
||||
|
||||
handleCustomSort = (key, aValue, bValue) => {
|
||||
console.log("handleCustomSort: ", key, aValue, bValue);
|
||||
if (aValue > bValue) {
|
||||
return -1;
|
||||
} else if (aValue < bValue) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
handleFilterOkClick = (left, right) => {
|
||||
this.setState({
|
||||
colTitle: right[0].newText,
|
||||
msg: (
|
||||
<div>
|
||||
{"column id : " + right[0].cid + ", Old Column Name : " + right[0].name + ", New Column name : " + right[0].newText}
|
||||
</div>
|
||||
),
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
handleChange = (value, oldvalue) => {
|
||||
this.setState({ msg: "onChange event callback, Selected value : " + oldvalue, selectedValue: oldvalue });
|
||||
};
|
||||
|
||||
handleShowItemOrderChanger = () => {
|
||||
this.setState({
|
||||
itemOrderChanger: true
|
||||
});
|
||||
};
|
||||
handleChange = (value) => {
|
||||
console.log(value);
|
||||
this.setState({ selectedIndexValue: value });
|
||||
};
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
const style = {
|
||||
width: "300px"
|
||||
};
|
||||
|
||||
let PopUpMenuOptions = [
|
||||
{ text: "Item1", serialno: 1, submenus: [] },
|
||||
{ text: "Item2", serialno: 2, submenus: [] },
|
||||
{ text: "Item3", disable: true, serialno: 3, submenus: [] },
|
||||
{ text: "Item4", serialno: 4, submenus: [] }
|
||||
];
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme} >
|
||||
<Table
|
||||
columns={this.columns}
|
||||
dataset={this.state.rows}
|
||||
recordCount={this.state.recordCount}
|
||||
ref={table => { this.table = table; }}
|
||||
onRowExpend={this.handleRowExpend}
|
||||
onRowClick={this.handleRowClick}
|
||||
checkedRows={this.state.checkedRows}
|
||||
customSortFun={this.handleCustomSort}
|
||||
onEdit={this.handleCellEdit}
|
||||
onEditingCellBlur={this.handleEditingCellBlur}
|
||||
mutiSelectEnable={true}
|
||||
height={400}
|
||||
enableColumnFilter={true}
|
||||
onRowCheck={this.handleRowCheck}
|
||||
selectedRowIndex={this.state.selectedRowIndex}
|
||||
columnFilterZIndex={888}
|
||||
isRequiredToUpdateColumns={['width']}
|
||||
/>
|
||||
|
||||
<Dialog title={'Dialog'} isOpen={this.state.open} onClose={this.handleClick} closeOnEscape />
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
ReactDOM.render(<TableColFilterExample />, mountNode);
|
||||
```
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
---
|
||||
order: 14
|
||||
title:
|
||||
zh-CN: 滚动分页动态数据加载
|
||||
en-US: Scroll Table Dynamic Fetching Data
|
||||
---
|
||||
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
```tsx
|
||||
import { VirtualizedTable } from 'eview-ui';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class VirtualizedTableLazyLoading extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataset: [],
|
||||
columns: this.getColumns(),
|
||||
currentStart: 0,
|
||||
oldStartRow: 0,
|
||||
displayPerPage: 0,
|
||||
checkedRowSet: new Set()
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({
|
||||
dataset: this.getDataset(0, 30)
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.console.log(this.table);
|
||||
}
|
||||
|
||||
getColumns = () => {
|
||||
const columns = [
|
||||
{
|
||||
key: 'id',
|
||||
id: 'col_0',
|
||||
display: false
|
||||
},
|
||||
{
|
||||
title: 'VPN Name',
|
||||
id: 'col_1',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
allowSort: false,
|
||||
id: 'col_2',
|
||||
key: 'state'
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
display: true,
|
||||
id: 'col_3',
|
||||
key: 'site'
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
display: true,
|
||||
id: 'col_4',
|
||||
key: 'alarm'
|
||||
},
|
||||
{
|
||||
title: 'Warn',
|
||||
display: true,
|
||||
id: 'col_5',
|
||||
key: 'warn'
|
||||
},
|
||||
{
|
||||
title: 'Info',
|
||||
display: true,
|
||||
id: 'col_6',
|
||||
key: 'info'
|
||||
},
|
||||
{
|
||||
title: 'Error',
|
||||
display: true,
|
||||
id: 'col_7',
|
||||
key: 'error'
|
||||
},
|
||||
];
|
||||
return columns;
|
||||
}
|
||||
|
||||
onTurnPage = (currentStart, oldStartRow, displayPerPage, event) => {
|
||||
this.setState({
|
||||
currentStart,
|
||||
oldStartRow,
|
||||
displayPerPage
|
||||
});
|
||||
}
|
||||
|
||||
getDataset = (start, end) => {
|
||||
const totalDataList = [];
|
||||
for(let i = start; i < end; i++) {
|
||||
totalDataList.push({
|
||||
id: i,
|
||||
name: `VPN Name${i}`,
|
||||
state: `State${i}`,
|
||||
site: `Site${i}`,
|
||||
alarm: `Alarm${i}`,
|
||||
warn: `Warn${i}`,
|
||||
info: `Info${i}`,
|
||||
error: `Error${i}`
|
||||
});
|
||||
}
|
||||
return totalDataList;
|
||||
}
|
||||
|
||||
handleRowCheck = (row, checkedRows, e) => {
|
||||
console.log(`checked rows from table ${checkedRows}`);
|
||||
|
||||
console.log(`sort type : ${this.table.getSortType()}`);
|
||||
console.log(`sort column : ${this.table.getSortColumn()}`);
|
||||
this.table.setCheckedRows(checkedRows);
|
||||
}
|
||||
|
||||
handleHeaderCheck = (checkedRows) => {
|
||||
const { checkedRowSet, dataset } = this.state;
|
||||
const checked = checkedRows.length > 0;
|
||||
if (checked) {
|
||||
dataset.forEach(row => {
|
||||
checkedRowSet.add(row.id);
|
||||
});
|
||||
} else {
|
||||
checkedRowSet.clear();
|
||||
}
|
||||
}
|
||||
|
||||
getCheckedIds = (dataset, checkedRowSet) => {
|
||||
const checkedIds = [];
|
||||
if (checkedRowSet.size > 0) {
|
||||
const { currentStart, displayPerPage } = this.state;
|
||||
const currentPageData = dataset.slice(currentStart, currentStart + 8);
|
||||
currentPageData.forEach((row, index) => {
|
||||
if (checkedRowSet.has(row.id)) {
|
||||
checkedIds.push(index);
|
||||
}
|
||||
});
|
||||
}
|
||||
return checkedIds;
|
||||
}
|
||||
|
||||
lazyLoading = (startIndex, endIndex) => {
|
||||
console.log(`loading page: ${startIndex}, end: ${endIndex}, items: ${endIndex - startIndex}`);
|
||||
let mockData = this.getDataset(startIndex,endIndex);
|
||||
this.setState({
|
||||
dataset : mockData,
|
||||
currentStart: startIndex
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { columns, dataset, checkedRowSet, currentStart} = this.state;
|
||||
const checkedIds = this.getCheckedIds(dataset, checkedRowSet);
|
||||
const [version, theme] = getDemoVersion();
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div style={{ height: '420px' }}>
|
||||
<VirtualizedTable
|
||||
width="1400px"
|
||||
height="400px"
|
||||
dataset={dataset}
|
||||
startIndex = {currentStart}
|
||||
columns={columns}
|
||||
totalCount={10000}
|
||||
enableCheckBox={true}
|
||||
enableShowLineNumber={true}
|
||||
onRowCheck={this.handleRowCheck}
|
||||
onHeaderCheck={this.handleHeaderCheck}
|
||||
enableColumnFilter={true}
|
||||
itemOrderChanger={true}
|
||||
loadMore={this.lazyLoading}
|
||||
ref={table => this.table = table}
|
||||
/>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<VirtualizedTableLazyLoading />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: Resize & Percentage width
|
||||
en-US: Resize & Percentage width
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import Button from 'eview-ui/Button';
|
||||
import img1 from '@images/table_1';
|
||||
import img2 from '@images/table_2';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class TablePercentageResize extends React.Component {
|
||||
|
||||
state = {
|
||||
divTableStyle: { margin: "10px 20px", display: "inline-block", borderStyle: 'solid', borderColor: 'red', height: 250, width: 1200,overflow:'auto' },
|
||||
ColumnSize: ["40%", '20%', '20%', '20%'],
|
||||
tableSize: [null, null]
|
||||
}
|
||||
|
||||
handleChangeColumnSize = () => {
|
||||
this.setState({
|
||||
ColumnSize: ["20%", '20%', '30%', '30%'],
|
||||
})
|
||||
};
|
||||
|
||||
handleFixedColumnSize = () => {
|
||||
this.setState({
|
||||
ColumnSize: [300, 450, 400, 450],
|
||||
})
|
||||
};
|
||||
|
||||
handlePartialPxColumnSize = () => {
|
||||
this.setState({
|
||||
ColumnSize: [300, null, null, null],
|
||||
})
|
||||
};
|
||||
|
||||
handlePartialPercentageColumnSize = () => {
|
||||
this.setState({
|
||||
ColumnSize: ["40%", null, null, null],
|
||||
})
|
||||
};
|
||||
|
||||
handleMixColumnSize = () => {
|
||||
this.setState({
|
||||
ColumnSize: ["20%", null, 400, null],
|
||||
})
|
||||
};
|
||||
|
||||
handleClearColumnSize = () => {
|
||||
this.setState({
|
||||
ColumnSize: [null, null, null, null],
|
||||
})
|
||||
};
|
||||
|
||||
handleSetTableSize = () => {
|
||||
this.setState({
|
||||
tableSize: [1000, 400],
|
||||
})
|
||||
};
|
||||
|
||||
handleUnSetTableSize = () => {
|
||||
this.setState({
|
||||
tableSize: [null, null],
|
||||
})
|
||||
};
|
||||
|
||||
handleIncreaseSize = () => {
|
||||
this.setState({
|
||||
divTableStyle: { margin: "10px 20px", display: "inline-block", borderStyle: 'solid', borderColor: 'red', height: 300, width: 1300, overflow:'auto' },
|
||||
})
|
||||
|
||||
this.triggerTableResize();
|
||||
};
|
||||
|
||||
handleDecreaseSize = () => {
|
||||
this.setState({
|
||||
divTableStyle: { margin: "10px 20px", display: "inline-block", borderStyle: 'solid', borderColor: 'red', height: 200, width: 1000, overflow:'auto' },
|
||||
})
|
||||
|
||||
this.triggerTableResize();
|
||||
};
|
||||
|
||||
triggerTableResize() {
|
||||
var custEvent = new CustomEvent('parentResize');
|
||||
document.dispatchEvent(custEvent);
|
||||
}
|
||||
|
||||
render() {
|
||||
const columns = [
|
||||
{
|
||||
title: 'VPN Name',
|
||||
width: this.state.ColumnSize[0],
|
||||
key: 'col_1',
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
allowSort: false,
|
||||
width: this.state.ColumnSize[1],
|
||||
key: 'col_2',
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
width: this.state.ColumnSize[2],
|
||||
key: 'col_3',
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
width: this.state.ColumnSize[3],
|
||||
key: 'col_4',
|
||||
},
|
||||
];
|
||||
|
||||
const rows = [];
|
||||
rows.push(['R&D VPN2', 'TO BE', 3, 'ICMP Echo']);
|
||||
rows.push(['Shop Storage', 'Active', 3, 'ICMP Echo']);
|
||||
rows.push(['IT Link', 'Active', 7, 'Critical']);
|
||||
rows.push(['R&D VPN1', 'Active', 3, 'Major']);
|
||||
rows.push(['R&D VPN6', 'TO BE', 5, 'ICMP Echo']);
|
||||
rows.push(['R&D VPN2', 'Active', 7, 'Critical']);
|
||||
|
||||
let buttonStyle = { marginRight: "5px", marginTop: "3px" };
|
||||
const [version, theme] = getDemoVersion();
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div id="TableBasicDiv" style={this.state.divTableStyle}>
|
||||
<Table
|
||||
columns={columns} // Column Details
|
||||
dataset={rows} // Data Set
|
||||
width={this.state.tableSize[0]}
|
||||
height={this.state.tableSize[1]}
|
||||
selectedRowIndex={2} // Row ID 2 is selected.
|
||||
enableColumnFilter //Allow column to be selected.
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<Button text="Increase Div Size" style={buttonStyle} onClick={this.handleIncreaseSize} />
|
||||
<Button text="Decrease Div Size" style={buttonStyle} onClick={this.handleDecreaseSize} />
|
||||
<Button text="Set table size" style={buttonStyle} onClick={this.handleSetTableSize} />
|
||||
<Button text="unSet table size" style={buttonStyle} onClick={this.handleUnSetTableSize} />
|
||||
<br />
|
||||
<Button text="Change Col Size %" style={buttonStyle} onClick={this.handleChangeColumnSize} />
|
||||
<Button text="Fixed Col Size px" style={buttonStyle} onClick={this.handleFixedColumnSize} />
|
||||
<Button text="Clear Col Size" style={buttonStyle} onClick={this.handleClearColumnSize} />
|
||||
<Button text="Partial Col Size px" style={buttonStyle} onClick={this.handlePartialPxColumnSize} />
|
||||
<Button text="Partial Col Size %" style={buttonStyle} onClick={this.handlePartialPercentageColumnSize} />
|
||||
<Button text="Mix Col Size" style={buttonStyle} onClick={this.handleMixColumnSize} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TablePercentageResize />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
---
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 表右键单击菜单
|
||||
en-US: Column Select Menu
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import PopUpMenu from 'eview-ui/PopUpMenu';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class TablePopUpMenu extends React.Component {
|
||||
|
||||
state = {
|
||||
isMenuOpen: false,
|
||||
X: 100,
|
||||
Y: 100,
|
||||
offset: {
|
||||
X: 100,
|
||||
Y: 100
|
||||
},
|
||||
parentId: "",
|
||||
|
||||
}
|
||||
onRowRightClick = (e, cbData) => {
|
||||
console.log("Table onRowRightClick cbData : ", cbData, e);
|
||||
|
||||
this.setState({
|
||||
isMenuOpen: true,
|
||||
X: e.pageX,
|
||||
Y: e.pageY,
|
||||
offset: {
|
||||
X: e.offsetX, Y: e.offsetY
|
||||
},
|
||||
parentId: cbData.id,
|
||||
})
|
||||
}
|
||||
|
||||
handleMenuClick = (evt) => {
|
||||
console.log("Popup menu onClick : ", evt);
|
||||
}
|
||||
|
||||
render() {
|
||||
const columns = [
|
||||
{
|
||||
title: 'VPN Name',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'VPN_ID',
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'Site_ID',
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
dataType: Table.ColumnRenderType.TEXT_FIELD,
|
||||
key: 'Alarm_ID',
|
||||
},
|
||||
];
|
||||
|
||||
const rows = [];
|
||||
rows.push(['R&D VPN2 ', '3', 'ICMP Echo',]);
|
||||
rows.push(['Shop Storage', '3', 'ICMP Echo ',]);
|
||||
rows.push(['IT Link', '7', 'ICMP Echo',]);
|
||||
rows.push(['R&D VPN1', '3', 'ICMP Echo',]);
|
||||
rows.push(['R&D VPN6', '5', 'ICMP Echo',]);
|
||||
rows.push(['R&D VPN2', '7', 'ICMP Echo',]);
|
||||
|
||||
|
||||
let PopUpMenuOptions = [
|
||||
{
|
||||
text: "Item1", serialno: 1, submenus: [
|
||||
{
|
||||
text: "Item11Item11Item11Item11Item11Item11", serialno: 11, submenus: [
|
||||
{
|
||||
text: "Item111Item111", serialno: 111, disable: true, submenus: [
|
||||
{ text: "Item1111Item111", serialno: 1111, submenus: [] }
|
||||
]
|
||||
},
|
||||
{ text: "Item111112121Item111112121Item111112121", serialno: 12111, submenus: [] },
|
||||
{ text: "Item121", serialno: 121, submenus: [] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{ text: "Item2", serialno: 2, submenus: [] },
|
||||
{
|
||||
text: "Item 3", serialno: 3, submenus: [
|
||||
{ text: "Item1111121", serialno: 1211, submenus: [] },
|
||||
{ text: "Item121", serialno: 1221, submenus: [] }
|
||||
]
|
||||
},
|
||||
{ text: "Item 4", serialno: 4, submenus: [] }
|
||||
];
|
||||
const [version, theme] = getDemoVersion();
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<Table onRowRightClick={this.onRowRightClick}
|
||||
columns={columns}
|
||||
dataset={rows}
|
||||
ref={table => { this.table = table; }}
|
||||
/>
|
||||
<PopUpMenu options={PopUpMenuOptions} parentId={this.state.parentId} isOpen={this.state.isMenuOpen} X={this.state.X} Y={this.state.Y} offset={this.state.offset}
|
||||
onClick={this.handleMenuClick}></PopUpMenu>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TablePopUpMenu />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
---
|
||||
order: 13
|
||||
title:
|
||||
zh-CN: 滚动表格 + 显示行号
|
||||
en-US: Scroll Table + Show Line Number
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import ScrollTable from 'eview-ui/ScrollTable';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class ScrollTableExample extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataset: [],
|
||||
columns: this.getColumns(),
|
||||
currentStart: 0,
|
||||
oldStartRow: 0,
|
||||
displayPerPage: 0,
|
||||
checkedRowSet: new Set(),
|
||||
checkedRowIndexs: [],
|
||||
disableRowIds: [3, 7, 15]
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({
|
||||
dataset: this.getDataset()
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.console.log(this.table);
|
||||
}
|
||||
|
||||
getColumns = () => {
|
||||
const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
id: 'col_0',
|
||||
display: false
|
||||
},
|
||||
{
|
||||
title: 'VPN Name',
|
||||
id: 'col_1',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
allowSort: false,
|
||||
id: 'col_2',
|
||||
key: 'state'
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
display: true,
|
||||
id: 'col_3',
|
||||
key: 'site'
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
display: true,
|
||||
id: 'col_4',
|
||||
key: 'alarm'
|
||||
},
|
||||
{
|
||||
title: 'Warn',
|
||||
display: true,
|
||||
id: 'col_5',
|
||||
key: 'warn'
|
||||
},
|
||||
{
|
||||
title: 'Info',
|
||||
display: true,
|
||||
id: 'col_6',
|
||||
key: 'info'
|
||||
},
|
||||
{
|
||||
title: 'Error',
|
||||
display: true,
|
||||
id: 'col_7',
|
||||
key: 'error'
|
||||
},
|
||||
];
|
||||
return columns;
|
||||
};
|
||||
|
||||
onTurnPage = (currentStart, oldStartRow, displayPerPage, event) => {
|
||||
this.setState({
|
||||
currentStart,
|
||||
oldStartRow,
|
||||
displayPerPage
|
||||
});
|
||||
};
|
||||
|
||||
getDataset = () => {
|
||||
const totalDataList = [];
|
||||
for(let i = 0; i < 20000; i++) {
|
||||
totalDataList.push([
|
||||
i,
|
||||
`VPN Name${i}`,
|
||||
`State${i}`,
|
||||
`Site${i}`,
|
||||
`Alarm${i}`,
|
||||
`Warn${i}`,
|
||||
`Info${i}`,
|
||||
`Error${i}`,
|
||||
{key:"scrollRowIndex",value:i},
|
||||
]);
|
||||
}
|
||||
return totalDataList;
|
||||
};
|
||||
|
||||
handleRowCheck = (row, checkedRows, e) => {
|
||||
const { checkedRowSet } = this.state;
|
||||
if (row.checked) {
|
||||
checkedRowSet.add(row.id);
|
||||
} else {
|
||||
checkedRowSet.delete(row.id);
|
||||
}
|
||||
this.setState({ checkedRowSet, checkedRowIndexs: checkedRows });
|
||||
};
|
||||
|
||||
handleHeaderCheck = (checkedRows) => {
|
||||
const { checkedRowSet, dataset } = this.state;
|
||||
const checkedDatas = [];
|
||||
if (checkedRows.length) {
|
||||
const { disableRowIds } = this.state;
|
||||
dataset.forEach((row, index) => {
|
||||
if (disableRowIds.length && disableRowIds.indexOf(index) !== -1) {
|
||||
return;
|
||||
}
|
||||
checkedRowSet.add(row.id);
|
||||
checkedDatas.push(index);
|
||||
});
|
||||
} else {
|
||||
checkedRowSet.clear();
|
||||
}
|
||||
this.setState({ checkedRowSet, checkedRowIndexs: checkedDatas });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { columns, dataset, checkedRowSet } = this.state;
|
||||
let headerCheckStatus = 'empty';
|
||||
if (checkedRowSet.size === dataset.length) {
|
||||
headerCheckStatus = 'all';
|
||||
} else if (checkedRowSet.size && checkedRowSet.size < dataset.length) {
|
||||
headerCheckStatus = 'half';
|
||||
}
|
||||
const [version, theme] = getDemoVersion();
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
return (
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<div style={{ height: '420px' }}>
|
||||
<ScrollTable
|
||||
HeaderCheckedStatus={headerCheckStatus}
|
||||
dataset={dataset}
|
||||
columns={columns}
|
||||
totalCount={dataset.length}
|
||||
onTurnPage={this.onTurnPage}
|
||||
enableCheckBox={true}
|
||||
checkedRows={this.state.checkedRowIndexs}
|
||||
enableShowLineNumber={true}
|
||||
onRowCheck={this.handleRowCheck}
|
||||
onHeaderCheck={this.handleHeaderCheck}
|
||||
enableColumnFilter={true}
|
||||
itemOrderChanger={true}
|
||||
enableShiftCheck={true}
|
||||
disableRowIds={this.state.disableRowIds}
|
||||
ref={table => this.table = table}
|
||||
/>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<ScrollTableExample />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
---
|
||||
order: 14
|
||||
title:
|
||||
zh-CN: 二级表头
|
||||
en-US: Second Header
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class TableSecondHeader extends React.Component {
|
||||
|
||||
handleItemClick1 = (item) => {
|
||||
this.setState({ isShow1: false, value: item.value })
|
||||
};
|
||||
|
||||
render() {
|
||||
const [version, theme] = getDemoVersion();
|
||||
const columns = [
|
||||
{
|
||||
title: '制式',
|
||||
allowSort: false,
|
||||
freezeCol: false,
|
||||
key: 'rat',
|
||||
width: 240
|
||||
},
|
||||
{
|
||||
title: 'ESN',
|
||||
allowSort: false,
|
||||
freezeCol: false,
|
||||
key: 'esn',
|
||||
width: 240
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
allowSort: false,
|
||||
freezeCol: false,
|
||||
key: 'time',
|
||||
width: 240
|
||||
},
|
||||
{
|
||||
title: '好',
|
||||
allowSort: false,
|
||||
key: 'good',
|
||||
width: 240
|
||||
},
|
||||
{
|
||||
title: '坏',
|
||||
allowSort: false,
|
||||
key: 'bad',
|
||||
width: 240
|
||||
},
|
||||
{
|
||||
title: '不可信',
|
||||
allowSort: false,
|
||||
freezeCol: false,
|
||||
key: 'untrusted',
|
||||
width: 240
|
||||
},
|
||||
{
|
||||
title: '未播放',
|
||||
allowSort: false,
|
||||
key: 'noPlaying',
|
||||
display: false,
|
||||
width: 240
|
||||
},
|
||||
{
|
||||
title: 'haha',
|
||||
allowSort: false,
|
||||
freezeCol: false,
|
||||
key: 'haha',
|
||||
width: 240
|
||||
},
|
||||
];
|
||||
const groupHeader = [{
|
||||
// 配置属性读取KEY
|
||||
startColumnKey: 'esn',
|
||||
numberOfColumns: 2,
|
||||
title: 'ESN time'
|
||||
}, {
|
||||
startColumnKey: 'bad',
|
||||
numberOfColumns: 2,
|
||||
title: '状态'
|
||||
}];
|
||||
const rows = [];
|
||||
for(var i=0;i < 8; i++) {
|
||||
rows.push([
|
||||
'LTE',
|
||||
'abc',
|
||||
'2020-02-01',
|
||||
1,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
2
|
||||
]);
|
||||
}
|
||||
|
||||
let options = [{ text: "Select All Data", value: 1 },
|
||||
{ text: "Select Odd Rows", value: 2 },
|
||||
{ text: "Select Even Rows", value: 3 },];
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<Table
|
||||
columns={columns}
|
||||
groupHeaders={groupHeader}
|
||||
enableColumnDrag={true}
|
||||
enableColumnFilter={true}
|
||||
enableRowExpand={false}
|
||||
enableCheckBox={true}
|
||||
//checkBoxOptions={options}
|
||||
dataset={rows}
|
||||
height={450}
|
||||
//checkBoxPopupData={{ data: options, optionStyle: { width: '15rem' }, onItemClick: this.handleItemClick1 }}
|
||||
//headerCheckBoxSortAllow={false}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableSecondHeader />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 样式自定义（行样式）
|
||||
en-US: Style Custom(row style)
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class TableCustomStyle extends React.Component {
|
||||
|
||||
handleHeaderCheck = (row, checkedRows, e) => {
|
||||
console.log("header checked...")
|
||||
};
|
||||
|
||||
handleItemClick1 = (item) => {
|
||||
this.setState({ isShow1: false, value: item.value })
|
||||
};
|
||||
|
||||
render() {
|
||||
const columns = [
|
||||
{
|
||||
title: 'VPN Name',
|
||||
id: "col_1",
|
||||
width: '28rem',
|
||||
key: 'col_1',
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
render: cell => <div>{cell}</div>,
|
||||
id: "col_2",
|
||||
width: '30rem',
|
||||
key: 'col_2',
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
width: '30rem',
|
||||
key: 'col_3',
|
||||
},
|
||||
];
|
||||
|
||||
const rows = [];
|
||||
rows.push(['R&D VPN2', 'TO BE', 'ICMP Echo']);
|
||||
rows.push(['Shop Storage', 'Active', 'ICMP Echo']);
|
||||
rows.push(['IT Link', 'Active', 'Critical']);
|
||||
rows.push(['R&D VPN1', 'Active', 'Major']);
|
||||
rows.push(['R&D VPN6', 'TO BE', 'ICMP Echo']);
|
||||
rows.push(['R&D VPN7', 'TO BE', 'ICMP Echo']);
|
||||
rows.push(['R&D VPN8', 'TO BE', 'ICMP Echo']);
|
||||
rows.push(['R&D VPN9', 'TO BE', 'ICMP Echo']);
|
||||
rows.push(['R&D VPN10', 'TO BE', 'ICMP Echo']);
|
||||
|
||||
const customStyleRows = {
|
||||
0: { backgroundColor: '#aaf3bc' },
|
||||
3: { backgroundColor: '#fef7b4' }
|
||||
}
|
||||
const [version, theme] = getDemoVersion();
|
||||
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<Table
|
||||
columns={columns} // Column Details
|
||||
dataset={rows} // Data Set
|
||||
mutiSelectEnable={true}
|
||||
pagingType="select"
|
||||
height={'300px'}
|
||||
width={'100%'}
|
||||
enableCheckBox={true}
|
||||
customStyleRows={customStyleRows}
|
||||
onRowCheck={this.handleHeaderCheck}
|
||||
disableRowIds={[0,2]}
|
||||
disableHeaderCheckbox={true}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableCustomStyle />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: Tab切换基本属性设置
|
||||
en-US: Tab Basic Setting
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
|
||||
```jsx
|
||||
import Table from 'eview-ui/Table';
|
||||
import Tab from 'eview-ui/Tab';
|
||||
import TabItem from 'eview-ui/Tab';
|
||||
import ConfigProvider from 'eview-ui/ConfigProvider';
|
||||
import { getDemoVersion } from 'eview-ui/ThemeProvider';
|
||||
|
||||
export default class TableTabBasic extends React.Component {
|
||||
|
||||
|
||||
render() {
|
||||
let columns = [
|
||||
{
|
||||
title: 'VPN Name',
|
||||
key: 'col_1',
|
||||
id: "col_1",
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
allowSort: false,
|
||||
key: 'col_2',
|
||||
id: "col_2",
|
||||
},
|
||||
{
|
||||
title: 'Site',
|
||||
display: true, // Hide column,
|
||||
id: "col_3",
|
||||
key: 'col_3',
|
||||
},
|
||||
{
|
||||
title: 'Alarm',
|
||||
key: 'col_4',
|
||||
},
|
||||
{
|
||||
title: 'Last',
|
||||
key: 'col_5',
|
||||
},
|
||||
|
||||
];
|
||||
let options = [{text: "Select All Data", value: 1},
|
||||
{text: "Select Odd Rows", value: 2},
|
||||
{text: "Select Even Rows", value: 3},];
|
||||
const rows = [];
|
||||
rows.push(['R&D VPN2', 'TO BE', 3, 'ICMP Echo', 1]);
|
||||
rows.push(['R&D VPN2', 'TO BE', 3, 'ICMP Echo', 1]);
|
||||
|
||||
const rows_2 = [];
|
||||
rows_2.push(['R&D VPN2', 'TO BE', 3, 'ICMP Echo', 1]);
|
||||
rows_2.push(['R&D VPN2', 'TO BE', 3, 'ICMP Echo', 1]);
|
||||
rows_2.push(['R&D VPN2', 'TO BE', 3, 'ICMP Echo', 1]);
|
||||
const [version, theme] = getDemoVersion();
|
||||
return (
|
||||
// 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
|
||||
<ConfigProvider version={version} theme={theme}>
|
||||
<Tab type="sub" selectedIndex={0} lazyLoad={true}>
|
||||
<TabItem title="Tab1" closable={true}>
|
||||
<div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataset={rows}
|
||||
selectedRowIndex={2}
|
||||
enableColumnFilter
|
||||
checkBoxOptions={options}
|
||||
enableCheckBox
|
||||
maxHeight={150}
|
||||
/>
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem title="Tab2" closable={true}>
|
||||
<div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataset={rows_2}
|
||||
selectedRowIndex={2}
|
||||
enableColumnFilter
|
||||
checkBoxOptions={options}
|
||||
enableCheckBox
|
||||
maxHeight={150}
|
||||
/>
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tab>
|
||||
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TableTabBasic />, mountNode);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,342 @@
|
|||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
title: Table
|
||||
subtitle: 表格
|
||||
cols: 1
|
||||
---
|
||||
|
||||
表格组件，支持分页、列过滤、排序、列宽拖动、列编辑等多种功能。
|
||||
|
||||
## Shortcut Keys
|
||||
| Opration | Shortcut Keys |
|
||||
| -------------- | ----------- | ------ | ------------------------------------------------------------------------------------------------|
|
||||
| Tab | setFocus to the first header cell.Using tab key you set focus to next cell , In editable cell if use the tab again the focus set to the component like text filed , select etc |
|
||||
| ctrl+End | Focus Moved Out of the Table |
|
||||
| space or Enter | To select the checkBox |
|
||||
| RightArrow | Focus moves to the right side cell |
|
||||
| LeftArrow | Focus moves to the left side cell |
|
||||
| UpArrow | Focus moves to the upper cell |
|
||||
| DownArrow | Focus moves to the down cell |
|
||||
| shift+F | To open the column filter dialog |
|
||||
| Esc | To dispose the filter dialog |
|
||||
| Enter | To expand or collapse table row in expanded table |
|
||||
| ctrl+Home | To get focus to the first table header element. |
|
||||
| ctrl + Enter | 响应 doubleClick 事件 |
|
||||
| alt + Enter | 选中可选行 |
|
||||
|
||||
## API
|
||||
|
||||
| 方法名 | 描述 | 参数 | 返回值 |
|
||||
|-----------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------| ------ |
|
||||
| getSelectedRowData | 单击选中行原始数据(若无选中项，则为空数组):[v1, v2, v3, ...] | 无 | array |
|
||||
| getSelectedRowIndex | 单击选中行的行号 | 无 | number |
|
||||
| getCheckedRowsData | 多选框选中项数组(若无选中项，则为空数组):[...,[v1, v2, v3, ...], ...] | 无 | array |
|
||||
| getCheckedRowsIndexes | 多选框勾选行的行号 | 无 | array |
|
||||
| getCurrentPage | 获取表格当前展示页序号 | 无 | number |
|
||||
| getPageSize | 获取表格内展示的行数 | 无 | number |
|
||||
| getSortColumn | 放回当前排序列的key,原始column中定义的key | 无 | string |
|
||||
| getSortType | 返回当拍序列的排序方式 | 无 | string |
|
||||
| getDataset | Table中全量数据(若数据，则为空数组):[...,[v1, v2, v3, ...], ...] | 无 | array |
|
||||
| getEditData | 当前编辑行的数组(若无编辑中行，则为null):[v1, v2, v3, ...] | 无 | array |
|
||||
| setRowEditable | 设置指定行可编辑，如果columns设置了可编辑列的数组，则只会有此行的指定列可编辑；只可指定一行编辑。 | id, columns | object |
|
||||
| setSizeColumnFit | 设置指定列，使其内容能够完整展示; | id | None |
|
||||
| reSetcolumnSize | 将列宽重置为原始值。<br> 注意：该api只对列显隐及顺序没有改变的场景有效，其余场景请谨慎使用。 | None | None |
|
||||
| setScrollPositionToColumn | 滚动到指定的列位置. example:setScrollPositionToColumn(columnName) | string | None |
|
||||
| handleParentResize | 如果表格父元素宽度更新，则重新计算列宽 . example:handleParentResize() | None | None |
|
||||
| getRowClickNotTriggerCheckBoxFlag | 获取行选中时是否出发checkbox标识 . example:getRowClickNotTriggerCheckBoxFlag() | None | bool |
|
||||
| getOriginDataset | 传入Table中的全量原始数据(若数据为空，则为空数组):[...,[v1, v2, v3, ...], ...] | 无 | array |
|
||||
| getRowSlidingMultipleSelectedFlag | 获取是否开启滑动多选标识 . example:getRowSlidingMultipleSelectedFlag() | None | bool |
|
||||
| setScrollBarAt | 设置纵向滚动条的位置(只在设定了表格height的场景下起作用), 传入行号 . example: setScrollBarAt(rowId) | rowId | 无 |
|
||||
| resetStartRow | (ScrollTable组件专用)类似于setScrollBarAt的功能，支持从指定位置开始展示, 传入行号 . example: 取这个ref：wrapperRef={refTable => this.getTableWrapperRef = refTable}，然后用这个方法this.getTableWrapperRef.resetStartRow(0) | rowId | 无 |
|
||||
| setFilterClose | 设置过滤器关闭的回调函数 | 无 | 无 |
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名称 | 描述 | 输入 | 默认 |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| id | 表格的唯一标示编号，未指定则自动生成 | string | null |
|
||||
| columns| 定义表格列头。<br>注意：冻结列的位置要排在最前面 | array | |
|
||||
| dataset | 行数据：推荐使用对象形式{键1：值1，键2：值2，...}；键对应columns里的key | array | [] |
|
||||
| pagingType | 分页类型：下拉或数字（'list','select'） | string | 'list' |
|
||||
| className | Table组件所在div的样式 | string | |
|
||||
| height | Table组件的高度（像素. This height is applicable to table Body part, Excluding the Table Header, Scroll Bar & Pagination. | number | |
|
||||
| minHeight | Table组件的最小高度（像素） | number | '200px' |
|
||||
| width | Table组件的宽度（像素） | number | |
|
||||
| maxHeight | （以像素为单位）表格的最大高度。<br>注意：当配置maxHeight时，则不应配置height | number | |
|
||||
| onRowClick | 行选中事件回调<br><br>**签名:**<br>`function(row: Object, e: Object) => void`<br>*row:* 行对象<br>*e:* 原生点击事件 | function | null |
|
||||
| onRowMouseEnter | 行mouseenter事件回调<br><br>**签名:**<br>`function(row: Object, e: Object) => void`<br>*row:* 行对象<br>*e:* 原生点击事件 | function | null |
|
||||
| onRowMouseLeave | 行mouseleave事件回调<br><br>**签名:**<br>`function(row: Object, e: Object) => void`<br>*row:* 行对象<br>*e:* 原生点击事件 | function | null |
|
||||
| onCellClick | 单元格点击事件回调<br><br>**签名:**<br>`function(cell: Object, row: Object, e: Object) => void`<br>*cell:* 列对象<br>*row:* 行对象<br>*e:* 原生点击事件 | function | null |
|
||||
| onRowCheck | 行checkbox点击事件回调<br><br>**签名:**<br>`function(row: Object, checkedRows: array, e: Object) => void`<br>*row:* 行对象<br>*e:* 原生点击事件 | function | null |
|
||||
| onHeaderCheck | 表头勾选事件回调<br><br>**Signature:**<br>`function(checkedRows: array, checked: bool) => void`<br>*checkedRows:* 已勾选行数据主键数组，若设置keyIndex，数组元素为行数据中keyIndex列的数据，若不设置，则为行序号. <br>*checked:* 当前headerCheckbox勾选状态 | function | null |
|
||||
| onPageChange | 分页点击回调<br><br>**签名:**<br>`function(currentPage: num) => void`<br>*currentPage:* 当前页的序号 | function | null |
|
||||
| onPageSizeChange | 分页尺寸点击回调<br><br>**签名:**<br>`function(pageSize: num) => void`<br>*pageSize:* 表格页面可容纳行数 | function | null |
|
||||
| onColumnSort | 排序点击事件<br><br>**签名:**<br>`function(sortColumn: Object, sortType: string) => void`<br>*sortColumn:* 排序列<br>*sortType:* 排序方式 | function | null |
|
||||
| onRowExpend | 点击展开的时候的回调函数<br><br>**签名:**<br>`function(row: Object) => void`<br>*row:* Table行对象 <br> Note : Avoid calling the setState on Table in this method. If required to set the state in table then use onRowExpendClick | function | null |
|
||||
| customSortFun | 自定义排序函数<br><br>**Signature:**<br>`function(key: string, aValue: string, bValue: string) => -1(aValue>bValue), 1(bValue>aValue), 0(aValue==bValue)`<br>*key:* Column key value<br>*aValue:* first value to compare<br>*bValue:* second value to compare | function | function(key, aValue, bValue) {} |
|
||||
| onEdit | 单元格编辑时的回调函数 <br><br>**Signature:**<br>`function(oldval: string, newval: string, cell: Object, row: Object,event:Object) => void`<br>*oldval:* The current value of the cell<br>*newval:* the new value of the cell<br>*cell:* the current cell which is being edited<br>*row:* the current row which is being edited <br>*event:* native event for edit| function | function () { } |
|
||||
| onEditingCellBlur | 正在编辑的单元格的blur回调事件 <br><br>**Signature:**<br>`function(cell: Object, row: Object) => void`<br>*cell:* Cell that is being edited<br>*row:* Row that is being edited | function | function () { } |
|
||||
| enablePagination | 开启分页 。<br>注意：当表格column列数很少并且开启分页时，则不应该配置maxHeight，可能导致分页元素遮挡| bool | false |
|
||||
| pagingProps | Paging子组件的props, 详情请查阅Paging的API | object | |
|
||||
| splitPagination | 如果为“true”，则将分页切换到右侧。| bool | true |
|
||||
| enableColumnDrag | 开启拖动 | bool | true |
|
||||
| enableColumnFilter | 开启列筛选 | bool | false |
|
||||
| columnFilterZIndex | 自定义列筛选Dialog的zIndex | bool | false |
|
||||
| enableCheckBox | 开启多选框复选支持 | bool | false |
|
||||
| disableHeaderCheckbox | 是否禁用表头复选框 | bool | false |
|
||||
| checkType | 启用复选框时，可指定选择类型。Single : 单选, Multi : 多选 | enum:<br> 'single'<br> 'multi'<br> | multi |
|
||||
| HeaderCheckedStatus | 业务组自行控制表头复选框的状态（ScrollTable、VirtualizedTable 需要用到该属性）。可选项有：empty、all、half | string | |
|
||||
| enableRowExpand | 启用展开 | bool | false |
|
||||
| enableMulitiExpand | 允许展开多个 | bool | false |
|
||||
| pageSize | 表格可展示行数：是 pageSizeOptions 的第 0 个元素 | number | 10 |
|
||||
| recordCount | 总记录数 | number | 0 |
|
||||
| recordCountDisp | 自定义总记录数的显示，会替代recordCount作为展示内容 | string | |
|
||||
| currentPage | 当前页码 | number | 1 |
|
||||
| pageSizeOptions | 分页选项<br>[10, 20, 50, 100] | array | [10, 20, 50, 100] |
|
||||
| selectedRowIndex | 设置选中行号 | number | null |
|
||||
| checkedRows | checkbox勾选项数组，如果是ScrollTable，则checkedRows中需要保存原始全量数据的索引 | array | [] |
|
||||
| disableRowIds | Array of rowIds to disable | array | [] |
|
||||
| disableRowExpand | 传入rowId禁用行展开 | array | [] |
|
||||
| onRowRightClick | 鼠标右键单击事件回调函数 <br><br>**签名:**<br>`function(e: Object, row: Object) => void`<br>*e:* Native click event<br>*row:* Line object | function | |
|
||||
| cellClassName | 会应用于单个单元格的类名里。形如以下格式的对象：`{ [rowindex]: { [colkey]:[cellclassname] } }`<br><br>注意：此类中给出的样式不应尝试覆盖可能会扰乱组件本身的默认样式。使用该属性时要小心 | object | |
|
||||
| customStyleRows | 为指定行设置css style, 数据格式如下: `{[rowindex]: {rowStyle} }` 或者传入一个函数，返回数据结构 { className: value1, style: value2 }, 不必同时存在className和style 将作用于整个行样式。注意: 该属性仅支持自定义行样式，无法覆盖单元格样式。 | object | |
|
||||
| rowStyle | 为所有行设置css style, 数据格式如下: `{{rowStyle}}`。注意: 该属性优先级比customStyleRows要低，会被customStyleRows样式覆盖。 | object | |
|
||||
| itemOrderChanger| 在列选择器里是否使用项目顺序调整功能 | bool |false|
|
||||
| disableEviewSort| 如果业务组不希望使用组件的默认排序能力，可使用该属性。注意：如果设置为真， "customSortFun" 也将不会再调用 | bool |false|
|
||||
| mutiSelectEnable| if true the multi select using control+click is supported .| bool |false|
|
||||
| onFilterOkClick | 列展示双向选择器中“确定”按钮的回调函数。<br><br>**Signature:**<br>`function(leftItems: Object, rightItems: Object) => void`<br>*leftItems:* Line object <br>*rightItems:* Line object | function | |
|
||||
| editOptions | 启用renderType: Table.ColumnRenderType.SELECT时，可按行、按列自定义select组件的options（可参考 列依赖性 样例）。格式为一个二维数组：[ [{列的key: { options: {}, isEditable: true/false } }], [...], ] 其中 isEditable属性为false时，用于表示单元格不可编辑 | array | |
|
||||
| onColumnSizeChange| 列宽调整时的回调函数.<br><br>**签名:**<br>`function(column: Object) => void`<br>*column:* column object |function|null|
|
||||
| paginationPopupDirection | 定义分页组件中每页展示数控件弹出窗口的方向 | enum:<br> 'top'<br> 'bottom'<br> | |
|
||||
| onDoubleClick | 双击不可编辑单元格上的事件回调 <br><br>**签名:**<br>`function(row: Object, cell: Object,e:Object) => void`<br>*row:* Line object <br>*cell:* cell object <br>*e:* Native click event| function | |
|
||||
| expandedRow | 已扩展的行索引数组 | array | [] |
|
||||
|onRowExpendClick| 行展示时的回调函数 <br><br>**签名:**<br>`function( row: Object) => void`<br>*row:* Line object <br> Note : Related Callback onRowExpend|function| |
|
||||
| showEmptyImage| 当表中不存在数据时，是否展示默认背景图 | bool |true|
|
||||
| emptyTableMsg| 当表中不存在数据时，自定义展示消息 | string |true|
|
||||
| useCustomToolTip| 启用自定义提示框，代替浏览器提示框。| bool |false|
|
||||
| customToolTipStyle| 自定义提示框样式，需和useCustomToolTip一块使用。| object | {} |
|
||||
| showTooltipOverFlow | 是否文本溢出时才显示自定义 tooltip （0.1.x 版本支持) | boolean | false |
|
||||
|checkBoxPopupData| 在表头checkbox列旁边支持生成一个popup弹出框，参考 基本属性设置 样例。数据形如 {{data:options, optionStyle:{ width: '15rem' },onItemClick:this.handleItemClick1 }}.| object | |
|
||||
|isRequiredToUpdateColumns| 是否更新columns。如果设置为true，不会保存之前的列状态，由业务组自己维护列状态。<br>特殊场景：如果设置为 [["width"]]，表示列宽度将由组件维护保存，此时外部重新设置的列宽将不起作用。 | bool或[["width"]] | false |
|
||||
|pagingSelectWidth| 自定义分页中Select下拉菜单的宽度 | string | |
|
||||
|totalCount| 总记录数(滚动表格和滚动分页动态表格使用)，此字段应为必填字段 | number |0 |
|
||||
|displayPerPage| 设置每页的记录数，如果用户没有输入，则由组件通过行高计算生成 | number |0 |
|
||||
| onTurnPage | 滚动表格滚动时的回调函数，参数（currentStartRow, oldStartRow, displayPerPage, event）,分别是当前页起始序号、上次序号、每页展示数、事件 | function | none |
|
||||
| headerCheckBoxSortAllow| 是否允许表头复选框选中元素排序，为true，则出现排序箭头图标 | bool |false|
|
||||
| slidingMultipleSelected| 是否开启滑动多选，默认不开启。(此功能在enableCheckBox为true是生效) | bool |false|
|
||||
| onMouseUpOnRowForDrag| 滑动选择事件,参数(startRow, endRow, checkedRows, e)分别是滑动起始行、结束行、选中行、事件 . | function | none |
|
||||
| onHeaderColumnSort| 表头checkbox排序点击事件响应函数 .<br>`function(event: Object, sort: string) => void`<br>event:鼠标点击事件<br>*sort:* 排序类型 'asc' or 'desc'<br>| function | none |
|
||||
| enableShowLineNumber| 是否显示行号列 | bool | false|
|
||||
| groupHeaders | 二级表头。使用原有columns配置二级表头的第二行列头。使用此配置配置二级表头的第一行列头。未配置列合并的表头会自动进行行合并。例如： [{startColumnKey： String 指定开始列的Key,numberOfColumns: Number 合并列的个数,title: String 列头显示的文本}，...] | array | [] |
|
||||
| allowShortCutsFilter| 允许快捷方式 shift+F 打开列过滤器对话框 | bool | true |
|
||||
| isScrollToExpandedRow| 是否滚动到展开行(表体Y轴出现滚动条属性生效) | bool | false |
|
||||
| disableHeaderDoubClick| 是否禁用表头的双击恢复列宽 | bool | false |
|
||||
| disableCheckboxArr | 是否禁用checkBox复选框 | array | [] |
|
||||
| onMouseMoveOnRowForDrag | 滑动多选过程中的回调 `function( checkedRows: Object) => void` | function | null |
|
||||
| defaultColumns | 设置表格重置的默认值, 数组中传入columns中key值 | array | |
|
||||
| enableOriginSort | 设置是否排序中存在origin 状态 | boolean | true |
|
||||
| onScroll | 滚动回调 | function(target) | |
|
||||
| keepTableWidthAfterDragging | 拖拽中是否保持表格宽度不变 | boolean | true |
|
||||
| canTabIntoTable | 是否可以使用tab键进入到表格内部，默认只能通过方向键 | boolean | false |
|
||||
| autoAdjustMaxWidth | Sets the table column width to the maximum value configured | number | 1000 |
|
||||
| autoAdjustWidth | Enables the table column width auto adjust feature | boolean | false |
|
||||
| enableZebraCrossing | 表格是否显示斑马纹(aui3.0有效) | boolean | false |
|
||||
| isDisplayHeaderMultipleLine | 是否开启表头列换行展示,注意该功能不适用于居中对齐的列 | boolean | false |
|
||||
| enableColumnFilterSearch | 列筛选是否支持搜索 | boolean | false |
|
||||
|
||||
## 属性详情
|
||||
|
||||
> 列 `<a id="columns"></a>`
|
||||
|
||||
| 属性名称 | 描述 | 输入 | 默认 |
|
||||
|:-----|:--------------------------------------------|:-----|:-----|
|
||||
| align | 列对齐，支持3个属性 'left' 'center' 'right' | string | 'center' |
|
||||
| allowSort | 设置列顺序切换,支持'true' 'false' | bool | 'true' |
|
||||
| sort | 添加一个默认排序类型之后点击不再排序，支持3个属性'asc' 'desc' 'origin' | string | 'asc' |
|
||||
| display | 列显示或隐藏 | bool | 'true' |
|
||||
| renderType | 设置列编辑类型。如果该参数不设置该字段的值不可编辑。参考上述参数枚举值 | object | 'text_field','date_picker','check_box','check_box_group','radio','select','progress_bar','custom' |
|
||||
| getCompareValue | 设置本地排序功能 | function | ' v => v.age'|
|
||||
| key | 列数据的唯一标识 必须传入 | object | |
|
||||
| options | 需要建立编辑列表渲染的其他参数根据呈现类型 | object | '{}' |
|
||||
| render | td中展现定制内容。编辑是其处于编辑模式时| function |'(v, r,options,row,{isEdit}) => ${v.age} Year' |
|
||||
| tipFormatter | 自定义鼠标移入单元格后提示信息显示的内容，配置tipFormatter = 'custom_NO_TIP'，则此列(包含列头）不显示title或tip；配置function，将cell对象处理成title可识别的文本。<br><br> 特例：希望某数据单元格不弹出tip，可返回一个空格' '，组件会视为此时不需要弹出tip。 | function or string | tipFormatter: (cellValue) => { return 'text'; } |
|
||||
| titleTipShow | 列头是否展示title. 目前支持 : 'always', 'never' | string | 'always' |
|
||||
| titleTipData | 自定义列头title属性的内容，默认为列头内容 | string | |
|
||||
| title | 列title，必配 | string | |
|
||||
| width | 列宽 | number | |
|
||||
| validator | 回调的onchange事件验证文本字段,这样用户可以验证并显示错误提示 | function | |
|
||||
| customSort | 是否支持自定义排序 | bool | |
|
||||
| isMovable | 列是否可被移动 | bool | 'true' |
|
||||
| isEditable | 列是否可编辑 | bool | 'true' |
|
||||
| displayPolicy | 如果此属性设置为'不'与该列显示false不会向用户显示在任何一点也不过滤对话框中。但此属性必须配合用户显示错误还会有不良影响列显示。| string | 'never' |
|
||||
| customProps | 用户可以添加自定义组件道具在此对象。支持道具选择Style为输入和Selectcomponent.Eg定义道具{选项样式选项样式} | string | |
|
||||
| freezeCol | 如果该属性配置在水平滚动该列将一直处于可见area.if此属性配置为true则不可见filterbox| bool | 'true' |
|
||||
| cellClassName | 它可以用来设置rowcells classname的特定列 | string | 'classnameforcellsofthiscolumn' |
|
||||
| filter | 启用按列过滤功能： 包含属性有component: 自定义组件, className: 'eui_table_filter', style: { color: 'red' } | object | '{}' |
|
||||
| isFiltered | 如果该列已经被过滤，则用户应该将值修改为true. | bool | 'false' |
|
||||
| enableRowMoveUpDown | 支持行上移下移，设置为true，支持行上移下移，在当前列增加上移下移图标| bool | 'false' |
|
||||
| disableOrderChange | 如果设置为true，该列不支持调整。| bool | 'false' |
|
||||
| lineWrap | 如果需要table纯文本内容支持换行展示，可以设置此属性为‘lineWrap’，默认不换行展示。| string | 'lineWrap' |
|
||||
|
||||
## 枚举类型
|
||||
|
||||
> ColumnRenderType
|
||||
|
||||
| 枚举常量名 | 值 | 描述 |
|
||||
| --------------- | ----------------- | ------------------------------|
|
||||
| TEXT_FIELD | 'text_field', | 单行文本控件 |
|
||||
| DATE_PICKER | 'date_picker' | 日期选择控件 |
|
||||
| TIME_SELECTOR | 'time_selector' | 时间选择控制 |
|
||||
| CHECK_BOX | 'check_box' | 复选控件 |
|
||||
| CHECK_BOX_GROUP | 'check_box_group' | 复选控件组 |
|
||||
| RADIO_GROUP | 'radio_group' | 单选控件 |
|
||||
| SELECT | 'select' | 下拉选择控件 |
|
||||
| INPUT_SELECT | 'InputSelect' | 下拉选择控件 |
|
||||
| PROGRESS_BAR | 'progress_bar' | 进度条控件(只展示，不参与编辑) |
|
||||
| CUSTOM | 'custom' | 自定义控件(自己render) |
|
||||
|
||||
|
||||
> Table.ColumnRenderType.CHECK_BOX_GROUP | Table.ColumnRenderType.RADIO | Table.ColumnRenderType.SELECT| Table.ColumnRenderType.INPUT_SELECT
|
||||
|
||||
```json
|
||||
options: [
|
||||
{ "text": "唱歌", "value": 1 },
|
||||
{ "text": "游泳", "value": 2 },
|
||||
{ "text": "拍片", "value": 3 },
|
||||
{ "text": "打牌", "value": 4 },
|
||||
],
|
||||
|
||||
dataset: [
|
||||
...,
|
||||
[...,[1, 3],...] // 对应dataset中该列传值，意义是选中【唱歌】，【拍片】
|
||||
...,
|
||||
]
|
||||
```
|
||||
> Table.ColumnRenderType.SELECT
|
||||
|
||||
```json
|
||||
options: [
|
||||
{ "text": "唱歌", "value": 1 },
|
||||
{ "text": "游泳", "value": 2 },
|
||||
{ "text": "拍片", "value": 3 },
|
||||
{ "text": "打牌", "value": 4 },
|
||||
],
|
||||
isShowPopup:true,
|
||||
dataset: [
|
||||
...,
|
||||
[...,[1, 3],...] // 对应dataset中该列传值，意义是选中【唱歌】，【拍片】
|
||||
...,
|
||||
]
|
||||
```
|
||||
|
||||
> Table.ColumnRenderType.CHECK_BOX
|
||||
|
||||
```json
|
||||
options: {
|
||||
"label": "激活",
|
||||
},
|
||||
dataset: [
|
||||
...,
|
||||
[...,true,...] // 对应dataset中该列传值，意义是选中
|
||||
...,
|
||||
]
|
||||
```
|
||||
> Table.ColumnRenderType.TIME_SELECTOR
|
||||
```json
|
||||
options:{format:'hh:mm:ss'},
|
||||
```
|
||||
> Table.ColumnRenderType.DATE_PICKER
|
||||
```json
|
||||
options:{type:'datetime',callBack:clientTimezoneRule},
|
||||
```
|
||||
> Table.ColumnRenderType.PROGRESS_BAR
|
||||
|
||||
```json
|
||||
options: {
|
||||
"format": "percent",
|
||||
},
|
||||
dataset: [
|
||||
...,
|
||||
[...,98,...] // 对应dataset中该列传值，意义是选中
|
||||
...,
|
||||
]
|
||||
```
|
||||
**对于其它 `renderType` 无需设置 `options`**
|
||||
- **render** `可选` 设置字段的渲染函数，未设置则根据 `renderType` 渲染
|
||||
- **title** `必填` 显示在标头上的名称
|
||||
```json
|
||||
{
|
||||
"title": "School",
|
||||
}
|
||||
```
|
||||
- **tipFormatter** `选填` 设置鼠标悬浮在单元格上时显示的内容的渲染函数（若数据为非文本或不可直接转为文本则必填）
|
||||
- **width** `可选` 设置列宽度，如果没有设置，列宽自适应。纯数字。
|
||||
```json
|
||||
{
|
||||
"width": 120,
|
||||
}
|
||||
```
|
||||
## 注意事项
|
||||
- 事项一：ScrollTable、VirturalizedTable组件的使用过程中，当存在虚拟滚动条时，由于其逻辑计算与表格高度、行高等密切相关，要求使用者需要保证整体最小高度起码有一行数据能显示全，否则可能会出现滚动条不显示的异常情形。
|
||||
- 事项二：Table组件表头复现框的选中状态由当前表格所有数据的状态控制。规则为：<br/>
|
||||
1、数据项都为选中态，则表头为全选；<br/>
|
||||
2、数据项都为未选中态，则表头为未选中；<br/>
|
||||
3、否则为半选；<br/>
|
||||
至于数据项是否为选中态，规则为：<br/>
|
||||
1、真实选中，即出现在checkedRows里；<br/>
|
||||
2、checkedRows长度大于0且出现在disableRowIds里；<br/>
|
||||
3、checkedRows长度大于0且出现在disableCheckboxArr里；<br/>
|
||||
由于历史原因，此规则一直沿用。如有不适用场景，请使用 HeaderCheckedStatus 属性，自行控制状态。
|
||||
- 事项三：仅ScrollTable支持shift跨页勾选。规则为：<br/>
|
||||
1、需要给ScrollTable传入enableShiftCheck=true字段
|
||||
2、相应的表格数据需新增`{key:"scrollRowIndex",value:i}`
|
||||
|
||||
- 如果是二维数组形式的数据
|
||||
|
||||
```
|
||||
const totalDataList = [];
|
||||
for(let i = 0; i < 20000; i++) {
|
||||
totalDataList.push([
|
||||
i,
|
||||
`VPN Name${i}`,
|
||||
`State${i}`,
|
||||
`Site${i}`,
|
||||
`Alarm${i}`,
|
||||
`Warn${i}`,
|
||||
`Info${i}`,
|
||||
`Error${i}`,
|
||||
{key:"scrollRowIndex",value:i},//其中i 为原始数据下标
|
||||
]);
|
||||
}
|
||||
```
|
||||
|
||||
- 如果是对象数组的形式格式如下
|
||||
|
||||
```
|
||||
const totalDataList = [];
|
||||
for(let i = 0; i < 20000; i++) {
|
||||
totalDataList.push({
|
||||
id: i,
|
||||
name: `VPN Name${i}`,
|
||||
state: `State${i}`,
|
||||
site: `Site${i}`,
|
||||
alarm: `Alarm${i}`,
|
||||
warn: `Warn${i}`,
|
||||
info: `Info${i}`,
|
||||
error: `Error${i}`,
|
||||
scrollRowIndex:i //其中i为原始数组下标
|
||||
});
|
||||
}
|
||||
```
|
||||
3、仅支持一次传入全量数据的使用场景，滚动请求新数据的场景不支持shift跨页勾选；<br/>
|
||||
4、操作shift跨页勾选时，单次操作数据量应该小于1万，否则不保证操作性能；<br/>
|
||||
5、跨页shift多选不支持排序操作；<br/>
|
||||
|
||||
## 特殊场景处理方案
|
||||
|
||||
### 场景一：表格设置了最大高度，扩展行内容延时加载，撑满最大高度后，表格缺少竖向滚动条
|
||||
- 可通过table句柄，调用 setTableHeight() 方法来调整表格样式
|
||||
|
||||
### 场景二：表格设置了高度、isScrollToExpandedRow，扩展行内容延时加载，扩展行内容未显示完整
|
||||
- 可通过table句柄，在扩展行内容渲染完成后调用 scrollToExpandedRow() 方法来手动调整
|
||||
Loading…
Reference in New Issue