var Tree = React.createClass({
getDefaultProps: function() {
return {
nodes:[
{id:1,pid:0,text:"頂級節點"},
{id:2,pid:1,text:"一級節點1"},
{id:4,pid:2,text:"1節點下的1"},
{id:5,pid:2,text:"1節點下的2"},
{id:6,pid:3,text:"2頂級節點1"},
{id:3,pid:1,text:"一級節點2"},
]//空
};
},
/**
* 加載樹
* @param pid 父節點id
*/
loadTree:function(pid,level){
//預先保存
var children = new Array();
//別名 nodes
var nodes = this.props.nodes;
var index = -1;
//console.log(nodes);
//遞歸添加孩子
for (var i = 0; i < nodes.length ; i++) {
//尋找本節點的索引
if(nodes[i].id==pid)
{
index=i;
}
//加載孩子
if(nodes[i].pid==pid)
{
children.push(this.loadTree(nodes[i].id,level+1));
}
}
var levelBlank="";
for (level--; level>= 0; level--) {
levelBlank+="-";
}
var thisContent = "";
if(index>=0)
{
thisContent=nodes[index].text;
}
var _self=<div id={"parent"+pid}>
{levelBlank}
{thisContent}
{children.length>0? children:""}
</div>;
return _self;
},
render: function() {
return (
<div id="reactTree">{this.loadTree(1,0)}</div>
);
}
});
ReactDOM.render(
<Tree />,
document.getElementById('example'));
【ReactJS】自制TreeView控件
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.