mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-15 15:56:33 +10:00
555 lines
165 KiB
HTML
555 lines
165 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
|
||
<meta name="description" content="A set of high-quality React components">
|
||
<meta name="description" content="One of best React UI library for enterprise background">
|
||
<title>Ant Design - A UI Design Language</title>
|
||
<script>
|
||
(function() {
|
||
function isLocalStorageNameSupported() {
|
||
var testKey = 'test';
|
||
var storage = window.localStorage;
|
||
try {
|
||
storage.setItem(testKey, '1');
|
||
storage.removeItem(testKey);
|
||
return true;
|
||
} catch (error) {
|
||
return false;
|
||
}
|
||
}
|
||
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
|
||
var pathname = location.pathname;
|
||
|
||
function isZhCN(pathname) {
|
||
return /-cn\/?$/.test(pathname);
|
||
}
|
||
function getLocalizedPathname(path, zhCN) {
|
||
var pathname = path.startsWith('/') ? path : '/' + path;
|
||
if (!zhCN) { // to enUS
|
||
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
|
||
} else if (pathname === '/') {
|
||
return '/index-cn';
|
||
} else if (pathname.endsWith('/')) {
|
||
return pathname.replace(/\/$/, '-cn/');
|
||
}
|
||
return pathname + '-cn';
|
||
}
|
||
|
||
// 兼容旧的 URL， `?locale=...`
|
||
var queryString = location.search;
|
||
if (queryString) {
|
||
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
||
if (isZhCNConfig && !isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
|
||
}
|
||
}
|
||
|
||
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
|
||
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
|
||
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
|
||
// safari is 'zh-cn', while other browser is 'zh-CN';
|
||
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
|
||
}
|
||
}
|
||
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
|
||
})()
|
||
</script>
|
||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
||
<link rel="stylesheet" type="text/css" href="/index.css"/>
|
||
<style id="nprogress-style">
|
||
#nprogress { display: none }
|
||
</style>
|
||
<!--[if lte IE 10]>
|
||
<script
|
||
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
|
||
<![endif]-->
|
||
<script>
|
||
if (!window.Intl) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
|
||
}
|
||
if (!window.Promise) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
|
||
}
|
||
// Enable Google Analytics
|
||
if (!location.port) {
|
||
/* eslint-disable */
|
||
(function (i, s, o, g, r, a, m) {
|
||
i['GoogleAnalyticsObject'] = r;
|
||
i[r] = i[r] || function () {
|
||
(i[r].q = i[r].q || []).push(arguments)
|
||
}, i[r].l = 1 * new Date();
|
||
a = s.createElement(o),
|
||
m = s.getElementsByTagName(o)[0];
|
||
a.async = 1;
|
||
a.src = g;
|
||
m.parentNode.insertBefore(a, m)
|
||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||
ga('create', 'UA-72788897-1', 'auto');
|
||
ga('send', 'pageview');
|
||
/* eslint-enable */
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="react-content">
|
||
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="766569949"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Specification</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/react/introduce" data-reactid="52">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/react/getting-started" data-reactid="54">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/react/practical-projects" data-reactid="56">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="57"><a href="/docs/react/use-with-create-react-app" data-reactid="58">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="59"><a href="/docs/react/customize-theme" data-reactid="60">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/changelog" data-reactid="62">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/react/recommendation" data-reactid="64">Third-Party Libraries</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="66"><!-- react-text: 67 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 68 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="69"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="71"><!-- react-text: 72 -->i18n Solution<!-- /react-text --><!-- react-text: 73 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="74"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="75"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="76"><h4 data-reactid="77">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="78"><li class=" ant-menu-item-group" data-reactid="79"><div class="ant-menu-item-group-title" data-reactid="80">General</div><ul class="ant-menu-item-group-list" data-reactid="81"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/components/button/" data-reactid="83"><span data-reactid="84">Button</span><span class="chinese" data-reactid="85"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/components/icon/" data-reactid="87"><span data-reactid="88">Icon</span><span class="chinese" data-reactid="89"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="90"><div class="ant-menu-item-group-title" data-reactid="91">Layout</div><ul class="ant-menu-item-group-list" data-reactid="92"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/components/grid/" data-reactid="94"><span data-reactid="95">Grid</span><span class="chinese" data-reactid="96"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="97"><a href="/components/layout/" data-reactid="98"><span data-reactid="99">Layout</span><span class="chinese" data-reactid="100"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="101"><div class="ant-menu-item-group-title" data-reactid="102">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="103"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="104"><a href="/components/affix/" data-reactid="105"><span data-reactid="106">Affix</span><span class="chinese" data-reactid="107"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="108"><a href="/components/breadcrumb/" data-reactid="109"><span data-reactid="110">Breadcrumb</span><span class="chinese" data-reactid="111"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="112"><a href="/components/back-top/" data-reactid="113"><span data-reactid="114">BackTop</span><span class="chinese" data-reactid="115"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="116"><a href="/components/dropdown/" data-reactid="117"><span data-reactid="118">Dropdown</span><span class="chinese" data-reactid="119"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="120"><a href="/components/menu/" data-reactid="121"><span data-reactid="122">Menu</span><span class="chinese" data-reactid="123"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="124"><a href="/components/pagination/" data-reactid="125"><span data-reactid="126">Pagination</span><span class="chinese" data-reactid="127"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="128"><a href="/components/steps/" data-reactid="129"><span data-reactid="130">Steps</span><span class="chinese" data-reactid="131"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="132"><a href="/components/tabs/" data-reactid="133"><span data-reactid="134">Tabs</span><span class="chinese" data-reactid="135"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="136"><div class="ant-menu-item-group-title" data-reactid="137">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="138"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="139"><a href="/components/auto-complete/" data-reactid="140"><span data-reactid="141">AutoComplete</span><span class="chinese" data-reactid="142"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="143"><a href="/components/cascader/" data-reactid="144"><span data-reactid="145">Cascader</span><span class="chinese" data-reactid="146"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="147"><a href="/components/checkbox/" data-reactid="148"><span data-reactid="149">Checkbox</span><span class="chinese" data-reactid="150"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="151"><a href="/components/date-picker/" data-reactid="152"><span data-reactid="153">DatePicker</span><span class="chinese" data-reactid="154"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="155"><a href="/components/form/" data-reactid="156"><span data-reactid="157">Form</span><span class="chinese" data-reactid="158"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="159"><a href="/components/input/" data-reactid="160"><span data-reactid="161">Input</span><span class="chinese" data-reactid="162"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="163"><a href="/components/input-number/" data-reactid="164"><span data-reactid="165">InputNumber</span><span class="chinese" data-reactid="166"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="167"><a href="/components/mention/" data-reactid="168"><span data-reactid="169">Mention</span><span class="chinese" data-reactid="170"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="171"><a href="/components/rate/" data-reactid="172"><span data-reactid="173">Rate</span><span class="chinese" data-reactid="174"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="175"><a href="/components/radio/" data-reactid="176"><span data-reactid="177">Radio</span><span class="chinese" data-reactid="178"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="179"><a href="/components/select/" data-reactid="180"><span data-reactid="181">Select</span><span class="chinese" data-reactid="182"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="183"><a href="/components/slider/" data-reactid="184"><span data-reactid="185">Slider</span><span class="chinese" data-reactid="186"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="187"><a href="/components/switch/" data-reactid="188"><span data-reactid="189">Switch</span><span class="chinese" data-reactid="190"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="191"><a href="/components/tree-select/" data-reactid="192"><span data-reactid="193">TreeSelect</span><span class="chinese" data-reactid="194"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195"><a href="/components/time-picker/" data-reactid="196"><span data-reactid="197">TimePicker</span><span class="chinese" data-reactid="198"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="199"><a href="/components/transfer/" data-reactid="200"><span data-reactid="201">Transfer</span><span class="chinese" data-reactid="202"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="203"><a href="/components/upload/" data-reactid="204"><span data-reactid="205">Upload</span><span class="chinese" data-reactid="206"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="207"><div class="ant-menu-item-group-title" data-reactid="208">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="209"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="210"><a href="/components/badge/" data-reactid="211"><span data-reactid="212">Badge</span><span class="chinese" data-reactid="213"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="214"><a href="/components/calendar/" data-reactid="215"><span data-reactid="216">Calendar</span><span class="chinese" data-reactid="217"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="218"><a href="/components/card/" data-reactid="219"><span data-reactid="220">Card</span><span class="chinese" data-reactid="221"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="222"><a href="/components/carousel/" data-reactid="223"><span data-reactid="224">Carousel</span><span class="chinese" data-reactid="225"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="226"><a href="/components/collapse/" data-reactid="227"><span data-reactid="228">Collapse</span><span class="chinese" data-reactid="229"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="230"><a href="/components/popover/" data-reactid="231"><span data-reactid="232">Popover</span><span class="chinese" data-reactid="233"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="234"><a href="/components/tooltip/" data-reactid="235"><span data-reactid="236">Tooltip</span><span class="chinese" data-reactid="237"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="238"><a href="/components/table/" data-reactid="239"><span data-reactid="240">Table</span><span class="chinese" data-reactid="241"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="242"><a href="/components/tag/" data-reactid="243"><span data-reactid="244">Tag</span><span class="chinese" data-reactid="245"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="246"><a href="/components/timeline/" data-reactid="247"><span data-reactid="248">Timeline</span><span class="chinese" data-reactid="249"></span></a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="250"><a href="/components/tree/" data-reactid="251"><span data-reactid="252">Tree</span><span class="chinese" data-reactid="253"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="254"><div class="ant-menu-item-group-title" data-reactid="255">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="256"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="257"><a href="/components/alert/" data-reactid="258"><span data-reactid="259">Alert</span><span class="chinese" data-reactid="260"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="261"><a href="/components/modal/" data-reactid="262"><span data-reactid="263">Modal</span><span class="chinese" data-reactid="264"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="265"><a href="/components/message/" data-reactid="266"><span data-reactid="267">Message</span><span class="chinese" data-reactid="268"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="269"><a href="/components/notification/" data-reactid="270"><span data-reactid="271">Notification</span><span class="chinese" data-reactid="272"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="273"><a href="/components/progress/" data-reactid="274"><span data-reactid="275">Progress</span><span class="chinese" data-reactid="276"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="277"><a href="/components/popconfirm/" data-reactid="278"><span data-reactid="279">Popconfirm</span><span class="chinese" data-reactid="280"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="281"><a href="/components/spin/" data-reactid="282"><span data-reactid="283">Spin</span><span class="chinese" data-reactid="284"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="285"><div class="ant-menu-item-group-title" data-reactid="286">Other</div><ul class="ant-menu-item-group-list" data-reactid="287"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="288"><a href="/components/anchor/" data-reactid="289"><span data-reactid="290">Anchor</span><span class="chinese" data-reactid="291"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="292"><a href="/components/locale-provider/" data-reactid="293"><span data-reactid="294">LocaleProvider</span><span class="chinese" data-reactid="295"></span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="296"><article data-reactid="297"><div class="toc-affix" data-reactid="298"><div class="" data-reactid="299"><ul class="toc demos-anchor" data-reactid="300"><li title="basic" data-reactid="301"><a href="#components-tree-demo-basic" data-reactid="302">basic</a></li><li title="basic controlled example" data-reactid="303"><a href="#components-tree-demo-basic-controlled" data-reactid="304">basic controlled example</a></li><li title="draggable" data-reactid="305"><a href="#components-tree-demo-draggable" data-reactid="306">draggable</a></li><li title="load data asynchronously" data-reactid="307"><a href="#components-tree-demo-dynamic" data-reactid="308">load data asynchronously</a></li><li title="Searchable" data-reactid="309"><a href="#components-tree-demo-search" data-reactid="310">Searchable</a></li></ul></div></div><section class="markdown" data-reactid="311"><h1 data-reactid="312"><!-- react-text: 313 -->Tree<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/index.en-US.md" data-reactid="314"><i class="anticon anticon-edit" data-reactid="315"></i></a></h1><section class="markdown" data-reactid="316"><h2 id="When-To-Use" data-reactid="317"><span data-reactid="318"><!-- react-text: 319 -->When To Use<!-- /react-text --></span><a href="#When-To-Use" class="anchor" data-reactid="320">#</a></h2><p data-reactid="321"><!-- react-text: 322 -->Directory, organization, biological classification, country, and etc. Almost things of the world are tree structure. The <!-- /react-text --><code data-reactid="323"><!-- react-text: 324 -->Tree<!-- /react-text --></code><!-- react-text: 325 --> component is a way of representing the hierarchical relationship of these things，and you also can expand, collapse, select the treeNodes of it.<!-- /react-text --></p></section><h2 data-reactid="326"><span data-reactid="327">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="328"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="329"><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="330"><section class="code-box" id="components-tree-demo-basic" data-reactid="331"><section class="code-box-demo" data-reactid="332"><ul class="ant-tree" role="tree-node" unselectable="true" data-reactid="333"><li class="" data-reactid="334"><span class="ant-tree-switcher ant-tree-noline_open" data-reactid="335"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked" data-reactid="336"><span class="ant-tree-checkbox-inner" data-reactid="337"></span></span><a title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open" data-reactid="338"><span class="ant-tree-title" data-reactid="339">parent 1</span></a><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" data-reactid="340"><li class="ant-tree-treenode-disabled" data-reactid="341"><span class="ant-tree-switcher ant-tree-noline_open ant-tree-switcher-disabled" data-reactid="342"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled" data-reactid="343"><span class="ant-tree-checkbox-inner" data-reactid="344"></span></span><a title="parent 1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open" data-reactid="345"><span class="ant-tree-title" data-reactid="346">parent 1-0</span></a><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" data-reactid="347"><li class="" data-reactid="348"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="349"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled" data-reactid="350"><span class="ant-tree-checkbox-inner" data-reactid="351"></span></span><a title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="352"><span class="ant-tree-title" data-reactid="353">leaf</span></a></li><li class="" data-reactid="354"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="355"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked" data-reactid="356"><span class="ant-tree-checkbox-inner" data-reactid="357"></span></span><a title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="358"><span class="ant-tree-title" data-reactid="359">leaf</span></a></li></ul></li><li class="" data-reactid="360"><span class="ant-tree-switcher ant-tree-noline_open" data-reactid="361"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked" data-reactid="362"><span class="ant-tree-checkbox-inner" data-reactid="363"></span></span><a title="parent 1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open" data-reactid="364"><span class="ant-tree-title" data-reactid="365">parent 1-1</span></a><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" data-reactid="366"><li class="" data-reactid="367"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="368"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked" data-reactid="369"><span class="ant-tree-checkbox-inner" data-reactid="370"></span></span><a title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="371"><span class="ant-tree-title" data-reactid="372"><span style="color:#08c;" data-reactid="373">sss</span></span></a></li></ul></li></ul></li></ul></section><section class="code-box-meta markdown" data-reactid="374"><div class="code-box-title" data-reactid="375"><a href="#components-tree-demo-basic" data-reactid="376">basic</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/basic.md" data-reactid="377"><i class="anticon anticon-edit" data-reactid="378"></i></a></div><div data-reactid="379"><p data-reactid="380"><!-- react-text: 381 -->The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="382"></i></section><section class="highlight-wrapper" data-reactid="383"><div class="highlight" data-reactid="384"><i class="anticon anticon-copy code-box-code-copy" data-reactid="385"></i><pre class="language-jsx" data-reactid="386"><code data-reactid="387"><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
onSelect <span class="token operator">=</span> <span class="token punctuation">(</span>selectedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'selected'</span><span class="token punctuation">,</span> selectedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
onCheck <span class="token operator">=</span> <span class="token punctuation">(</span>checkedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onCheck'</span><span class="token punctuation">,</span> checkedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Tree</span>
|
||
<span class="token attr-name">checkable</span>
|
||
<span class="token attr-name">defaultExpandedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">defaultSelectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">defaultCheckedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onSelect</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSelect<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onCheck</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onCheck<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1-0"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0-0<span class="token punctuation">"</span></span> <span class="token attr-name">disableCheckbox</span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-0-1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TreeNode</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent</span> <span class="token attr-name">1-1"</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0-0-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator"><</span>span style<span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token string">'#08c'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>sss<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span> key<span class="token operator">=</span><span class="token string">"0-0-1-0"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TreeNode</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TreeNode</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Tree</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-tree-demo-draggable" data-reactid="388"><section class="code-box-demo" data-reactid="389"><ul class="draggable-tree ant-tree" role="tree-node" unselectable="true" data-reactid="390"><li class="" data-reactid="391"><span class="ant-tree-switcher ant-tree-noline_open" data-reactid="392"></span><a title="0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable" draggable="true" aria-grabbed="true" data-reactid="393"><span class="ant-tree-title" data-reactid="394">0-0</span></a><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" data-reactid="395"><li class="" data-reactid="396"><span class="ant-tree-switcher ant-tree-noline_open" data-reactid="397"></span><a title="0-0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable" draggable="true" aria-grabbed="true" data-reactid="398"><span class="ant-tree-title" data-reactid="399">0-0-0</span></a><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" data-reactid="400"><li class="" data-reactid="401"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="402"></span><a title="0-0-0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable" draggable="true" aria-grabbed="true" data-reactid="403"><span class="ant-tree-title" data-reactid="404">0-0-0-0</span></a></li><li class="" data-reactid="405"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="406"></span><a title="0-0-0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable" draggable="true" aria-grabbed="true" data-reactid="407"><span class="ant-tree-title" data-reactid="408">0-0-0-1</span></a></li><li class="" data-reactid="409"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="410"></span><a title="0-0-0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable" draggable="true" aria-grabbed="true" data-reactid="411"><span class="ant-tree-title" data-reactid="412">0-0-0-2</span></a></li></ul></li><li class="" data-reactid="413"><span class="ant-tree-switcher ant-tree-noline_close" data-reactid="414"></span><a title="0-0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close draggable" draggable="true" aria-grabbed="true" data-reactid="415"><span class="ant-tree-title" data-reactid="416">0-0-1</span></a><!-- react-empty: 417 --></li><li class="" data-reactid="418"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="419"></span><a title="0-0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable" draggable="true" aria-grabbed="true" data-reactid="420"><span class="ant-tree-title" data-reactid="421">0-0-2</span></a></li></ul></li><li class="" data-reactid="422"><span class="ant-tree-switcher ant-tree-noline_close" data-reactid="423"></span><a title="0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close draggable" draggable="true" aria-grabbed="true" data-reactid="424"><span class="ant-tree-title" data-reactid="425">0-1</span></a><!-- react-empty: 426 --></li><li class="" data-reactid="427"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="428"></span><a title="0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable" draggable="true" aria-grabbed="true" data-reactid="429"><span class="ant-tree-title" data-reactid="430">0-2</span></a></li></ul><style data-reactid="431">// You can add the following CSS to your project to make draggable area bigger
|
||
#components-tree-demo-draggable .draggable-tree .ant-tree-node-content-wrapper {
|
||
width: calc(100% - 18px);
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="432"><div class="code-box-title" data-reactid="433"><a href="#components-tree-demo-draggable" data-reactid="434">draggable</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/draggable.md" data-reactid="435"><i class="anticon anticon-edit" data-reactid="436"></i></a></div><div data-reactid="437"><p data-reactid="438"><!-- react-text: 439 -->Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="440"></i></section><section class="highlight-wrapper" data-reactid="441"><div class="highlight" data-reactid="442"><i class="anticon anticon-copy code-box-code-copy" data-reactid="443"></i><pre class="language-jsx" data-reactid="444"><code data-reactid="445"><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> y <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> z <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> gData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> generateData <span class="token operator">=</span> <span class="token punctuation">(</span>_level<span class="token punctuation">,</span> _preKey<span class="token punctuation">,</span> _tns<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> preKey <span class="token operator">=</span> _preKey <span class="token operator">||</span> <span class="token string">'0'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> tns <span class="token operator">=</span> _tns <span class="token operator">||</span> gData<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> x<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>preKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
|
||
tns<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> key<span class="token punctuation">,</span> key <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>_level <span class="token operator"><</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> tns<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">const</span> level <span class="token operator">=</span> _level <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
tns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token function">generateData</span><span class="token punctuation">(</span>level<span class="token punctuation">,</span> key<span class="token punctuation">,</span> tns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token function">generateData</span><span class="token punctuation">(</span>z<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
gData<span class="token punctuation">,</span>
|
||
expandedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-0-0'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
onDragEnter <span class="token operator">=</span> <span class="token punctuation">(</span>info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">// expandedKeys 需要受控时设置</span>
|
||
<span class="token comment" spellcheck="true">// this.setState({</span>
|
||
<span class="token comment" spellcheck="true">// expandedKeys: info.expandedKeys,</span>
|
||
<span class="token comment" spellcheck="true">// });</span>
|
||
<span class="token punctuation">}</span>
|
||
onDrop <span class="token operator">=</span> <span class="token punctuation">(</span>info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> dropKey <span class="token operator">=</span> info<span class="token punctuation">.</span>node<span class="token punctuation">.</span>props<span class="token punctuation">.</span>eventKey<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> dragKey <span class="token operator">=</span> info<span class="token punctuation">.</span>dragNode<span class="token punctuation">.</span>props<span class="token punctuation">.</span>eventKey<span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">// const dragNodesKeys = info.dragNodesKeys;</span>
|
||
<span class="token keyword">const</span> loop <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">,</span> key<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
data<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>key <span class="token operator">===</span> key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token function">loop</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">,</span> key<span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>gData<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> dragObj<span class="token punctuation">;</span>
|
||
<span class="token function">loop</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> dragKey<span class="token punctuation">,</span> <span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
dragObj <span class="token operator">=</span> item<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>info<span class="token punctuation">.</span>dropToGap<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> ar<span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> i<span class="token punctuation">;</span>
|
||
<span class="token function">loop</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> dropKey<span class="token punctuation">,</span> <span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
ar <span class="token operator">=</span> arr<span class="token punctuation">;</span>
|
||
i <span class="token operator">=</span> index<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
ar<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> dragObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
<span class="token function">loop</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> dropKey<span class="token punctuation">,</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
item<span class="token punctuation">.</span>children <span class="token operator">=</span> item<span class="token punctuation">.</span>children <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">// where to insert 示例添加到尾部，可以是随意位置</span>
|
||
item<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>dragObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
gData<span class="token punctuation">:</span> data<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> loop <span class="token operator">=</span> data <span class="token operator">=</span><span class="token operator">></span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children <span class="token operator">&&</span> item<span class="token punctuation">.</span>children<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TreeNode</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Tree</span>
|
||
<span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>draggable-tree<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">defaultExpandedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>expandedKeys<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">draggable</span>
|
||
<span class="token attr-name">onDragEnter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onDragEnter<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onDrop</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onDrop<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>gData<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Tree</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="446"><pre data-reactid="447"><code class="css" data-reactid="448"><span class="token selector">// You can add the following CSS to your project to make draggable area bigger
|
||
<span class="token id">#components-tree-demo-draggable</span> <span class="token class">.draggable-tree</span> <span class="token class">.ant-tree-node-content-wrapper</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token number">100%</span> - <span class="token number">18</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-tree-demo-search" data-reactid="449"><section class="code-box-demo" data-reactid="450"><div data-reactid="451"><span class="ant-input-preSuffix-wrapper" style="width:300px;" data-reactid="452"><input type="text" class="ant-input ant-input-search" placeholder="Search" data-reactid="453"/><span class="ant-input-suffix" data-reactid="454"><i class="anticon anticon-search ant-input-search-icon" data-reactid="455"></i></span></span><ul class="ant-tree" role="tree-node" unselectable="true" data-reactid="456"><li class="" data-reactid="457"><span class="ant-tree-switcher ant-tree-noline_close" data-reactid="458"></span><a title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close" data-reactid="459"><span class="ant-tree-title" data-reactid="460"><span data-reactid="461"><!-- react-text: 462 --><!-- /react-text --><span style="color:#f50;" data-reactid="463"></span><!-- react-text: 464 -->0-0<!-- /react-text --></span></span></a><!-- react-empty: 465 --></li><li class="" data-reactid="466"><span class="ant-tree-switcher ant-tree-noline_close" data-reactid="467"></span><a title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close" data-reactid="468"><span class="ant-tree-title" data-reactid="469"><span data-reactid="470"><!-- react-text: 471 --><!-- /react-text --><span style="color:#f50;" data-reactid="472"></span><!-- react-text: 473 -->0-1<!-- /react-text --></span></span></a><!-- react-empty: 474 --></li><li class="" data-reactid="475"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="476"></span><a title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="477"><span class="ant-tree-title" data-reactid="478"><span data-reactid="479"><!-- react-text: 480 --><!-- /react-text --><span style="color:#f50;" data-reactid="481"></span><!-- react-text: 482 -->0-2<!-- /react-text --></span></span></a></li></ul></div></section><section class="code-box-meta markdown" data-reactid="483"><div class="code-box-title" data-reactid="484"><a href="#components-tree-demo-search" data-reactid="485">Searchable</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/search.md" data-reactid="486"><i class="anticon anticon-edit" data-reactid="487"></i></a></div><div data-reactid="488"><p data-reactid="489"><!-- react-text: 490 -->Searchable Tree.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="491"></i></section><section class="highlight-wrapper" data-reactid="492"><div class="highlight" data-reactid="493"><i class="anticon anticon-copy code-box-code-copy" data-reactid="494"></i><pre class="language-jsx" data-reactid="495"><code data-reactid="496"><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree<span class="token punctuation">,</span> Input <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> Search <span class="token operator">=</span> Input<span class="token punctuation">.</span>Search<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> y <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> z <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> gData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> generateData <span class="token operator">=</span> <span class="token punctuation">(</span>_level<span class="token punctuation">,</span> _preKey<span class="token punctuation">,</span> _tns<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> preKey <span class="token operator">=</span> _preKey <span class="token operator">||</span> <span class="token string">'0'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> tns <span class="token operator">=</span> _tns <span class="token operator">||</span> gData<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> x<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>preKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
|
||
tns<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> key<span class="token punctuation">,</span> key <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>_level <span class="token operator"><</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> tns<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">const</span> level <span class="token operator">=</span> _level <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
tns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token function">generateData</span><span class="token punctuation">(</span>level<span class="token punctuation">,</span> key<span class="token punctuation">,</span> tns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token function">generateData</span><span class="token punctuation">(</span>z<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> dataList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> generateList <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> node <span class="token operator">=</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> key <span class="token operator">=</span> node<span class="token punctuation">.</span>key<span class="token punctuation">;</span>
|
||
dataList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token punctuation">,</span> title<span class="token punctuation">:</span> key <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">generateList</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">,</span> node<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token function">generateList</span><span class="token punctuation">(</span>gData<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> getParentKey <span class="token operator">=</span> <span class="token punctuation">(</span>key<span class="token punctuation">,</span> tree<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> parentKey<span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> tree<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> node <span class="token operator">=</span> tree<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> item<span class="token punctuation">.</span>key <span class="token operator">===</span> key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
parentKey <span class="token operator">=</span> node<span class="token punctuation">.</span>key<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">getParentKey</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> node<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
parentKey <span class="token operator">=</span> <span class="token function">getParentKey</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> node<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> parentKey<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">SearchTree</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
expandedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
searchValue<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||
autoExpandParent<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
onExpand <span class="token operator">=</span> <span class="token punctuation">(</span>expandedKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
expandedKeys<span class="token punctuation">,</span>
|
||
autoExpandParent<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
onChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> value <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> expandedKeys <span class="token operator">=</span> dataList<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>key<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token function">getParentKey</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>key<span class="token punctuation">,</span> gData<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> i<span class="token punctuation">,</span> self<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> item <span class="token operator">&&</span> self<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">===</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
expandedKeys<span class="token punctuation">,</span>
|
||
searchValue<span class="token punctuation">:</span> value<span class="token punctuation">,</span>
|
||
autoExpandParent<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> searchValue<span class="token punctuation">,</span> expandedKeys<span class="token punctuation">,</span> autoExpandParent <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> loop <span class="token operator">=</span> data <span class="token operator">=</span><span class="token operator">></span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> index <span class="token operator">=</span> item<span class="token punctuation">.</span>key<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span>searchValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> beforeStr <span class="token operator">=</span> item<span class="token punctuation">.</span>key<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> afterStr <span class="token operator">=</span> item<span class="token punctuation">.</span>key<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span>index <span class="token operator">+</span> searchValue<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> title <span class="token operator">=</span> index <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">?</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span>beforeStr<span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token string">'#f50'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>searchValue<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span>afterStr<span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>title<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TreeNode</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>title<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Search</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">300</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Tree</span>
|
||
<span class="token attr-name">onExpand</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onExpand<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">expandedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>expandedKeys<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">autoExpandParent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>autoExpandParent<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span>gData<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Tree</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SearchTree</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="497"><section class="code-box" id="components-tree-demo-basic-controlled" data-reactid="498"><section class="code-box-demo" data-reactid="499"><ul class="ant-tree" role="tree-node" unselectable="true" data-reactid="500"><li class="" data-reactid="501"><span class="ant-tree-switcher ant-tree-noline_open" data-reactid="502"></span><span class="ant-tree-checkbox ant-tree-checkbox-indeterminate" data-reactid="503"><span class="ant-tree-checkbox-inner" data-reactid="504"></span></span><a title="0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open" data-reactid="505"><span class="ant-tree-title" data-reactid="506">0-0</span></a><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" data-reactid="507"><li class="" data-reactid="508"><span class="ant-tree-switcher ant-tree-noline_open" data-reactid="509"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled" data-reactid="510"><span class="ant-tree-checkbox-inner" data-reactid="511"></span></span><a title="0-0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open" data-reactid="512"><span class="ant-tree-title" data-reactid="513">0-0-0</span></a><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" data-reactid="514"><li class="" data-reactid="515"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="516"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked" data-reactid="517"><span class="ant-tree-checkbox-inner" data-reactid="518"></span></span><a title="0-0-0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="519"><span class="ant-tree-title" data-reactid="520">0-0-0-0</span></a></li><li class="" data-reactid="521"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="522"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked" data-reactid="523"><span class="ant-tree-checkbox-inner" data-reactid="524"></span></span><a title="0-0-0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="525"><span class="ant-tree-title" data-reactid="526">0-0-0-1</span></a></li><li class="" data-reactid="527"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="528"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked" data-reactid="529"><span class="ant-tree-checkbox-inner" data-reactid="530"></span></span><a title="0-0-0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="531"><span class="ant-tree-title" data-reactid="532">0-0-0-2</span></a></li></ul></li><li class="" data-reactid="533"><span class="ant-tree-switcher ant-tree-noline_open" data-reactid="534"></span><span class="ant-tree-checkbox" data-reactid="535"><span class="ant-tree-checkbox-inner" data-reactid="536"></span></span><a title="0-0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open" data-reactid="537"><span class="ant-tree-title" data-reactid="538">0-0-1</span></a><ul class="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true" data-reactid="539"><li class="" data-reactid="540"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="541"></span><span class="ant-tree-checkbox" data-reactid="542"><span class="ant-tree-checkbox-inner" data-reactid="543"></span></span><a title="0-0-1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="544"><span class="ant-tree-title" data-reactid="545">0-0-1-0</span></a></li><li class="" data-reactid="546"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="547"></span><span class="ant-tree-checkbox" data-reactid="548"><span class="ant-tree-checkbox-inner" data-reactid="549"></span></span><a title="0-0-1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="550"><span class="ant-tree-title" data-reactid="551">0-0-1-1</span></a></li><li class="" data-reactid="552"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="553"></span><span class="ant-tree-checkbox" data-reactid="554"><span class="ant-tree-checkbox-inner" data-reactid="555"></span></span><a title="0-0-1-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="556"><span class="ant-tree-title" data-reactid="557">0-0-1-2</span></a></li></ul></li><li class="" data-reactid="558"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="559"></span><span class="ant-tree-checkbox" data-reactid="560"><span class="ant-tree-checkbox-inner" data-reactid="561"></span></span><a title="0-0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="562"><span class="ant-tree-title" data-reactid="563">0-0-2</span></a></li></ul></li><li class="" data-reactid="564"><span class="ant-tree-switcher ant-tree-noline_close" data-reactid="565"></span><span class="ant-tree-checkbox" data-reactid="566"><span class="ant-tree-checkbox-inner" data-reactid="567"></span></span><a title="0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close" data-reactid="568"><span class="ant-tree-title" data-reactid="569">0-1</span></a><!-- react-empty: 570 --></li><li class="" data-reactid="571"><span class="ant-tree-switcher ant-tree-switcher-noop ant-tree-noline_docu" data-reactid="572"></span><span class="ant-tree-checkbox" data-reactid="573"><span class="ant-tree-checkbox-inner" data-reactid="574"></span></span><a title="0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal" data-reactid="575"><span class="ant-tree-title" data-reactid="576">0-2</span></a></li></ul></section><section class="code-box-meta markdown" data-reactid="577"><div class="code-box-title" data-reactid="578"><a href="#components-tree-demo-basic-controlled" data-reactid="579">basic controlled example</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/basic-controlled.md" data-reactid="580"><i class="anticon anticon-edit" data-reactid="581"></i></a></div><div data-reactid="582"><p data-reactid="583"><!-- react-text: 584 -->basic controlled example<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="585"></i></section><section class="highlight-wrapper" data-reactid="586"><div class="highlight" data-reactid="587"><i class="anticon anticon-copy code-box-code-copy" data-reactid="588"></i><pre class="language-jsx" data-reactid="589"><code data-reactid="590"><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> y <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> z <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> gData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> generateData <span class="token operator">=</span> <span class="token punctuation">(</span>_level<span class="token punctuation">,</span> _preKey<span class="token punctuation">,</span> _tns<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> preKey <span class="token operator">=</span> _preKey <span class="token operator">||</span> <span class="token string">'0'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> tns <span class="token operator">=</span> _tns <span class="token operator">||</span> gData<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> x<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>preKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
|
||
tns<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> key<span class="token punctuation">,</span> key <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>_level <span class="token operator"><</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> tns<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">const</span> level <span class="token operator">=</span> _level <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
tns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token function">generateData</span><span class="token punctuation">(</span>level<span class="token punctuation">,</span> key<span class="token punctuation">,</span> tns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token function">generateData</span><span class="token punctuation">(</span>z<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
expandedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">,</span> <span class="token string">'0-0-1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
autoExpandParent<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
checkedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'0-0-0'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
selectedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
onExpand <span class="token operator">=</span> <span class="token punctuation">(</span>expandedKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onExpand'</span><span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment" spellcheck="true">// if not set autoExpandParent to false, if children expanded, parent can not collapse.</span>
|
||
<span class="token comment" spellcheck="true">// or, you can remove all expanded children keys.</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
expandedKeys<span class="token punctuation">,</span>
|
||
autoExpandParent<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
onCheck <span class="token operator">=</span> <span class="token punctuation">(</span>checkedKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
checkedKeys<span class="token punctuation">,</span>
|
||
selectedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'0-3'</span><span class="token punctuation">,</span> <span class="token string">'0-4'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
onSelect <span class="token operator">=</span> <span class="token punctuation">(</span>selectedKeys<span class="token punctuation">,</span> info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onSelect'</span><span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> loop <span class="token operator">=</span> data <span class="token operator">=</span><span class="token operator">></span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">disableCheckbox</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">'0-0-0'</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TreeNode</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Tree</span>
|
||
<span class="token attr-name">checkable</span>
|
||
<span class="token attr-name">onExpand</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onExpand<span class="token punctuation">}</span></span> <span class="token attr-name">expandedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>expandedKeys<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">autoExpandParent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>autoExpandParent<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onCheck</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onCheck<span class="token punctuation">}</span></span> <span class="token attr-name">checkedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>checkedKeys<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onSelect</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSelect<span class="token punctuation">}</span></span> <span class="token attr-name">selectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedKeys<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span>gData<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Tree</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-tree-demo-dynamic" data-reactid="591"><section class="code-box-demo" data-reactid="592"><ul class="ant-tree" role="tree-node" unselectable="true" data-reactid="593"></ul></section><section class="code-box-meta markdown" data-reactid="594"><div class="code-box-title" data-reactid="595"><a href="#components-tree-demo-dynamic" data-reactid="596">load data asynchronously</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/tree/demo/dynamic.md" data-reactid="597"><i class="anticon anticon-edit" data-reactid="598"></i></a></div><div data-reactid="599"><p data-reactid="600"><!-- react-text: 601 -->To load data asynchronously when click to expand a treeNode.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="602"></i></section><section class="highlight-wrapper" data-reactid="603"><div class="highlight" data-reactid="604"><i class="anticon anticon-copy code-box-code-copy" data-reactid="605"></i><pre class="language-jsx" data-reactid="606"><code data-reactid="607"><span class="token keyword">import</span> <span class="token punctuation">{</span> Tree <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> TreeNode <span class="token operator">=</span> Tree<span class="token punctuation">.</span>TreeNode<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">generateTreeNodes</span><span class="token punctuation">(</span>treeNode<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> key <span class="token operator">=</span> treeNode<span class="token punctuation">.</span>props<span class="token punctuation">.</span>eventKey<span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`leaf </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> arr<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">setLeaf</span><span class="token punctuation">(</span>treeData<span class="token punctuation">,</span> curKey<span class="token punctuation">,</span> level<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> loopLeaf <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">,</span> lev<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> l <span class="token operator">=</span> lev <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
data<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>key<span class="token punctuation">.</span>length <span class="token operator">></span> curKey<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token operator">?</span> item<span class="token punctuation">.</span>key<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>curKey<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token number">0</span> <span class="token punctuation">:</span>
|
||
curKey<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>key<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">loopLeaf</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">,</span> l<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>l <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
item<span class="token punctuation">.</span>isLeaf <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token function">loopLeaf</span><span class="token punctuation">(</span>treeData<span class="token punctuation">,</span> level <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">getNewTreeData</span><span class="token punctuation">(</span>treeData<span class="token punctuation">,</span> curKey<span class="token punctuation">,</span> child<span class="token punctuation">,</span> level<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> loop <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>level <span class="token operator"><</span> <span class="token number">1</span> <span class="token operator">||</span> curKey<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">3</span> <span class="token operator">></span> level <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
data<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>curKey<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>key<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">loop</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
item<span class="token punctuation">.</span>children <span class="token operator">=</span> child<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token function">loop</span><span class="token punctuation">(</span>treeData<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">setLeaf</span><span class="token punctuation">(</span>treeData<span class="token punctuation">,</span> curKey<span class="token punctuation">,</span> level<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
treeData<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
treeData<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'pNode 01'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-0'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'pNode 02'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'pNode 03'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'0-2'</span><span class="token punctuation">,</span> isLeaf<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
onSelect <span class="token operator">=</span> <span class="token punctuation">(</span>info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'selected'</span><span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
onLoadData <span class="token operator">=</span> <span class="token punctuation">(</span>treeNode<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> treeData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>treeData<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token function">getNewTreeData</span><span class="token punctuation">(</span>treeData<span class="token punctuation">,</span> treeNode<span class="token punctuation">.</span>props<span class="token punctuation">.</span>eventKey<span class="token punctuation">,</span> <span class="token function">generateTreeNodes</span><span class="token punctuation">(</span>treeNode<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> treeData <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> loop <span class="token operator">=</span> data <span class="token operator">=</span><span class="token operator">></span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">loop</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TreeNode</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">isLeaf</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>isLeaf<span class="token punctuation">}</span></span> <span class="token attr-name">disabled</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">'0-0-0'</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> treeNodes <span class="token operator">=</span> <span class="token function">loop</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>treeData<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Tree</span> <span class="token attr-name">onSelect</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSelect<span class="token punctuation">}</span></span> <span class="token attr-name">loadData</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onLoadData<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span>treeNodes<span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Tree</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="608"><h2 id="API" data-reactid="609"><span data-reactid="610"><!-- react-text: 611 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="612">#</a></h2><h3 id="Tree-props" data-reactid="613"><span data-reactid="614"><!-- react-text: 615 -->Tree props<!-- /react-text --></span><a href="#Tree-props" class="anchor" data-reactid="616">#</a></h3><table data-reactid="617"><thead data-reactid="618"><tr data-reactid="619"><th data-reactid="620"><!-- react-text: 621 -->Property<!-- /react-text --></th><th data-reactid="622"><!-- react-text: 623 -->Description<!-- /react-text --></th><th data-reactid="624"><!-- react-text: 625 -->Type<!-- /react-text --></th><th data-reactid="626"><!-- react-text: 627 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="628"><tr data-reactid="629"><td data-reactid="630"><!-- react-text: 631 -->multiple<!-- /react-text --></td><td data-reactid="632"><!-- react-text: 633 -->Whether allow to select multiple treeNodes<!-- /react-text --></td><td data-reactid="634"><!-- react-text: 635 -->boolean<!-- /react-text --></td><td data-reactid="636"><!-- react-text: 637 -->false<!-- /react-text --></td></tr><tr data-reactid="638"><td data-reactid="639"><!-- react-text: 640 -->checkable<!-- /react-text --></td><td data-reactid="641"><!-- react-text: 642 -->Whether support add Checkbox before treeNode<!-- /react-text --></td><td data-reactid="643"><!-- react-text: 644 -->boolean<!-- /react-text --></td><td data-reactid="645"><!-- react-text: 646 -->false<!-- /react-text --></td></tr><tr data-reactid="647"><td data-reactid="648"><!-- react-text: 649 -->defaultExpandAll<!-- /react-text --></td><td data-reactid="650"><!-- react-text: 651 -->Whether default to expand all treeNodes<!-- /react-text --></td><td data-reactid="652"><!-- react-text: 653 -->boolean<!-- /react-text --></td><td data-reactid="654"><!-- react-text: 655 -->false<!-- /react-text --></td></tr><tr data-reactid="656"><td data-reactid="657"><!-- react-text: 658 -->defaultExpandedKeys<!-- /react-text --></td><td data-reactid="659"><!-- react-text: 660 -->Specify keys of default expanded treeNodes<!-- /react-text --></td><td data-reactid="661"><!-- react-text: 662 -->string[]<!-- /react-text --></td><td data-reactid="663"><!-- react-text: 664 -->[]<!-- /react-text --></td></tr><tr data-reactid="665"><td data-reactid="666"><!-- react-text: 667 -->expandedKeys<!-- /react-text --></td><td data-reactid="668"><!-- react-text: 669 -->(controlled) Specifies keys of expanded treeNodes<!-- /react-text --></td><td data-reactid="670"><!-- react-text: 671 -->string[]<!-- /react-text --></td><td data-reactid="672"><!-- react-text: 673 -->[]<!-- /react-text --></td></tr><tr data-reactid="674"><td data-reactid="675"><!-- react-text: 676 -->autoExpandParent<!-- /react-text --></td><td data-reactid="677"><!-- react-text: 678 -->Whether to automatically expand a parent treeNode<!-- /react-text --></td><td data-reactid="679"><!-- react-text: 680 -->boolean<!-- /react-text --></td><td data-reactid="681"><!-- react-text: 682 -->true<!-- /react-text --></td></tr><tr data-reactid="683"><td data-reactid="684"><!-- react-text: 685 -->defaultCheckedKeys<!-- /react-text --></td><td data-reactid="686"><!-- react-text: 687 -->Specifies keys of default checked treeNodes<!-- /react-text --></td><td data-reactid="688"><!-- react-text: 689 -->string[]<!-- /react-text --></td><td data-reactid="690"><!-- react-text: 691 -->[]<!-- /react-text --></td></tr><tr data-reactid="692"><td data-reactid="693"><!-- react-text: 694 -->checkedKeys<!-- /react-text --></td><td data-reactid="695"><!-- react-text: 696 -->(controlled) Specifies keys of checked treeNodes（PS： When specifies a key of treeNode which is a parent treeNode, all children treeNodes of its will be checked; And vice versa, when specifies a key of treeNode which is a child treeNode, its parent treeNode will also be checked. When <!-- /react-text --><code data-reactid="697"><!-- react-text: 698 -->checkable<!-- /react-text --></code><!-- react-text: 699 --> and <!-- /react-text --><code data-reactid="700"><!-- react-text: 701 -->checkStrictly<!-- /react-text --></code><!-- react-text: 702 --> is true, it'a object has <!-- /react-text --><code data-reactid="703"><!-- react-text: 704 -->checked<!-- /react-text --></code><!-- react-text: 705 --> and <!-- /react-text --><code data-reactid="706"><!-- react-text: 707 -->halfChecked<!-- /react-text --></code><!-- react-text: 708 --> property, and no matter child treeNode or parent treeNode is checked, they won't impact on eachother.<!-- /react-text --></td><td data-reactid="709"><!-- react-text: 710 -->string[] <!-- /react-text --><!-- react-text: 711 -->|<!-- /react-text --><!-- react-text: 712 --> {checked: string[], halfChecked: string[]}<!-- /react-text --></td><td data-reactid="713"><!-- react-text: 714 -->[]<!-- /react-text --></td></tr><tr data-reactid="715"><td data-reactid="716"><!-- react-text: 717 -->checkStrictly<!-- /react-text --></td><td data-reactid="718"><!-- react-text: 719 -->Check treeNode precisely, parent treeNode and children treeNodes are not associated<!-- /react-text --></td><td data-reactid="720"><!-- react-text: 721 -->boolean<!-- /react-text --></td><td data-reactid="722"><!-- react-text: 723 -->false<!-- /react-text --></td></tr><tr data-reactid="724"><td data-reactid="725"><!-- react-text: 726 -->defaultSelectedKeys<!-- /react-text --></td><td data-reactid="727"><!-- react-text: 728 -->Specifies keys of default selected treeNodes<!-- /react-text --></td><td data-reactid="729"><!-- react-text: 730 -->string[]<!-- /react-text --></td><td data-reactid="731"><!-- react-text: 732 -->[]<!-- /react-text --></td></tr><tr data-reactid="733"><td data-reactid="734"><!-- react-text: 735 -->selectedKeys<!-- /react-text --></td><td data-reactid="736"><!-- react-text: 737 -->(controlled) Specifies keys of selected treeNode<!-- /react-text --></td><td data-reactid="738"><!-- react-text: 739 -->string[]<!-- /react-text --></td><td data-reactid="740"><!-- react-text: 741 -->-<!-- /react-text --></td></tr><tr data-reactid="742"><td data-reactid="743"><!-- react-text: 744 -->onExpand<!-- /react-text --></td><td data-reactid="745"><!-- react-text: 746 -->Defines a function will be called when expand or collapse a treeNode<!-- /react-text --></td><td data-reactid="747"><!-- react-text: 748 -->function(expandedKeys, {expanded: bool, node})<!-- /react-text --></td><td data-reactid="749"><!-- react-text: 750 -->-<!-- /react-text --></td></tr><tr data-reactid="751"><td data-reactid="752"><!-- react-text: 753 -->onCheck<!-- /react-text --></td><td data-reactid="754"><!-- react-text: 755 -->Defines a function will be called when the onCheck event occurs<!-- /react-text --></td><td data-reactid="756"><!-- react-text: 757 -->function(checkedKeys, e:{checked: bool, checkedNodes, node, event})<!-- /react-text --></td><td data-reactid="758"><!-- react-text: 759 -->-<!-- /react-text --></td></tr><tr data-reactid="760"><td data-reactid="761"><!-- react-text: 762 -->onSelect<!-- /react-text --></td><td data-reactid="763"><!-- react-text: 764 -->The callback will be invoked when the user clicks a treeNode<!-- /react-text --></td><td data-reactid="765"><!-- react-text: 766 -->function(selectedKeys, e:{selected: bool, selectedNodes, node, event})<!-- /react-text --></td><td data-reactid="767"><!-- react-text: 768 -->-<!-- /react-text --></td></tr><tr data-reactid="769"><td data-reactid="770"><!-- react-text: 771 -->filterTreeNode<!-- /react-text --></td><td data-reactid="772"><!-- react-text: 773 -->Defines a function to filter treeNodes（highlight），when return true, corresponding treeNode will be highlight<!-- /react-text --></td><td data-reactid="774"><!-- react-text: 775 -->function(node)<!-- /react-text --></td><td data-reactid="776"><!-- react-text: 777 -->-<!-- /react-text --></td></tr><tr data-reactid="778"><td data-reactid="779"><!-- react-text: 780 -->loadData<!-- /react-text --></td><td data-reactid="781"><!-- react-text: 782 -->load data asynchronously<!-- /react-text --></td><td data-reactid="783"><!-- react-text: 784 -->function(node)<!-- /react-text --></td><td data-reactid="785"><!-- react-text: 786 -->-<!-- /react-text --></td></tr><tr data-reactid="787"><td data-reactid="788"><!-- react-text: 789 -->onRightClick<!-- /react-text --></td><td data-reactid="790"><!-- react-text: 791 -->The call back will be invoked when the user right clicks a treeNode<!-- /react-text --></td><td data-reactid="792"><!-- react-text: 793 -->function({event, node})<!-- /react-text --></td><td data-reactid="794"><!-- react-text: 795 -->-<!-- /react-text --></td></tr><tr data-reactid="796"><td data-reactid="797"><!-- react-text: 798 -->draggable<!-- /react-text --></td><td data-reactid="799"><!-- react-text: 800 -->Specifies whether this Tree is draggable（IE>8）<!-- /react-text --></td><td data-reactid="801"><!-- react-text: 802 -->boolean<!-- /react-text --></td><td data-reactid="803"><!-- react-text: 804 -->false<!-- /react-text --></td></tr><tr data-reactid="805"><td data-reactid="806"><!-- react-text: 807 -->onDragStart<!-- /react-text --></td><td data-reactid="808"><!-- react-text: 809 -->Defines a function will be called when the onDragStart event occurs<!-- /react-text --></td><td data-reactid="810"><!-- react-text: 811 -->function({event, node})<!-- /react-text --></td><td data-reactid="812"><!-- react-text: 813 -->-<!-- /react-text --></td></tr><tr data-reactid="814"><td data-reactid="815"><!-- react-text: 816 -->onDragEnter<!-- /react-text --></td><td data-reactid="817"><!-- react-text: 818 -->Defines a function will be called when the onDragEnter event occurs<!-- /react-text --></td><td data-reactid="819"><!-- react-text: 820 -->function({event, node, expandedKeys})<!-- /react-text --></td><td data-reactid="821"><!-- react-text: 822 -->-<!-- /react-text --></td></tr><tr data-reactid="823"><td data-reactid="824"><!-- react-text: 825 -->onDragOver<!-- /react-text --></td><td data-reactid="826"><!-- react-text: 827 -->Defines a function will be called when the onDragOver event occurs<!-- /react-text --></td><td data-reactid="828"><!-- react-text: 829 -->function({event, node})<!-- /react-text --></td><td data-reactid="830"><!-- react-text: 831 -->-<!-- /react-text --></td></tr><tr data-reactid="832"><td data-reactid="833"><!-- react-text: 834 -->onDragLeave<!-- /react-text --></td><td data-reactid="835"><!-- react-text: 836 -->Defines a function will be called when the onDragLeave event occurs<!-- /react-text --></td><td data-reactid="837"><!-- react-text: 838 -->function({event, node})<!-- /react-text --></td><td data-reactid="839"><!-- react-text: 840 -->-<!-- /react-text --></td></tr><tr data-reactid="841"><td data-reactid="842"><!-- react-text: 843 -->onDragEnd<!-- /react-text --></td><td data-reactid="844"><!-- react-text: 845 -->Defines a function will be called when the onDragEnd event occurs<!-- /react-text --></td><td data-reactid="846"><!-- react-text: 847 -->function({event, node})<!-- /react-text --></td><td data-reactid="848"><!-- react-text: 849 -->-<!-- /react-text --></td></tr><tr data-reactid="850"><td data-reactid="851"><!-- react-text: 852 -->onDrop<!-- /react-text --></td><td data-reactid="853"><!-- react-text: 854 -->Defines a function will be called when the onDrop event occurs<!-- /react-text --></td><td data-reactid="855"><!-- react-text: 856 -->function({event, node, dragNode, dragNodesKeys})<!-- /react-text --></td><td data-reactid="857"><!-- react-text: 858 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="TreeNode-props" data-reactid="859"><span data-reactid="860"><!-- react-text: 861 -->TreeNode props<!-- /react-text --></span><a href="#TreeNode-props" class="anchor" data-reactid="862">#</a></h3><table data-reactid="863"><thead data-reactid="864"><tr data-reactid="865"><th data-reactid="866"><!-- react-text: 867 -->Property<!-- /react-text --></th><th data-reactid="868"><!-- react-text: 869 -->Description<!-- /react-text --></th><th data-reactid="870"><!-- react-text: 871 -->Type<!-- /react-text --></th><th data-reactid="872"><!-- react-text: 873 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="874"><tr data-reactid="875"><td data-reactid="876"><!-- react-text: 877 -->disabled<!-- /react-text --></td><td data-reactid="878"><!-- react-text: 879 -->whether disabled the treeNode<!-- /react-text --></td><td data-reactid="880"><!-- react-text: 881 -->boolean<!-- /react-text --></td><td data-reactid="882"><!-- react-text: 883 -->false<!-- /react-text --></td></tr><tr data-reactid="884"><td data-reactid="885"><!-- react-text: 886 -->disableCheckbox<!-- /react-text --></td><td data-reactid="887"><!-- react-text: 888 -->whether disable the checkbox of treeNode<!-- /react-text --></td><td data-reactid="889"><!-- react-text: 890 -->boolean<!-- /react-text --></td><td data-reactid="891"><!-- react-text: 892 -->false<!-- /react-text --></td></tr><tr data-reactid="893"><td data-reactid="894"><!-- react-text: 895 -->title<!-- /react-text --></td><td data-reactid="896"><!-- react-text: 897 -->title<!-- /react-text --></td><td data-reactid="898"><!-- react-text: 899 -->string<!-- /react-text --><!-- react-text: 900 -->|<!-- /react-text --><!-- react-text: 901 -->ReactNode<!-- /react-text --></td><td data-reactid="902"><!-- react-text: 903 -->'---'<!-- /react-text --></td></tr><tr data-reactid="904"><td data-reactid="905"><!-- react-text: 906 -->key<!-- /react-text --></td><td data-reactid="907"><!-- react-text: 908 -->it's used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: it must be unique in all of treeNodes of the tree!<!-- /react-text --></td><td data-reactid="909"><!-- react-text: 910 -->string<!-- /react-text --></td><td data-reactid="911"><!-- react-text: 912 -->internal calculated position of treeNode<!-- /react-text --></td></tr><tr data-reactid="913"><td data-reactid="914"><!-- react-text: 915 -->isLeaf<!-- /react-text --></td><td data-reactid="916"><!-- react-text: 917 -->whether it's leaf node<!-- /react-text --></td><td data-reactid="918"><!-- react-text: 919 -->boolean<!-- /react-text --></td><td data-reactid="920"><!-- react-text: 921 -->false<!-- /react-text --></td></tr></tbody></table><h2 id="Note" data-reactid="922"><span data-reactid="923"><!-- react-text: 924 -->Note<!-- /react-text --></span><a href="#Note" class="anchor" data-reactid="925">#</a></h2><p data-reactid="926"><!-- react-text: 927 -->The number of treeNodes can be very large, but when enable <!-- /react-text --><code data-reactid="928"><!-- react-text: 929 -->checkable<!-- /react-text --></code><!-- react-text: 930 -->,
|
||
it will spend more computing time, so we cache some calculations (e.g. <!-- /react-text --><code data-reactid="931"><!-- react-text: 932 -->this.treeNodesStates<!-- /react-text --></code><!-- react-text: 933 -->),
|
||
to avoid double computing. But, this bring some restrictions,
|
||
<!-- /react-text --><strong data-reactid="934"><!-- react-text: 935 -->when you load treeNodes asynchronously, you should render tree like this<!-- /react-text --></strong><!-- react-text: 936 -->。<!-- /react-text --></p><pre class="language-jsx" data-reactid="937"><code data-reactid="938"><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>treeData<span class="token punctuation">.</span>length
|
||
<span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Tree</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>treeData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>data <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TreeNode</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Tree</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">:</span> <span class="token string">'loading tree'</span><span class="token punctuation">}</span></code></pre></section></article></div></div><div class="ant-row" data-reactid="939"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="940"><section class="prev-next-nav" data-reactid="941"><a class="prev-page" href="/components/timeline/" data-reactid="942"><span data-reactid="943">Timeline</span><span class="chinese" data-reactid="944"></span></a><a class="next-page" href="/components/alert/" data-reactid="945"><span data-reactid="946">Alert</span><span class="chinese" data-reactid="947"></span></a></section></div></div></div><footer id="footer" data-reactid="948"><ul data-reactid="949"><li data-reactid="950"><h2 data-reactid="951"><i class="anticon anticon-github" data-reactid="952"></i><!-- react-text: 953 --> GitHub<!-- /react-text --></h2><div data-reactid="954"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="955"><span data-reactid="956">Repository</span></a></div><div data-reactid="957"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="958"><span data-reactid="959">Customize Theme</span></a></div><div data-reactid="960"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="961"><span data-reactid="962">Awesome Ant Design</span></a></div></li><li data-reactid="963"><h2 data-reactid="964"><i class="anticon anticon-link" data-reactid="965"></i><!-- react-text: 966 --> <!-- /react-text --><span data-reactid="967">Links</span></h2><div data-reactid="968"><a href="http://mobile.ant.design" data-reactid="969">Ant Design Mobile</a><span data-reactid="970"> - </span><span data-reactid="971">Mobile UI</span></div><div data-reactid="972"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="973">dva</a><!-- react-text: 974 --> - <!-- /react-text --><span data-reactid="975">Framework</span></div><div data-reactid="976"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="977">dva-cli</a><!-- react-text: 978 --> -<!-- /react-text --><span data-reactid="979">Developer Tools</span></div><div data-reactid="980"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="981">Egg</a><span data-reactid="982"> - </span><span data-reactid="983">Enterprise Node Framework</span></div><div data-reactid="984"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="985">AntV</a><span data-reactid="986"> - </span><span data-reactid="987">Data Visualization</span></div><div data-reactid="988"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="989">Ant Motion</a><span data-reactid="990"> - </span><span data-reactid="991">Motion Soluction</span></div><div data-reactid="992"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="993">AntD Library</a><span data-reactid="994"> - </span><span data-reactid="995">Axure library</span></div><div data-reactid="996"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="997">Ant UX</a><span data-reactid="998"> - </span><span data-reactid="999">Sitemap Template</span></div></li><li data-reactid="1000"><h2 data-reactid="1001"><i class="anticon anticon-customer-service" data-reactid="1002"></i><!-- react-text: 1003 --> <!-- /react-text --><span data-reactid="1004">Community</span></h2><div data-reactid="1005"><a href="/changelog" data-reactid="1006"><span data-reactid="1007">Change Log</span></a></div><div data-reactid="1008"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="1009"><span data-reactid="1010">FAQ</span></a></div><div data-reactid="1011"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="1012"><span data-reactid="1013">Chat Room</span></a></div><div data-reactid="1014"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="1015"><span data-reactid="1016">Bug Report</span></a></div><div data-reactid="1017"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="1018"><span data-reactid="1019">StackOverflow</span></a></div><div data-reactid="1020"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="1021"><span data-reactid="1022">SegmentFault</span></a></div></li><li data-reactid="1023"><h2 data-reactid="1024"><!-- react-text: 1025 -->Copyright © <!-- /react-text --><!-- react-text: 1026 -->2017<!-- /react-text --></h2><div data-reactid="1027"><span data-reactid="1028">Created by Ant UED</span></div><div data-reactid="1029"><!-- react-text: 1030 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="1031">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|