增加示例
This commit is contained in:
parent
b201beba7c
commit
e82f2d9cd8
|
@ -5,7 +5,11 @@
|
|||
/* Navlayout */
|
||||
.u-checkbox {
|
||||
display: inline-block;
|
||||
position: relative; }
|
||||
position: relative;
|
||||
margin: 0 5px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 14px; }
|
||||
.u-checkbox.disabled .u-checkbox-label {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5; }
|
||||
|
@ -44,7 +48,7 @@
|
|||
width: 18px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
position: absolute; }
|
||||
.u-checkbox .u-checkbox-label:after {
|
||||
|
@ -54,7 +58,7 @@
|
|||
width: 18px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
position: absolute; }
|
||||
|
||||
|
|
|
@ -278,7 +278,7 @@ var TreeNode = function (_React$Component) {
|
|||
});
|
||||
}
|
||||
//如果props.children的长度大于0才可以生成子对象
|
||||
if (children && (children.type === TreeNode || allTreeNode)) {
|
||||
if (children && children.length > 0 && (children.type === TreeNode || allTreeNode)) {
|
||||
var _cls;
|
||||
|
||||
var cls = (_cls = {}, _defineProperty(_cls, props.prefixCls + '-child-tree', true), _defineProperty(_cls, props.prefixCls + '-child-tree-open', props.expanded), _cls);
|
||||
|
|
|
@ -0,0 +1,85 @@
|
|||
/**
|
||||
*
|
||||
* @title Tree基本使用示例
|
||||
* @description 如何获取选中对象自定义对象和数据
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import Tree from '../../src';
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
const defaultProps = {
|
||||
keys: ['0-0-0', '0-0-1']
|
||||
}
|
||||
class Demo10 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const keys = this.props.keys;
|
||||
this.state = {
|
||||
defaultExpandedKeys: keys,
|
||||
defaultSelectedKeys: keys,
|
||||
defaultCheckedKeys:keys
|
||||
// checkedKeys: {checked:keys},
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 获取当前选中行的item对象。
|
||||
* @param {*} value
|
||||
*/
|
||||
onSelect(selectedKeys, e) {
|
||||
console.log(`${selectedKeys} selected`);//获取key
|
||||
let currentObject = {};
|
||||
currentObject.title = e.node.props.title; //获取选中对象的数据
|
||||
currentObject.key = e.node.props.eventKey;
|
||||
console.log(currentObject);
|
||||
}
|
||||
onCheck = (checkedKeys) => {
|
||||
let self = this;
|
||||
console.log('onCheck', checkedKeys);
|
||||
const cks = {
|
||||
checked: checkedKeys.checked || checkedKeys,
|
||||
};
|
||||
// this.setState({checkedKeys:cks});
|
||||
}
|
||||
|
||||
onDoubleClick=(key,treeNode)=>{
|
||||
console.log('---onDblClick---'+key+'--treeNode--'+treeNode);
|
||||
}
|
||||
render() {
|
||||
|
||||
return (
|
||||
<Tree className="myCls" showLine checkable
|
||||
defaultExpandedKeys={this.state.defaultExpandedKeys}
|
||||
defaultSelectedKeys={this.state.defaultSelectedKeys}
|
||||
defaultCheckedKeys = {this.state.defaultCheckedKeys}
|
||||
checkStrictly
|
||||
onSelect={this.onSelect} onCheck={this.onCheck}
|
||||
onDoubleClick={this.onDoubleClick}
|
||||
>
|
||||
<TreeNode title="parent 1" key="0-0" >
|
||||
<TreeNode title="parent 1-0" key="0-0-0" disabled>
|
||||
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
|
||||
<TreeNode title="leaf" key="0-0-0-1" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-1" key="0-0-1">
|
||||
<TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-2" key="0-0-2" >
|
||||
<TreeNode title="leaf" key="0-0-2-0" />
|
||||
<TreeNode title="leaf" key="0-0-2-1" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</Tree>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Demo10.defaultProps = defaultProps;
|
||||
|
||||
|
||||
export default Demo10;
|
File diff suppressed because one or more lines are too long
|
@ -5208,7 +5208,11 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
|||
/* Navlayout */
|
||||
.u-checkbox {
|
||||
display: inline-block;
|
||||
position: relative; }
|
||||
position: relative;
|
||||
margin: 0 5px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 14px; }
|
||||
.u-checkbox.disabled .u-checkbox-label {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5; }
|
||||
|
@ -5240,7 +5244,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
|||
width: 18px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
position: absolute; }
|
||||
.u-checkbox .u-checkbox-label:after {
|
||||
|
@ -5250,7 +5254,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
|||
width: 18px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
position: absolute; }
|
||||
|
||||
|
@ -6536,6 +6540,8 @@ input.u-button[type="submit"] {
|
|||
.u-form-control:focus {
|
||||
border-color: #66afe9;
|
||||
outline: 0; }
|
||||
.u-form-control::-ms-clear, .u-form-control ::-ms-reveal {
|
||||
display: none; }
|
||||
|
||||
.u-form-control[disabled] {
|
||||
background: #eee;
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,7 +1,5 @@
|
|||
# Tree
|
||||
|
||||
## 代码演示
|
||||
|
||||
## API
|
||||
|
||||
## Tree
|
||||
|
|
Loading…
Reference in New Issue