Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9ebf9dd

Browse files
demo完善
功能优化
1 parent 18dbf09 commit 9ebf9dd

File tree

15 files changed

+325
-34
lines changed

15 files changed

+325
-34
lines changed

‎README.md‎

Lines changed: 96 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,106 @@
1+
# nil-tree
2+
3+
`npm install --save nil-tree`
4+
5+
6+
## Tree属性
7+
8+
```
9+
{
10+
prefixCls: 'nil-tree',
11+
className: '',
12+
rootId: null,
13+
loadingLabel: 'Loading...',
14+
loadingComponent: 'div',
15+
loadData: null,
16+
showIcon: true,
17+
showExpanderIcon: true,
18+
checkable: false,
19+
maxDepth: 50, //最大层级
20+
21+
rootComponent: 'div',
22+
childNodesWrapperComponent: ChildNodesWrapper,
23+
nodeItemWrapperComponent: Fragment,
24+
//自定义
25+
renderIndentIcons: null,
26+
renderExpanderIcon: null,
27+
renderLoadingIcon: null,
28+
renderIcon: null,
29+
renderCheckbox: null,
30+
renderLabel: null,
31+
renderExtIcons: null,
32+
renderNode: null,
33+
//events
34+
onNodeClick: noop,
35+
onNodeDoubleClick: noop,
36+
onNodeContextMenu: noop,
37+
onNodeMouseDown: noop,
38+
onNodeMouseUp: noop,
39+
onNodeMouseEnter: noop,
40+
onNodeMouseLeave: noop,
41+
onNodeMouseOver: noop,
42+
onNodeMouseOut: noop,
43+
onNodeMouseMove: noop,
44+
}
45+
```
146

247
## Node属性
348

449
- id
550
- label
651
- leaf
7-
- pid
52+
- pid
53+
- cls
854
- iconCls
9-
- relativeDepth
55+
- relativeDepth[readonly]
1056
- expanded
1157
- checked
12-
- loading
13-
- isRoot
58+
- loading [readonly]
59+
- isRoot [readonly]
60+
61+
## 示例
62+
63+
```
64+
import React, { Component } from 'react';
65+
import TreeStore from 'xtree-store';
66+
import NilTree from 'nil-tree';
67+
import data from '../data.json';
68+
69+
export default class DEMO extends Component {
70+
71+
constructor(props) {
72+
super(props);
73+
74+
this.store = new TreeStore(data, {
75+
simpleData: true
76+
});
77+
78+
}
79+
80+
loadData = node => {
81+
const store = this.store;
82+
return store.getChildren(node.id);
83+
}
84+
85+
toggleExpand = (node, e, t) => {
86+
node.expanded = !node.expanded;
87+
node.checked = !node.checked;
88+
this.forceUpdate();
89+
//or
90+
// t.toggleExpand()
91+
}
92+
//checkable的选择状态需要通过回调设置checked
93+
render() {
94+
return (
95+
<NilTree
96+
onNodeClick={this.toggleExpand}
97+
loadData={this.loadData}
98+
showIcon
99+
checkable
100+
/>
101+
);
102+
}
103+
104+
}
14105
106+
```

‎examples/src/DemoList.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import Demo1 from './demos/demo1';
22
import Demo2 from './demos/demo2';
33
import Demo3 from './demos/demo3';
44
import Demo4 from './demos/demo4';
5+
import Demo5 from './demos/demo5';
56

