组件演示

[{"title":"基本用法","id":"components-tree-select-demo-basic","tags":[],"filepath":"site/components/tree-select/demo/basic.md","directory":"components/tree-select/demo","filename":"basic","meta":{"title":"基本用法","description":"\n<p>基本用法。</p>\n","order":"0","filepath":"site/components/tree-select/demo/basic.md","filename":"basic","directory":"components/tree-select/demo","id":"components-tree-select-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nfunction generateData() {\n var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;\n var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;\n var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n var gData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];\n\n // x:每一级下的节点总数。y:每级节点里有y个节点、存在子节点。z:树的level层级数(0表示一级)\n function _loop(_level, _preKey, _tns) {\n var preKey = _preKey || '0';\n var tns = _tns || gData;\n\n var children = [];\n for (var i = 0; i < x; i++) {\n var key = preKey + '-' + i;\n tns.push({ label: key + '-label', value: key + '-value', key: key, disabled: key === '0-0-0-1' });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n var __level = _level - 1;\n children.forEach(function (key, index) {\n tns[index].children = [];\n return _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n return gData;\n}\n\nvar gData = generateData();\n\nvar BasicDemo = function (_React$Component) {\n _inherits(BasicDemo, _React$Component);\n\n function BasicDemo(props) {\n _classCallCheck(this, BasicDemo);\n\n var _this = _possibleConstructorReturn(this, (BasicDemo.__proto__ || Object.getPrototypeOf(BasicDemo)).call(this, props));\n\n _this.state = {\n inputValue: '0-0-0-label',\n value: '0-0-0-value'\n };\n return _this;\n }\n\n _createClass(BasicDemo, [{\n key: 'onChange',\n value: function onChange(value) {\n this.setState({ value: value });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.TreeSelect, { style: { width: 300 },\n dropdownStyle: { maxHeight: 200, overflow: 'auto' },\n placeholder: React.createElement(\n 'i',\n null,\n '\\u8BF7\\u4E0B\\u62C9\\u9009\\u62E9'\n ),\n searchPlaceholder: 'please search',\n showSearch: false, allowClear: true, treeLine: false,\n inputValue: this.state.inputValue,\n value: this.state.value,\n treeData: gData,\n treeNodeFilterProp: 'label',\n filterTreeNode: false,\n onChange: this.onChange.bind(this)\n });\n }\n }]);\n\n return BasicDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(BasicDemo, null), document.getElementById('components-tree-select-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { TreeSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">generateData</span>(<span class=\"hljs-params\">x = 3, y = 2, z = 1, gData = []</span>) </span>{\n <span class=\"hljs-comment\">// x:每一级下的节点总数。y:每级节点里有y个节点、存在子节点。z:树的level层级数(0表示一级)</span>\n <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">_loop</span>(<span class=\"hljs-params\">_level, _preKey, _tns</span>) </span>{\n <span class=\"hljs-keyword\">const</span> preKey = _preKey || <span class=\"hljs-string\">'0'</span>;\n <span class=\"hljs-keyword\">const</span> tns = _tns || gData;\n\n <span class=\"hljs-keyword\">const</span> children = [];\n <span class=\"hljs-keyword\">for</span> (<span class=\"hljs-keyword\">let</span> i = <span class=\"hljs-number\">0</span>; i &lt; x; i++) {\n <span class=\"hljs-keyword\">const</span> key = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${preKey}</span>-<span class=\"hljs-subst\">${i}</span>`</span>;\n tns.push({ label: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${key}</span>-label`</span>, value: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${key}</span>-value`</span>, key, disabled: key === <span class=\"hljs-string\">'0-0-0-1'</span> });\n <span class=\"hljs-keyword\">if</span> (i &lt; y) {\n children.push(key);\n }\n }\n <span class=\"hljs-keyword\">if</span> (_level &lt; <span class=\"hljs-number\">0</span>) {\n <span class=\"hljs-keyword\">return</span> tns;\n }\n <span class=\"hljs-keyword\">const</span> __level = _level - <span class=\"hljs-number\">1</span>;\n children.forEach((key, index) =&gt; {\n tns[index].children = [];\n <span class=\"hljs-keyword\">return</span> _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n <span class=\"hljs-keyword\">return</span> gData;\n}\n\n<span class=\"hljs-keyword\">const</span> gData = generateData();\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">BasicDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n inputValue: <span class=\"hljs-string\">'0-0-0-label'</span>,\n value: <span class=\"hljs-string\">'0-0-0-value'</span>,\n };\n }\n onChange(value) {\n <span class=\"hljs-keyword\">this</span>.setState({ value });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">TreeSelect</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">300</span> }}\n <span class=\"hljs-attribute\">dropdownStyle</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">maxHeight:</span> <span class=\"hljs-attribute\">200</span>, <span class=\"hljs-attribute\">overflow:</span> '<span class=\"hljs-attribute\">auto</span>' }}\n <span class=\"hljs-attribute\">placeholder</span>=<span class=\"hljs-value\">{&lt;i</span>&gt;</span>请下拉选择<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">i</span>&gt;</span>}\n searchPlaceholder=\"please search\"\n showSearch={false} allowClear treeLine={false}\n inputValue={this.state.inputValue}\n value={this.state.value}\n treeData={gData}\n treeNodeFilterProp=\"label\"\n filterTreeNode={false}\n onChange={this.onChange.bind(this)}\n /&gt;)</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">BasicDemo</span> /&gt;</span>,\n document.getElementById('components-tree-select-demo-basic')\n);</span></code></pre></div>"},"status":"public","toc":""},{"title":"多选","id":"components-tree-select-demo-multiple","tags":[],"filepath":"site/components/tree-select/demo/multiple.md","directory":"components/tree-select/demo","filename":"multiple","meta":{"title":"多选","description":"\n<p>多选。</p>\n","order":"0","filepath":"site/components/tree-select/demo/multiple.md","filename":"multiple","directory":"components/tree-select/demo","id":"components-tree-select-demo-multiple","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nfunction generateData() {\n var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;\n var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;\n var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n var gData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];\n\n // x:每一级下的节点总数。y:每级节点里有y个节点、存在子节点。z:树的level层级数(0表示一级)\n function _loop(_level, _preKey, _tns) {\n var preKey = _preKey || '0';\n var tns = _tns || gData;\n\n var children = [];\n for (var i = 0; i < x; i++) {\n var key = preKey + '-' + i;\n tns.push({ label: key + '-label', value: key + '-value', key: key, disabled: key === '0-0-0-1' });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n var __level = _level - 1;\n children.forEach(function (key, index) {\n tns[index].children = [];\n return _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n return gData;\n}\n\nvar gData = generateData();\n\nvar MultipleDemo = function (_React$Component) {\n _inherits(MultipleDemo, _React$Component);\n\n function MultipleDemo(props) {\n _classCallCheck(this, MultipleDemo);\n\n var _this = _possibleConstructorReturn(this, (MultipleDemo.__proto__ || Object.getPrototypeOf(MultipleDemo)).call(this, props));\n\n _this.state = {\n inputValue: '0-0-0-label',\n multipleValue: []\n };\n return _this;\n }\n\n _createClass(MultipleDemo, [{\n key: 'onMultipleChange',\n value: function onMultipleChange(value) {\n this.setState({ multipleValue: value });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.TreeSelect, { style: { width: 300 },\n dropdownStyle: { maxHeight: 200, overflow: 'auto' },\n placeholder: React.createElement(\n 'i',\n null,\n '\\u8BF7\\u4E0B\\u62C9\\u9009\\u62E9'\n ),\n searchPlaceholder: 'please search',\n multiple: true,\n inputValue: this.state.inputValue,\n value: this.state.multipleValue,\n treeData: gData,\n treeNodeFilterProp: 'title',\n onChange: this.onMultipleChange.bind(this)\n });\n }\n }]);\n\n return MultipleDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(MultipleDemo, null), document.getElementById('components-tree-select-demo-multiple'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { TreeSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">generateData</span>(<span class=\"hljs-params\">x = 3, y = 2, z = 1, gData = []</span>) </span>{\n <span class=\"hljs-comment\">// x:每一级下的节点总数。y:每级节点里有y个节点、存在子节点。z:树的level层级数(0表示一级)</span>\n <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">_loop</span>(<span class=\"hljs-params\">_level, _preKey, _tns</span>) </span>{\n <span class=\"hljs-keyword\">const</span> preKey = _preKey || <span class=\"hljs-string\">'0'</span>;\n <span class=\"hljs-keyword\">const</span> tns = _tns || gData;\n\n <span class=\"hljs-keyword\">const</span> children = [];\n <span class=\"hljs-keyword\">for</span> (<span class=\"hljs-keyword\">let</span> i = <span class=\"hljs-number\">0</span>; i &lt; x; i++) {\n <span class=\"hljs-keyword\">const</span> key = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${preKey}</span>-<span class=\"hljs-subst\">${i}</span>`</span>;\n tns.push({ label: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${key}</span>-label`</span>, value: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${key}</span>-value`</span>, key, disabled: key === <span class=\"hljs-string\">'0-0-0-1'</span> });\n <span class=\"hljs-keyword\">if</span> (i &lt; y) {\n children.push(key);\n }\n }\n <span class=\"hljs-keyword\">if</span> (_level &lt; <span class=\"hljs-number\">0</span>) {\n <span class=\"hljs-keyword\">return</span> tns;\n }\n <span class=\"hljs-keyword\">const</span> __level = _level - <span class=\"hljs-number\">1</span>;\n children.forEach((key, index) =&gt; {\n tns[index].children = [];\n <span class=\"hljs-keyword\">return</span> _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n <span class=\"hljs-keyword\">return</span> gData;\n}\n\n<span class=\"hljs-keyword\">const</span> gData = generateData();\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">MultipleDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n inputValue: <span class=\"hljs-string\">'0-0-0-label'</span>,\n multipleValue: [],\n };\n }\n onMultipleChange(value) {\n <span class=\"hljs-keyword\">this</span>.setState({ multipleValue: value });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">TreeSelect</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">300</span> }}\n <span class=\"hljs-attribute\">dropdownStyle</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">maxHeight:</span> <span class=\"hljs-attribute\">200</span>, <span class=\"hljs-attribute\">overflow:</span> '<span class=\"hljs-attribute\">auto</span>' }}\n <span class=\"hljs-attribute\">placeholder</span>=<span class=\"hljs-value\">{&lt;i</span>&gt;</span>请下拉选择<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">i</span>&gt;</span>}\n searchPlaceholder=\"please search\"\n multiple\n inputValue={this.state.inputValue}\n value={this.state.multipleValue}\n treeData={gData}\n treeNodeFilterProp=\"title\"\n onChange={this.onMultipleChange.bind(this)}\n /&gt;)</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">MultipleDemo</span> /&gt;</span>,\n document.getElementById('components-tree-select-demo-multiple')\n);</span></code></pre></div>"},"status":"public","toc":""},{"title":"check select","id":"components-tree-select-demo-check","tags":[],"filepath":"site/components/tree-select/demo/check.md","directory":"components/tree-select/demo","filename":"check","meta":{"title":"check select","description":"\n<p>check select</p>\n","order":"2","filepath":"site/components/tree-select/demo/check.md","filename":"check","directory":"components/tree-select/demo","id":"components-tree-select-demo-check","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar SHOW_PARENT = _uxcore.TreeSelect.SHOW_PARENT;\n\nfunction generateData() {\n var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;\n var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;\n var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n var gData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];\n\n // x:每一级下的节点总数。y:每级节点里有y个节点、存在子节点。z:树的level层级数(0表示一级)\n function _loop(_level, _preKey, _tns) {\n var preKey = _preKey || '0';\n var tns = _tns || gData;\n\n var children = [];\n for (var i = 0; i < x; i++) {\n var key = preKey + '-' + i;\n tns.push({ label: key + '-label', value: key + '-value', key: key, disabled: key === '0-0-0-1' });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n var __level = _level - 1;\n children.forEach(function (key, index) {\n tns[index].children = [];\n return _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n return gData;\n}\n\nvar gData = generateData();\n\nvar CheckDemo = function (_React$Component) {\n _inherits(CheckDemo, _React$Component);\n\n function CheckDemo(props) {\n _classCallCheck(this, CheckDemo);\n\n var _this = _possibleConstructorReturn(this, (CheckDemo.__proto__ || Object.getPrototypeOf(CheckDemo)).call(this, props));\n\n _this.state = {\n value: '0-0-0-value'\n };\n return _this;\n }\n\n _createClass(CheckDemo, [{\n key: 'onChange',\n value: function onChange(value) {\n this.setState({ value: value });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.TreeSelect, { style: { width: 300 },\n dropdownStyle: { maxHeight: 200, overflow: 'auto' },\n dropdownPopupAlign: { overflow: { adjustY: 0, adjustX: 0 } },\n placeholder: React.createElement(\n 'i',\n null,\n '\\u8BF7\\u4E0B\\u62C9\\u9009\\u62E9'\n ),\n searchPlaceholder: 'please search',\n treeLine: false, maxTagTextLength: 10,\n inputValue: null,\n value: this.state.value,\n treeData: gData,\n treeNodeFilterProp: 'title',\n treeCheckable: true, showCheckedStrategy: SHOW_PARENT,\n onChange: this.onChange.bind(this)\n });\n }\n }]);\n\n return CheckDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(CheckDemo, null), document.getElementById('components-tree-select-demo-check'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { TreeSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> SHOW_PARENT = TreeSelect.SHOW_PARENT;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">generateData</span>(<span class=\"hljs-params\">x = 3, y = 2, z = 1, gData = []</span>) </span>{\n <span class=\"hljs-comment\">// x:每一级下的节点总数。y:每级节点里有y个节点、存在子节点。z:树的level层级数(0表示一级)</span>\n <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">_loop</span>(<span class=\"hljs-params\">_level, _preKey, _tns</span>) </span>{\n <span class=\"hljs-keyword\">const</span> preKey = _preKey || <span class=\"hljs-string\">'0'</span>;\n <span class=\"hljs-keyword\">const</span> tns = _tns || gData;\n\n <span class=\"hljs-keyword\">const</span> children = [];\n <span class=\"hljs-keyword\">for</span> (<span class=\"hljs-keyword\">let</span> i = <span class=\"hljs-number\">0</span>; i &lt; x; i++) {\n <span class=\"hljs-keyword\">const</span> key = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${preKey}</span>-<span class=\"hljs-subst\">${i}</span>`</span>;\n tns.push({ label: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${key}</span>-label`</span>, value: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${key}</span>-value`</span>, key, disabled: key === <span class=\"hljs-string\">'0-0-0-1'</span> });\n <span class=\"hljs-keyword\">if</span> (i &lt; y) {\n children.push(key);\n }\n }\n <span class=\"hljs-keyword\">if</span> (_level &lt; <span class=\"hljs-number\">0</span>) {\n <span class=\"hljs-keyword\">return</span> tns;\n }\n <span class=\"hljs-keyword\">const</span> __level = _level - <span class=\"hljs-number\">1</span>;\n children.forEach((key, index) =&gt; {\n tns[index].children = [];\n <span class=\"hljs-keyword\">return</span> _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n <span class=\"hljs-keyword\">return</span> gData;\n}\n\n<span class=\"hljs-keyword\">const</span> gData = generateData();\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">CheckDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: <span class=\"hljs-string\">'0-0-0-value'</span>,\n };\n }\n onChange(value) {\n <span class=\"hljs-keyword\">this</span>.setState({ value });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">TreeSelect</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">300</span> }}\n <span class=\"hljs-attribute\">dropdownStyle</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">maxHeight:</span> <span class=\"hljs-attribute\">200</span>, <span class=\"hljs-attribute\">overflow:</span> '<span class=\"hljs-attribute\">auto</span>' }}\n <span class=\"hljs-attribute\">dropdownPopupAlign</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">overflow:</span> { <span class=\"hljs-attribute\">adjustY:</span> <span class=\"hljs-attribute\">0</span>, <span class=\"hljs-attribute\">adjustX:</span> <span class=\"hljs-attribute\">0</span> } }}\n <span class=\"hljs-attribute\">placeholder</span>=<span class=\"hljs-value\">{&lt;i</span>&gt;</span>请下拉选择<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">i</span>&gt;</span>}\n searchPlaceholder=\"please search\"\n treeLine={false} maxTagTextLength={10}\n inputValue={null}\n value={this.state.value}\n treeData={gData}\n treeNodeFilterProp=\"title\"\n treeCheckable showCheckedStrategy={SHOW_PARENT}\n onChange={this.onChange.bind(this)}\n /&gt;)</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CheckDemo</span> /&gt;</span>,\n document.getElementById('components-tree-select-demo-check')\n);</span></code></pre></div>"},"status":"public","toc":""}]

基本用法。

import { TreeSelect } from 'uxcore';

function generateData(x = 3, y = 2, z = 1, gData = []) {
  // x:每一级下的节点总数。y:每级节点里有y个节点、存在子节点。z:树的level层级数(0表示一级)
  function _loop(_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, disabled: key === '0-0-0-1' });
      if (i < y) {
        children.push(key);
      }
    }
    if (_level < 0) {
      return tns;
    }
    const __level = _level - 1;
    children.forEach((key, index) => {
      tns[index].children = [];
      return _loop(__level, key, tns[index].children);
    });
  }
  _loop(z);
  return gData;
}

