代码拉取完成,页面将自动刷新
同步操作将从 Bowen/tree-select 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
React TreeSelect Component
npm install
npm start
http://localhost:8000/examples/
online example: http://react-component.github.io/tree-select/
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;} |
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 |
TreeSelect
components in a page at the same time.treeCheckable
mode, or use treeCheckStrictly
.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
方法、但它们的参数(第三个参数)是不同的。)http://localhost:8000/tests/runner.html?coverage
rc-tree-select is released under the MIT license.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。