树 Tree
1.说明
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
2.API
| 属性名称 | 数据类型 | 是否必填 | 默认值 | 回传参数 | 说明 |
|---|---|---|---|---|---|
| name | string | 是 | null | 空 | 表单字段名称 |
| value | number,string | 否 | "" | 空 | 默认值 |
| text | number,string | 否 | "" | 空 | 默认文本值 |
| valueField | string | 否 | value | 空 | 数据字段值名称 |
| textField | string | 否 | text | 空 | 数据字段文本名称 |
| url | string | 否 | null | 空 | ajax的后台地址,暂时不支持子节点异步功能，等待开放 |
| params | string | 否 | null | 空 | 查询参数 |
| dataSource | string | 否 | data | 空 | ajax的返回的数据源中哪个属性作为数据源,为null时直接后台返回的数据作为数据源 |
| data | array | 否 | data | 空 | 节点数据NodeModel |
| onSelect | string | 否 | 关闭 | value,text,name,rowData(这一行所有字段) | 选中事件 |
2.代码演示
/**
* Created by ALOG on 17/6/5.
*/
let React =require( "react");
let ReactDOM=require("react-dom");
let wasabi=require("wasabiD");
let Tree=wasabi.Tree;
class Demo extends React.Component {
render(){
var data=[
{value:1,text:"节点1",open:true,data:[{value:11,text:"节点11",isParent:false},{value:12,text:"节点12"},{value:13,text:"节点13"}]},
{value:2,text:"节点2",data:[{value:21,text:"节点21"},{value:22,text:"节点22"},{value:23,text:"节点23"}]},
{value:3,text:"节点3",isParent:true},
{value:4,text:"节点4"},
{value:5,text:"节点5"},
{value:6,text:"节点6"},
{value:7,text:"节点7"},
{value:8,text:"节点8"},
{value:9,text:"节点9"},
{value:10,text:"节点10"},
]
return (
<Tree data={data} ></Tree>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById("root"));