const gData = generateData();

class BasicDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '0-0-0-label',
      value: '0-0-0-value',
    };
  }
  onChange(value) {
    this.setState({ value });
  }
  render() {
    return (<TreeSelect style={{ width: 300 }}
      dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
      placeholder={<i>请下拉选择</i>}
      searchPlaceholder="please search"
      showSearch={false} allowClear treeLine={false}
      inputValue={this.state.inputValue}
      value={this.state.value}
      treeData={gData}
      treeNodeFilterProp="label"
      filterTreeNode={false}
      onChange={this.onChange.bind(this)}
    />);
  }
}

ReactDOM.render(
  <BasicDemo />,
      document.getElementById('components-tree-select-demo-basic')
);

多选。

import { TreeSelect } from 'uxcore';

function generateData(x = 3, y = 2, z = 1, gData = []) {
  // x:每一级下的节点总数。y:每级节点里有y个节点、存在子节点。z:树的level层级数(0表示一级)
  function _loop(_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, disabled: key === '0-0-0-1' });
      if (i < y) {
        children.push(key);
      }
    }
    if (_level < 0) {
      return tns;
    }
    const __level = _level - 1;
    children.forEach((key, index) => {
      tns[index].children = [];
      return _loop(__level, key, tns[index].children);
    });
  }
  _loop(z);
  return gData;
}