67
export default [
78
{
8-
label: '树形显示',
9+
label: '基本功能',
910
component: Demo1
1011
},
1112
{
@@ -19,5 +20,9 @@ export default [
1920
{
2021
label: '动画效果',
2122
component: Demo4
23+
},
24+
{
25+
label: '树形表格',
26+
component: Demo5
2227
}
2328
]

‎examples/src/demos/demo1.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,19 @@ export default class DEMO extends Component {
2121

2222
toggleExpand = (node, e, t) => {
2323
node.expanded = !node.expanded;
24+
node.checked = !node.checked;
2425
this.forceUpdate();
2526
//or
2627
// t.toggleExpand()
2728
}
28-
29+
//checkable的选择状态需要通过回调设置checked
2930
render() {
3031
return (
3132
<NilTree
3233
onNodeClick={this.toggleExpand}
3334
loadData={this.loadData}
3435
showIcon
36+
checkable
3537
/>
3638
);
3739
}

‎examples/src/demos/demo4.js‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,25 @@ import TreeStore from 'xtree-store';
44
import NilTree from 'nil-tree';
55
import data from '../data.json';
66

7+
8+
79
class childNodesWrapperComponent extends Component {
810

11+
_timer = null
12+
913
componentDidMount() {
14+
15+
if (this._timer) {
16+
clearTimeout(this._timer)
17+
}
18+
1019
const dom = findDOMNode(this);
1120
if (dom) {
12-
dom.offsetTop;
13-
setTimeout(() => {
14-
dom.style.height = dom.scrollHeight + 'px';
15-
}, 0);
16-
setTimeout(() => {
21+
dom.style.height = dom.scrollHeight + 'px';
22+
23+
this._timer = setTimeout(() => {
1724
dom.style.height = 'auto';
25+
this._timer = null;
1826
}, 250);
1927
}
2028

@@ -27,7 +35,11 @@ class childNodesWrapperComponent extends Component {
2735
render() {
2836
const { children, expanded, ...others } = this.props;
2937

30-
return !expanded ? null :
38+
if (!expanded) return null;
39+
40+
const childs = children();
41+
42+
return !Array.isArray(childs) ? null :
3143
(
3244
<div {...others} style={{
3345
transitionProperty: 'all',
@@ -41,7 +53,9 @@ class childNodesWrapperComponent extends Component {
4153
);
4254
}
4355
}
44-
56+
/**
57+
* 通过自定义childNodesWrapperComponent属性来实现动画效果
58+
*/
4559
export default class DEMO extends Component {
4660

4761
dataStore = {}

‎examples/src/demos/demo5.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React, { Component } from 'react';
2+
import { findDOMNode } from 'react-dom';
3+
import TreeStore from 'xtree-store';
4+
import NilTree from 'nil-tree';
5+
import data from '../data.json';
6+
7+
8+
/**
9+
* 需要自定义的属性:
10+
* rootComponent, renderNode
11+
*/
12+
export default class DEMO extends Component {
13+
14+
dataStore = {}
15+
16+
constructor(props) {
17+
super(props);
18+
19+
this.store = new TreeStore(data, {
20+
simpleData: true
21+
});
22+
23+
}
24+
25+
loadData = node => {
26+
27+
if (this.dataStore[node.id]) return this.dataStore[node.id];
28+
29+
return new Promise(resolve => {
30+
const server = this.store;
31+
setTimeout(() => {
32+
const childs = server.getChildren(node.id);
33+
this.dataStore[node.id] = childs;
34+
resolve(childs)
35+
}, 500);
36+
});
37+
}
38+
39+
toggleExpand = (node, e, t) => {
40+
// node.expanded = !node.expanded;
41+
// this.forceUpdate();
42+
// or
43+
t.toggleExpand()
44+
}
45+
46+
renderNodeRow = (node, props, me) => {
47+
const { parentProps } = me.props;
48+
const { showIcon, showExpanderIcon, checkable } = parentProps
49+
50+
return (
51+
<tr>
52+
<td>
53+
<div {...me.getNodeProps()}>
54+
{me.renderIndentIcons()}
55+
{
56+
node.loading ?
57+
me.renderLoadingIcon() :
58+
showExpanderIcon ?
59+
me.renderExpanderIcon() :
60+
null
61+
}
62+
{showIcon ? me.renderIcon() : null}
63+
{checkable ? me.renderCheckbox() : null}
64+
{me.renderLabel()}
65+
{me.renderExtIcons()}
66+
</div>
67+
</td>
68+
<td align="center">{node.id}</td>
69+
<td align="center">{node.relativeDepth}</td>
70+
<td align="center">{node.leaf ? '叶子' : '父级'}</td>
71+
</tr>
72+
);
73+
}
74+
75+
render() {
76+
return (
77+
<table className="table-tree" borderspacing="0">
78+
<thead>
79+
<tr>
80+
<th>名称</th>
81+
<th width={100} align="center">ID</th>
82+
<th width={100} align="center">层级</th>
83+
<th width={100} align="center">类型</th>
84+
</tr>
85+
</thead>
86+
<NilTree
87+
onNodeClick={this.toggleExpand}
88+
loadData={this.loadData}
89+
rootComponent="tbody"
90+
loadingComponent={(props) => (
91+
<tr>
92+
<td colSpan={4} {...props}></td>
93+
</tr>
94+
)}
95+
renderNode={this.renderNodeRow}
96+
/>
97+
</table>
98+
);
99+
}
100+
101+
}

‎examples/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
88
<style type="text/css">
99
.demo {
10-
width: 600px;
10+
width: 800px;
1111
height: 450px;
1212
margin: 100px auto;
1313
background: #FFF;

‎examples/src/style/index.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,15 @@
2424
padding: 10px;
2525

2626
flex: 1;
27+
}
28+
29+
.table-tree {
30+
border-collapse:collapse;
31+
32+
tbody tr:hover {
33+
background-color: #efefef;
34+
}
35+
td {
36+
border-bottom:1px solid #F2F2F2;
37+
}
2738
}

‎lib/ChildNodesWrapper.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ var _react = _interopRequireWildcard(require("react"));
2626

2727
var _propTypes = _interopRequireDefault(require("prop-types"));
2828

29+
var _utils = require("./utils");
30+
2931
var ChildNodesContainer =
3032
/*#__PURE__*/
3133
function (_Component) {
@@ -42,15 +44,23 @@ function (_Component) {
4244
var _this$props = this.props,
4345
expanded = _this$props.expanded,
4446
children = _this$props.children;
45-
return expanded ? _react.default.createElement(_react.Fragment, null, children()) : null;
47+
if (!expanded) return null;
48+
var results = children();
49+
50+
if ((0, _utils.isPromiseLike)(results)) {
51+
return null;
52+
}
53+
54+
return _react.default.createElement(_react.Fragment, null, results);
4655
}
4756
}]);
4857
return ChildNodesContainer;
4958
}(_react.Component);
5059

5160
exports.default = ChildNodesContainer;
5261
(0, _defineProperty2.default)(ChildNodesContainer, "propTypes", {
53-
expanded: _propTypes.default.bool
62+
expanded: _propTypes.default.bool,
63+
node: _propTypes.default.object
5464
});
5565
(0, _defineProperty2.default)(ChildNodesContainer, "defaultProps", {
5666
expanded: false

‎lib/NodeItem.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,8 +230,9 @@ function (_Component) {
230230
node = _this$props9.node,
231231
parentProps = _this$props9.parentProps;
232232
var showIcon = parentProps.showIcon,
233+
showExpanderIcon = parentProps.showExpanderIcon,
233234
checkable = parentProps.checkable;
234-
return _react.default.createElement("div", this.getNodeProps(), _react.default.createElement(_react.Fragment, null, this.renderIndentIcons(), (0, _utils.isLoading)(node) ? this.renderLoadingIcon() : this.renderExpanderIcon(), showIcon ? this.renderIcon() : null, checkable ? this.renderCheckbox() : null, this.renderLabel(), this.renderExtIcons()));
235+
return _react.default.createElement("div", this.getNodeProps(), _react.default.createElement(_react.Fragment, null, this.renderIndentIcons(), (0, _utils.isLoading)(node) ? this.renderLoadingIcon() : showExpanderIcon ? this.renderExpanderIcon() : null, showIcon ? this.renderIcon() : null, checkable ? this.renderCheckbox() : null, this.renderLabel(), this.renderExtIcons()));
235236
}
236237
}, {
237238
key: "render",

‎lib/Tree.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,11 @@ exports.default = Tree;
123123
prefixCls: 'nil-tree',
124124
className: '',
125125
rootId: null,
126-
loadingText: 'Loading...',
126+
loadingLabel: 'Loading...',
127+
loadingComponent: 'div',
127128
loadData: null,
128129
showIcon: true,
130+
showExpanderIcon: true,
129131
checkable: false,
130132
maxDepth: 50,
131133
//最大层级50

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /