1 Star 0 Fork 1

fengyun / tree-select

forked from Bowen / tree-select 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

rc-tree-select


React TreeSelect Component

NPM version build status Test coverage gemnasium deps npm download

Screenshots

Development

npm install
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/tree-select/

install

rc-tree-select

API

TreeSelect props

name description type default
className additional css class of root dom node String ''
prefixCls prefix class String ''
animation dropdown animation name. only support slide-up now String ''
transitionName dropdown css animation name String ''
choiceTransitionName css animation name for selected items at multiple mode String ''
dropdownMatchSelectWidth whether dropdown's with is same with select bool true
dropdownClassName additional className applied to dropdown String -
dropdownStyle additional style applied to dropdown Object {}
dropdownPopupAlign specify alignment for dropdown (alignConfig of dom-align) Object -
onDropdownVisibleChange control dropdown visible function () => { return true; }
notFoundContent specify content to show when no result matches. String 'Not Found'
showSearch whether show search input in single mode bool true
allowClear whether allowClear bool false
maxTagTextLength max tag text length to show number -
multiple whether multiple select (true when enable treeCheckable) bool false
disabled whether disabled select bool false
inputValue if enable search, you can set default input's value, if set to null, auto clear input value when finish select/unselect operation string/null ''
defaultValue initial selected treeNode(s) same as value type -
value current selected treeNode(s). normal: String/Array. labelInValue: {value:String,label:React.Node}/Array<{value,label}>. treeCheckStrictly(halfChecked default false): {value:String,label:React.Node, halfChecked}/Array<{value,label,halfChecked}>. -
labelInValue whether to embed label in value, see above value type Bool false
onChange called when select treeNode or input value change function(value, label(null), extra) -
onSelect called when select treeNode function(value, node, extra) -
onSearch called when input changed function -
showCheckedStrategy TreeSelect.SHOW_ALL: show all checked treeNodes (Include parent treeNode). TreeSelect.SHOW_PARENT: show checked treeNodes (Just show parent treeNode). Default just show child. enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } TreeSelect.SHOW_CHILD
treeIcon show tree icon bool false
treeLine show tree line bool false
treeDefaultExpandAll default expand all treeNode bool false
treeDefaultExpandedKeys default expanded treeNode keys Array -
treeCheckable whether tree show checkbox (select callback will not fire) bool false
treeCheckStrictly check node precisely, parent and children nodes are not associated bool false
filterTreeNode whether filter treeNodes by input value. default filter by treeNode's treeNodeFilterProp prop's value bool/Function(inputValue:string, treeNode:TreeNode) Function
treeNodeFilterProp which prop value of treeNode will be used for filter if filterTreeNode return true String 'value'
treeNodeLabelProp which prop value of treeNode will render as content of select String 'title'
treeData treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array) array<{value,label,children, [disabled,selectable]}> []
treeDataSimpleMode enable simple mode of treeData.(treeData should be like this: [{id:1, pId:0, value:'1', label:"test1",...},...], pId is parent node's id) bool/object{id:'id', pId:'pId', rootPId:null} false
loadData load data asynchronously function(node) -
getPopupContainer container which popup select menu rendered into function(trigger:Node):Node function(){return document.body;}

TreeNode props

note: you'd better to use treeData instead of using TreeNode.

name description type default
disabled disable treeNode bool false
key it's value must be unique across the tree's all TreeNode, you must set it String -
value default as treeNodeFilterProp (be unique across the tree's all TreeNode) String ''
title tree/subTree's title String/element '---'
isLeaf whether it's leaf node bool false

note

  1. Optimization tips(when there are large amounts of data, like more than 5000 nodes)
    • Do not Expand all nodes.
    • Recommend not exist many TreeSelect components in a page at the same time.
    • Recommend not use treeCheckable mode, or use treeCheckStrictly.
  2. In treeCheckable mode, It has the same effect when click x(node in Selection box) or uncheck in the treeNode(in dropdown panel), but the essence is not the same. So, even if both of them trigger onChange method, but the parameters (the third parameter) are different. (中文:在treeCheckable模式下,已选择节点上的x删除操作、和相应 treeNode 节点上 checkbox 的 uncheck 操作,最终效果相同,但本质不一样。前者跟弹出的 tree 组件可以“毫无关系”(例如 dropdown 没展开过,tree 也就没渲染好),而后者是 tree 组件上的节点 uncheck 事件。所以、即便两者都会触发onChange方法、但它们的参数(第三个参数)是不同的。)

Test Case

http://localhost:8000/tests/runner.html?coverage

Coverage

http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage

License

rc-tree-select is released under the MIT license.

MIT LICENSE Copyright (c) 2015-present Alipay.com, https://www.alipay.com/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

React Tree Select 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/fengyun0607/tree-select.git
git@gitee.com:fengyun0607/tree-select.git
fengyun0607
tree-select
tree-select
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891