mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
up tree-select
This commit is contained in:
然则
parent
e5b023a7ac
commit
b1780a0947
@ -10,19 +10,63 @@
|
||||
import { TreeSelect } from 'antd';
|
||||
const TreeNode = TreeSelect.TreeNode;
|
||||
|
||||
const x = 3;
|
||||
const y = 2;
|
||||
const z = 1;
|
||||
const gData = []; // 手工构造数据
|
||||
const generateData = (_level, _preKey, _tns) => {
|
||||
const preKey = _preKey || '0';
|
||||
const tns = _tns || gData;
|
||||
const children = [];
|
||||
for (let i = 0; i < x; i++) {
|
||||
const key = `${preKey}-${i}`;
|
||||
tns.push({
|
||||
label: key + '-label',
|
||||
value: key + '-value',
|
||||
key: key,
|
||||
});
|
||||
if (i < y) {
|
||||
children.push(key);
|
||||
}
|
||||
}
|
||||
if (_level < 0) {
|
||||
return tns;
|
||||
}
|
||||
const __level = _level - 1;
|
||||
children.forEach((key, index) => {
|
||||
tns[index].children = [];
|
||||
return generateData(__level, key, tns[index].children);
|
||||
});
|
||||
};
|
||||
generateData(z);
|
||||
|
||||
const Demo = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
value: 'leaf1',
|
||||
value: '',
|
||||
};
|
||||
},
|
||||
onChange(value) {
|
||||
console.log(arguments);
|
||||
this.setState({ value });
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<TreeSelect style={{ width: 360 }} showSearch
|
||||
value={this.state.value} optionLabelProp="title"
|
||||
return (<div>
|
||||
<h5>使用 treeData</h5>
|
||||
<TreeSelect style={{ width: 360 }}
|
||||
dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
|
||||
treeData={gData} showSearch
|
||||
value={this.state.value}
|
||||
treeDefaultExpandAll
|
||||
placeholder={<i>请下拉选择</i>}
|
||||
searchPlaceholder="please search"
|
||||
treeNodeFilterProp="title"
|
||||
onChange={this.onChange} />
|
||||
|
||||
<br /><br />
|
||||
<h5>手工构造 TreeNode</h5>
|
||||
<TreeSelect style={{ width: 360 }}
|
||||
value={this.state.value}
|
||||
dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
treeDefaultExpandAll
|
||||
onChange={this.onChange}>
|
||||
@ -32,11 +76,11 @@ const Demo = React.createClass({
|
||||
<TreeNode value="leaf2" title="your leaf" key="random1" />
|
||||
</TreeNode>
|
||||
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
|
||||
<TreeNode value="sss" title="sss" key="random3" />
|
||||
<TreeNode value="sss" title={<b style={{ color: 'red' }}>sss</b>} key="random3" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</TreeSelect>
|
||||
);
|
||||
</div>);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -8,20 +8,22 @@
|
||||
|
||||
````jsx
|
||||
import { TreeSelect } from 'antd';
|
||||
const TreeNode = TreeSelect.TreeNode;
|
||||
|
||||
const x = 3;
|
||||
const y = 2;
|
||||
const z = 1;
|
||||
const gData = [];
|
||||
const gData = []; // 手工构造数据
|
||||
const generateData = (_level, _preKey, _tns) => {
|
||||
const preKey = _preKey || '0';
|
||||
const tns = _tns || gData;
|
||||
|
||||
const children = [];
|
||||
for (let i = 0; i < x; i++) {
|
||||
const key = `${preKey}-${i}`;
|
||||
tns.push({ title: key, key: key });
|
||||
tns.push({
|
||||
label: key + '-label',
|
||||
value: key + '-value',
|
||||
key: key,
|
||||
});
|
||||
if (i < y) {
|
||||
children.push(key);
|
||||
}
|
||||
@ -40,23 +42,16 @@ generateData(z);
|
||||
const Demo = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
value: ['0-0'],
|
||||
value: ['0-0-0-value'],
|
||||
};
|
||||
},
|
||||
onChange(value) {
|
||||
console.log('onChange ' + value);
|
||||
console.log('onChange ', value, arguments);
|
||||
this.setState({ value });
|
||||
},
|
||||
render() {
|
||||
const loop = data => {
|
||||
return data.map((item) => {
|
||||
if (item.children) {
|
||||
return <TreeNode key={item.key} value={item.key} title={item.key}>{loop(item.children)}</TreeNode>;
|
||||
}
|
||||
return <TreeNode key={item.key} value={item.key} title={item.key} />;
|
||||
});
|
||||
};
|
||||
const tProps = {
|
||||
treeData: gData,
|
||||
value: this.state.value,
|
||||
onChange: this.onChange,
|
||||
multiple: true,
|
||||
@ -64,9 +59,7 @@ const Demo = React.createClass({
|
||||
treeDefaultExpandAll: true,
|
||||
};
|
||||
return (
|
||||
<TreeSelect {...tProps}>
|
||||
{loop(gData)}
|
||||
</TreeSelect>
|
||||
<TreeSelect style={{ width: 360 }} {...tProps} />
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@ -8,12 +8,41 @@
|
||||
|
||||
````jsx
|
||||
import { TreeSelect } from 'antd';
|
||||
const TreeNode = TreeSelect.TreeNode;
|
||||
|
||||
const x = 3;
|
||||
const y = 2;
|
||||
const z = 1;
|
||||
const gData = []; // 手工构造数据
|
||||
const generateData = (_level, _preKey, _tns) => {
|
||||
const preKey = _preKey || '0';
|
||||
const tns = _tns || gData;
|
||||
const children = [];
|
||||
for (let i = 0; i < x; i++) {
|
||||
const key = `${preKey}-${i}`;
|
||||
tns.push({
|
||||
label: key + '-label',
|
||||
value: key + '-value',
|
||||
key: key,
|
||||
});
|
||||
if (i < y) {
|
||||
children.push(key);
|
||||
}
|
||||
}
|
||||
if (_level < 0) {
|
||||
return tns;
|
||||
}
|
||||
const __level = _level - 1;
|
||||
children.forEach((key, index) => {
|
||||
tns[index].children = [];
|
||||
return generateData(__level, key, tns[index].children);
|
||||
});
|
||||
};
|
||||
generateData(z);
|
||||
|
||||
const Demo = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
value: 'leaf1',
|
||||
value: '',
|
||||
};
|
||||
},
|
||||
onChange(value) {
|
||||
@ -22,53 +51,26 @@ const Demo = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<TreeSelect size="large" style={{ width: 360 }} showSearch
|
||||
value={this.state.value} optionLabelProp="title"
|
||||
<TreeSelect size="large" style={{ width: 360 }}
|
||||
dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
treeData={gData}
|
||||
value={this.state.value}
|
||||
treeDefaultExpandAll
|
||||
onChange={this.onChange}>
|
||||
<TreeNode value="parent 1" title="parent 1" key="0-1">
|
||||
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
|
||||
<TreeNode value="leaf1" title="my leaf" key="random" />
|
||||
<TreeNode value="leaf2" title="your leaf" key="random1" />
|
||||
</TreeNode>
|
||||
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
|
||||
<TreeNode value="sss" title="sss" key="random3" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</TreeSelect>
|
||||
onChange={this.onChange} />
|
||||
<br /><br />
|
||||
<TreeSelect style={{ width: 360 }} showSearch
|
||||
value={this.state.value} optionLabelProp="title"
|
||||
<TreeSelect style={{ width: 360 }}
|
||||
dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
treeData={gData}
|
||||
value={this.state.value}
|
||||
treeDefaultExpandAll
|
||||
onChange={this.onChange}>
|
||||
<TreeNode value="parent 1" title="parent 1" key="0-1">
|
||||
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
|
||||
<TreeNode value="leaf1" title="my leaf" key="random" />
|
||||
<TreeNode value="leaf2" title="your leaf" key="random1" />
|
||||
</TreeNode>
|
||||
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
|
||||
<TreeNode value="sss" title="sss" key="random3" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</TreeSelect>
|
||||
onChange={this.onChange} />
|
||||
<br /><br />
|
||||
<TreeSelect size="small" style={{ width: 360 }} showSearch
|
||||
value={this.state.value} optionLabelProp="title"
|
||||
<TreeSelect size="small" style={{ width: 360 }}
|
||||
dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
treeData={gData}
|
||||
value={this.state.value}
|
||||
treeDefaultExpandAll
|
||||
onChange={this.onChange}>
|
||||
<TreeNode value="parent 1" title="parent 1" key="0-1">
|
||||
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
|
||||
<TreeNode value="leaf1" title="my leaf" key="random" />
|
||||
<TreeNode value="leaf2" title="your leaf" key="random1" />
|
||||
</TreeNode>
|
||||
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
|
||||
<TreeNode value="sss" title="sss" key="random3" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</TreeSelect>
|
||||
onChange={this.onChange} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@ -8,7 +8,6 @@ const AntTreeSelect = React.createClass({
|
||||
return {
|
||||
prefixCls: 'ant-tree-select',
|
||||
transitionName: 'slide-up',
|
||||
optionLabelProp: 'value',
|
||||
choiceTransitionName: 'zoom',
|
||||
showSearch: false,
|
||||
// openAnimation: animation,
|
||||
|
||||
@ -38,14 +38,16 @@
|
||||
| filterTreeNode | 是否根据输入项进行筛选，返回值true | function(treeNode) | - |
|
||||
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | String | 'value' |
|
||||
| treeNodeLabelProp | 作为显示的prop设置 | String | 'title' |
|
||||
| treeData | treeNodes数据，如果设置则不需要手动构造TreeNode节点（如果value在整个树范围内不唯一，需要设置`key`其值为整个树范围内的唯一id | array<{value, label, children}> | [] |
|
||||
| loadData | 异步加载数据 | function(node) | - |
|
||||
|
||||
### TreeNode props
|
||||
> 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|------------------------------------------|------------|--------|
|
||||
| disabled | 是否禁用 | Boolean | false |
|
||||
| key | 此项必须设置 | String | |
|
||||
| key | 此项必须设置（其值在整个树范围内唯一） | String | - |
|
||||
| value | 默认根据此属性值进行筛选 | String | - |
|
||||
| title | 树节点显示的内容 | String | '---' |
|
||||
| isLeaf | 是否是叶子节点 | bool | false |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user