react-component / tree-select Goto Github PK
View Code? Open in Web Editor NEWReact Tree Select
Home Page: https://tree-select.react-component.now.sh/
License: MIT License
React Tree Select
Home Page: https://tree-select.react-component.now.sh/
License: MIT License
现在的场景是这样的,我把部门和用户放在这颗树下,onChange 触发是我想知道选中了哪些部门和用户,现在只能得到ids,无法区分出数组和部门。
期望在onChange 中得到全部的节点数据而不是只有ids。
The checkboxes are not appearing and I believe it is due to the background-image url being used ("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png") is down.
Hello,
Could it be possible to add a feature to wrap the disabled nodes?
Cheers,
Lilion12
First of all: Awesome work on the Component! Thanks!!
I want to show trees with deep hierarchies, which is why I want to set the treeDefaultExpandAll
initially to false. However when I perform a search, and there are matches I would like to show the tree expanded. Is there a way to do this?
My first intuition was to set the treeDefaultExpandAll
to true while doing a search:
<TreeSelect
treeDefaultExpandAll={this.state.expandAll}
onSearch={(val) => {
this.setState({expandAll: (val && val !== '')})
}}>
...
/>
But my aproach does not work, the tree does not expand while typing. Is there a way to do this. I would also be willing to help out in any way.
big data demo 中当节点达到15万个时,整个界面都开始无法操作,反应十分缓慢
i used same code as before:
<TreeSelect className={`${prefixCls}-value-input`}
dropdownClassName={`${prefixCls}-value-dropdown`}
showSearch
treeLine
value={item.id}
treeData={tree}
treeDataSimpleMode={{id:'id', pId:'parent_id', rootPId:null}}
dropdownMatchSelectWidth={false}
filterTreeNode={filterTreeNode}
showCheckedStrategy={TreeSelect.SHOW_ALL}
searchPlaceholder={searchPlaceholder || formatMessage(messages.searchPlaceholder)}
placeholder={valuePlaceholder || formatMessage(messages.valuePlaceholder)}
onChange={(id) => this.handleChanges({ id })}
/>
previously it was quite fast. in my case it's about 6k items at tree. Now it takes about 20 secs (previously it was about 3 secs). Any help?
I cannot change the disabled data, when I change the treeData it doesn't render as the treeData is. The component seems to don't change his property.
how to use in modal
在弹窗页面中使用tree-select组件的话无法显示下拉
Hi there,
I'm using TreeSelect via AntD and noticed that my dataset with approx 4000 nodes was performing extremely slow when expanding/collapsing nodes and especially when searching.
When checking the Big Data example, I had a similar issue, although this managed to cause my browser to crash (in both normal and checkStrictly modes.)
The above picture shows me searching for 0-0, which after taking a screenshot and beginning to report the issue, it finally came back to life:
Browser: Chrome 59.0.3071.115 (Official Build) (64-bit) (OSX)
Available memory: 3.10gb
Is there anyway to improve performance, even in strict checking mode?
Thanks
Is it possible to use showSearch prop in mutiple mode? I want user to allow search/filter the results in a deep hierarchy tree.
Also, Is there any property to close the tree-input (multiple mode) dropdown once user select any item?
I have trees which have icons; these icons depend on the current value of the node (level, node type), and gets the image from the Server. Something like this: ./ImageLoader/${node.level}/${node.type}
. Right now I can embed the image on the title:
<TreeNode
title={
<div>
<img src={'myurl...'} />
<span>{node.title}</span>
</div>}
value={node.value}
key={node.key}
isLeaf
/>
The problem with this aproach is that:
Would you consider extending the API of the TreeNode to accept an icon prop? I could also prepare a PR if you would be willing to integrate it.
It looks like the input text width is being incorrectly set when using IE11 when typing characters in the text box of the tree-select component.
Inspecting the DOM the width is getting set to 12px regardless what is typed in the search/input box:
input class="rc-tree-select-search__field" role="textbox" style="width: 12px;" value="the"
Looking into the source I'm seeing in the componentDidUpdate/DidMount its setting the width based on the scrollWidth:
inputNode.style.width =
${inputNode.scrollWidth}px
;
Update: Testing it on Edge has the same issue. Other browsers are fine and work perfectly.
If I pass in filterTreeNode
, I am able to customize which items are filtered. However, that is different from what is highlighted. I'd like for the highlighting to be consistent with the filtering. The easiest way would be to check if filterTreeNode
is defined, and if so, apply highlighting based on that prop, rather than highlighting independently
https://github.com/react-component/tree-select/blob/master/src/SelectTrigger.jsx#L175
For example:
filterTreeNode={(input, child) => { return child.props.value.toLowerCase().indexOf(input.toLowerCase()) > -1}}
I'd expect the highlight function to match:
highlightTreeNode={(input, child) => { return child.props.value.toLowerCase().indexOf(input.toLowerCase()) > -1}}
But since highlightTreeNode
is not a valid prop, the highlighting is different
Is it possible to have 'single' selection, but to mark selected items? here is case:
In the "check select" example (at http://react-component.github.io/tree-select/examples/basic.html) , sometimes is useful to not only to select the leaf nodes, but also the parent's.
For instance, in this example, it should select (maybe with an extra property to allow this mode) not only the already selected nodes, but also the node: 0-0-0-label
As a workaround we simply commented this line at Select.jsx
checkedNodes = checkedNodes.filter(n => !n.props.children);
Hey, I just found that there's an issue for the util. The scenario is that I have multiple trees like this:
[
{
"label": "A",
"value": "1",
"key": "1",
"parentId": null,
"isLeaf": false,
"children": [
{
"label": "A1",
"value": "2",
"key": "2",
"parentId": "1",
"isLeaf": true
},
{
"label": "A2",
"value": "3",
"key": "3",
"parentId": "1",
"isLeaf": true
}
]
},
{
"label": "B",
"value": "4",
"key": "4",
"parentId": null,
"isLeaf": false,
"children": [
{
"label": "BB",
"value": "5",
"key": "5",
"parentId": "4",
"isLeaf": true
}
]
},
{
"label": "C",
"value": "8",
"key": "8",
"parentId": null,
"isLeaf": false,
"children": [
{
"label": "CC",
"value": "9",
"key": "9",
"parentId": "8",
"isLeaf": true
}
]
}
]
In filterAllCheckedData
function, when I select all the root nodes (A B C
), and then select some of their children nodes, this checking will push an object with some undefined properties to checkedNodesPositions
.
if (siblingChecked === len) {
parent.__checked = true;
checkedNodesPositions.push({ node: parent, pos: parent._pos });
Later, it will throw errors on trying to split on the undefined property within flatToHierarchy
function.
I'm seeing react-virtualized has an example of visualized tree view, so I'm wondering if the tree-select can take some of that advantage to make the tree view visualized? My data could be pretty large on each level, so it will be useful to make it virtualized.
It seems that the current version does not have a insensitive string compare. Will it be possible to make the search case insensitive.
We can add a props that will trigger the type of search.
If I'm not wrong, it may there where we will need to change the current behviour :
SelectTrigger.jsx line 265 to 273
loopAllChildren(treeNodes, (child) => {
if (props.value.some(item => item.value === getValuePropValue(child))) {
keys.push(child.key);
}
if (props.halfCheckedValues &&
props.halfCheckedValues.some(item => item.value === getValuePropValue(child))) {
halfCheckedKeys.push(child.key);
}
});
I managed it to display the arrow and clear all for multi-select mode, but when I select more, the new selected nodes will be out of the box. Can it just display 2 or 3 nodes, then follow with "...(x more nodes selected)"?
页面需求是下拉选项一直显示。现在不支持。
想自己组织成那种形式,看了下代码这部分逻辑又是揉在一起的。
I saw this allowClear && !multiple ? clear : null
, so I wonder why don't allow clear for multiple mode? I think check select is also considered multiple mode, that would be nice if I can use one button to clear all selection.
i'm talking about only 'select' control, not for tree. You have 'select.less' and looks like it's same as for 'rc-select.less'. So my question - is it possible to use same styles as for rc-select?
treeCheckable模式下, 页面刚刚进入,按下BACKSPACE键在inputValue为空的情况下首次能删除node节点。 删除后再选中节点, 再按下BACKSPACE键,发现节点不能删除。
demo:http://codepen.io/mosikoo/pen/RKYeJv?editors=0110
出现bug处: https://github.com/react-component/tree-select/blob/master/src/Select.jsx#L321-L324
我觉得在this.fireChange(value);前上
this. _checkedNodes = xxxx // 这里xxx指value值
We are loading a tree of thousands of leaves, this component shows it perfectly, but it's so slow to search that it blocks the whole web page for a long while with high CPU usage.
Searching through this amount of leaves wasn't a issue with the jQuery fancytree we used before, so I guess the issue isn't with react, maybe we can figure out a way to improve the search method?
Now it seems the dropdown menu is positioned based on how much top to the whole page, so it gives me a problem that if I use the tree-select in a model. If I can scroll in the model, the dropdown menu will remain at the position it appears, which looks like it's broken.
<TreeSelect
className={className.select}
treeLine
treeCheckable
treeCheckStrictly
treeNodeFilterProp="label"
treeData={treeData}
value={selected}
placeholder={'Please Search'}
onChange={onChange}
/>
This is my code that using the lib, and the onChange is a callback function passed in from parent, the function only calls setState for selected values. But I found that doing search will show the matched items and their parents in the dropdown menu, then if I check an item, the previously selected items (not match the search) will be lost.
Hello,
As the title explains, when i remove an item from the list, the dropdown does not update, as depicted + code.
Select
<TreeSelect
className="select_country"
transitionName="rc-tree-select-dropdown-slide-up"
choiceTransitionName="rc-tree-select-selection__choice-zoom"
dropdownStyle={{height: 200, overflow: 'auto'}}
dropdownPopupAlign={{overflow: {adjustY: 0, adjustX: 0}, offset: [0, 2]}}
searchPlaceholder="Please choose a store"
treeLine
maxTagTextLength={10}
treeNodeFilterProp="title"
labelInValue={true}
inputValue={null}
showSearch={false}
treeData={simpleData }
treeDataSimpleMode={{
id: 'key',
rootPId: 0,
}}
defaultValue={this.props.defaultValue}
onChange={this.props.onChange}
allowClear={false}
treeCheckable={this.props.treeCheckable}
multiple={this.props.multiple}
/>
defaultValue
[
{
"value":256,
"label":"256 - AMSTERDAM ARENA"
},
{
"value":346,
"label":"346 - KERKRADE"
},
{
"value":664,
"label":"664 - BEST."
},
{
"value":896,
"label":"896 - APELDOORN"
},
{
"value":897,
"label":"897 - LEEUWARDEN"
},
{
"value":1088,
"label":"1088 - BREDA."
},
{
"value":1089,
"label":"1089 - ARNHEM"
},
{
"value":1161,
"label":"1161 - ROTTERDAM"
},
{
"value":1185,
"label":"1185 - EINDHOVEN"
},
{
"value":1186,
"label":"1186 - DEN HAAG"
}
]
`
treeData (simpleMode)
[
{
"key":25,
"label":"NETHERLANDS",
"value":10,
"disabled":false,
"pId":0
},
{
"key":74,
"label":"NL DGR PAYS BAS",
"value":22,
"disabled":false,
"pId":25
},
{
"key":42,
"label":"NL NOORD-HOLLAND",
"value":29,
"disabled":false,
"pId":74
},
{
"key":353,
"label":"346 - KERKRADE",
"value":346,
"disabled":false,
"pId":42
},
{
"key":671,
"label":"664 - BEST.",
"value":664,
"disabled":false,
"pId":42
},
{
"key":903,
"label":"896 - APELDOORN",
"value":896,
"disabled":false,
"pId":42
},
{
"key":904,
"label":"897 - LEEUWARDEN",
"value":897,
"disabled":false,
"pId":42
},
{
"key":1095,
"label":"1088 - BREDA.",
"value":1088,
"disabled":false,
"pId":42
},
{
"key":1096,
"label":"1089 - ARNHEM",
"value":1089,
"disabled":false,
"pId":42
},
{
"key":1168,
"label":"1161 - ROTTERDAM",
"value":1161,
"disabled":false,
"pId":42
},
{
"key":1192,
"label":"1185 - EINDHOVEN",
"value":1185,
"disabled":false,
"pId":42
},
{
"key":1193,
"label":"1186 - DEN HAAG",
"value":1186,
"disabled":false,
"pId":42
}
]
After click on the label
default value
[
{
"value":664,
"label":"664 - BEST."
},
{
"value":896,
"label":"896 - APELDOORN"
},
{
"value":897,
"label":"897 - LEEUWARDEN"
},
{
"value":1088,
"label":"1088 - BREDA."
},
{
"value":1089,
"label":"1089 - ARNHEM"
},
{
"value":1161,
"label":"1161 - ROTTERDAM"
},
{
"value":1185,
"label":"1185 - EINDHOVEN"
},
{
"value":1186,
"label":"1186 - DEN HAAG"
}
]
simpleTreeData
[
{
"key":25,
"label":"NETHERLANDS",
"value":10,
"disabled":false,
"pId":0
},
{
"key":74,
"label":"NL DGR PAYS BAS",
"value":22,
"disabled":false,
"pId":25
},
{
"key":42,
"label":"NL NOORD-HOLLAND",
"value":29,
"disabled":false,
"pId":74
},
{
"key":353,
"label":"346 - KERKRADE",
"value":346,
"disabled":false,
"pId":42
},
{
"key":671,
"label":"664 - BEST.",
"value":664,
"disabled":false,
"pId":42
},
{
"key":903,
"label":"896 - APELDOORN",
"value":896,
"disabled":false,
"pId":42
},
{
"key":904,
"label":"897 - LEEUWARDEN",
"value":897,
"disabled":false,
"pId":42
},
{
"key":1095,
"label":"1088 - BREDA.",
"value":1088,
"disabled":false,
"pId":42
},
{
"key":1096,
"label":"1089 - ARNHEM",
"value":1089,
"disabled":false,
"pId":42
},
{
"key":1168,
"label":"1161 - ROTTERDAM",
"value":1161,
"disabled":false,
"pId":42
},
{
"key":1192,
"label":"1185 - EINDHOVEN",
"value":1185,
"disabled":false,
"pId":42
},
{
"key":1193,
"label":"1186 - DEN HAAG",
"value":1186,
"disabled":false,
"pId":42
}
]
input state
Any idea?
Cheers!
需求如题。
急需,下周二交付
Hi,
Closing the dropdown requires two clicks outside the tree-select area. Interestingly, when using multiple=true, after I make a new selection then the first click anywhere in the screen does close the dropdown.
The behavior seems a little bit confusing to me, but it may be deliberate.
Is this working as expected or is it a bug?
(Tested on Chrome and Safari)
然后发个升级 PR 到 antd featrue 分支,并补充下文档。
<TreeSelect
onChange={}
value={}
defaultValue={}
className
allowClear
optionLabelProp
showSearch
optionFilterProp
disabled
transitionName
maxTagTextLength
dropdownMatchSelectWidth
dropdownClassName
dropdownStyle
notFoundContent
filterNode={}
selectMode="select" /"check"
onNodeLoad
treeIcon
treeLine
tags/combox/multiple>
<TreeNode disabled></TreeNode>
</TreeSelect>
I just update to 1.7.4, and found the node will be highlighted when I click on the node. I think it doesn't make sense to highlight it, but shows the node is not checked. I guess it needs a fix on rc-tree end.
Is it possible to check the checkbox when clicked on the label of that particular checkbox. (may be through onSelect or something along that line)
Changes were made to fireChange
method in Select.jsx
that are breaking. Previous versions would call fireChange
with two params, the code for selected item and extra info. 1.5.0 changed this to be called only with selected item value which is now an object.
Since this is a breaking change the version should have been implemented to 2.0.0 to avoid issues.
Here's the change: https://github.com/react-component/tree-select/blob/master/src/Select.jsx#L658
I have an array of object like this one and i canot see them in the select i get "Not Found" on it
Object
children: Array[11]
disabled : false
label: "FRANCE"
value: "FR"
proto: Object
If dropdown is open and I resize the window to be shorter, sometimes the dropdown will be positioned above the trigger. I would like an option to ignore this behavior and keep the dropdown placement below. Is this possible?
treeCheckStrictly, treeCheckable两属性都为true时,rc-animate会报错
错误显示
Animate.js:290 Uncaught Error: must set key for children at http://localhost:3000/dist/demo.js:2646:18 at Array.map (native) at Constructor.render (http://localhost:3000/dist/demo.js:2641:33) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:3000/node_modules/react/dist/react-with-addons.js:6336:34) at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:3000/node_modules/react/dist/react-with-addons.js:6356:32) at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (http://localhost:3000/node_modules/react/dist/react-with-addons.js:12883:21) at ReactCompositeComponentWrapper.mountComponent (http://localhost:3000/node_modules/react/dist/react-with-addons.js:5969:30) at ReactCompositeComponentWrapper.wrapper [as mountComponent] (http://localhost:3000/node_modules/react/dist/react-with-addons.js:12883:21) at Object.mountComponent (http://localhost:3000/node_modules/react/dist/react-with-addons.js:13617:35) at ReactDOMComponent.mountChildren (http://localhost:3000/node_modules/react/dist/react-with-addons.js:12222:44)
I want to separate the relationship between parent node children nodes, and I tried to use the checkStrictly props, but seems no effects. Could you help to give an guidance about this?
My treeData is get from remote and it is an JSONArray like:
[ {label:"A", value:"1", children:[ {label:"A1",value:11, childre:[...]} ]} ]
handleUserChanged(option){
var currentUsers = this.state.userTreeValue;
for(var i=0;i<option.length;i++){
var user = this.state.userIdMap[option[i]];
user.halfChecked = true;
currentUsers.push(user);
}
this.setState({
userTreeValue: currentUsers
});
},
<Row>
<Col md={6}>
<TreeSelect style={{width: 740}} value={this.state.userTreeValue} dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
treeCheckStrictly={true} treeCheckable={true} treeData={this.state.userTreeData} showSearch treeDefaultExpandAll={false}
placeholder={<i>请下拉选择</i>} showCheckedStrategy = "SHOW_ALL" treeLine searchPlaceholder="搜索人员..." treeNodeFilterProp="label"
onChange={this.handleUserChanged} />
</Col>
</Row>
checkable/multiple
treeData:[{
label:'y',
children:[{
label: 'x',
children: []
}]
}]
一个都选择不了
Hello,
would be great to add support for tabIndex. So tree-select can be accessed via tab and open the option list by space bar?
Thank you
Sandster
The scenario is if I search something that doesn't exist, then I can see "Not Found" in the drop down menu, however, the drop down menu then closes quickly. It is worse if I take off the animation for the drow down, I won't even be able to see the "Not Found".
I'm trying to figure out why this is happening, and I'm just recording this issue here.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.