const gData = generateData();

class MultipleDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '0-0-0-label',
      multipleValue: [],
    };
  }
  onMultipleChange(value) {
    this.setState({ multipleValue: value });
  }
  render() {
    return (<TreeSelect style={{ width: 300 }}
      dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
      placeholder={<i>请下拉选择</i>}
      searchPlaceholder="please search"
      multiple
      inputValue={this.state.inputValue}
      value={this.state.multipleValue}
      treeData={gData}
      treeNodeFilterProp="title"
      onChange={this.onMultipleChange.bind(this)}
    />);
  }
}

ReactDOM.render(
  <MultipleDemo />,
      document.getElementById('components-tree-select-demo-multiple')
);

check select

import { TreeSelect } from 'uxcore';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

function generateData(x = 3, y = 2, z = 1, gData = []) {
  // x:每一级下的节点总数。y:每级节点里有y个节点、存在子节点。z:树的level层级数(0表示一级)
  function _loop(_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, disabled: key === '0-0-0-1' });
      if (i < y) {
        children.push(key);
      }
    }
    if (_level < 0) {
      return tns;
    }
    const __level = _level - 1;
    children.forEach((key, index) => {
      tns[index].children = [];
      return _loop(__level, key, tns[index].children);
    });
  }
  _loop(z);
  return gData;
}

const gData = generateData();

class CheckDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '0-0-0-value',
    };
  }
  onChange(value) {
    this.setState({ value });
  }
  render() {
    return (<TreeSelect style={{ width: 300 }}
      dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
      dropdownPopupAlign={{ overflow: { adjustY: 0, adjustX: 0 } }}
      placeholder={<i>请下拉选择</i>}
      searchPlaceholder="please search"
      treeLine={false} maxTagTextLength={10}
      inputValue={null}
      value={this.state.value}
      treeData={gData}
      treeNodeFilterProp="title"
      treeCheckable showCheckedStrategy={SHOW_PARENT}
      onChange={this.onChange.bind(this)}
    />);
  }
}

ReactDOM.render(
  <CheckDemo />,
      document.getElementById('components-tree-select-demo-check')
);

树型选择控件

何时使用

类似 Select 的选择控件,可选择的数据结构是一个树形结构时,可以使用 TreeSelect,例如公司层级、学科系统、分类目录等等。

API

TreeSelect props

name description type default
className additional css class of root dom node String ''
prefixCls prefix class String 'uxcore-tree-select'
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 Object -
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
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]}> []
treeDataSimpleMode enable simple mode of treeData.(treeData should be like this: [{"id":1, "pId":0, "label":"test1"},...], pId is parent node's id) bool/object{id:'id', pId:'pId', rootPId:null} false
loadData load data asynchronously function(node) -

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