react插件，樹(shù)狀圖(可自由定義子節(jié)點(diǎn)結(jié)構(gòu)樟结，大小养交，樣式)
如果覺(jué)得看下面的代碼和說(shuō)明還沒(méi)明白，可以直接去github倉(cāng)庫(kù)拉代碼,源碼和說(shuō)明里面都有(https://github.com/jiangji1/react_tree_j)
先上效果圖
效果圖
image
效果圖
image
安裝
安裝 npm install react_tree_j
引入瓢宦，使用
import React from 'react';
import ReactTree from './react_tree_j';
function childLayout (props) {
return <div onClick={ () => { props.click(props.path, props.data) } }>
{props.data.agntname} // 或者隨便寫(xiě)什么 {props.data.name} 或者直接寫(xiě)123碎连，都行
</div>
}
class App extends React.Component {
click = (obj) => {
console.log(obj)
}
render () {
return <ReactTree data={json數(shù)據(jù)} showAll={false} click={this.click} childLayout={childLayout} size={1} />
}
}
/* 說(shuō)明(description)
必傳 1.data是一個(gè)json數(shù)據(jù)
必傳 2.childLayout是react的函數(shù)組件,返回的dom元素是每個(gè)子節(jié)點(diǎn),大小決定樹(shù)狀圖的大小, 接受一個(gè)對(duì)象props(Object類(lèi)型)
props.data 是 每個(gè)子節(jié)點(diǎn)的數(shù)據(jù) Object類(lèi)型
props.tier 是 第幾層級(jí) Number類(lèi)型
props.path 是 屬于父節(jié)點(diǎn)子集的下標(biāo)
props.click 是 function,接受2個(gè)參數(shù)，第1個(gè)參數(shù)把props.path傳入,第2個(gè)參數(shù)把props.data傳入
childLayout具體參考下面的childLayout函數(shù)
非必傳 3.click一個(gè)函數(shù)驮履，接受一個(gè)參數(shù)鱼辙，參數(shù)是點(diǎn)擊每個(gè)子節(jié)點(diǎn)數(shù)據(jù)(是當(dāng)前點(diǎn)擊的節(jié)點(diǎn)的所有屬性)
非必傳 4.showAll是一個(gè)Boolean類(lèi)型(不是非要布爾類(lèi)型,js會(huì)隱式轉(zhuǎn)換),如果是true,把數(shù)據(jù)全部顯示，如果是false或者不傳玫镐，就會(huì)默認(rèn)顯示數(shù)據(jù)最左邊一列, 只要點(diǎn)擊就能切換節(jié)點(diǎn)顯示
非必傳 5.size是一個(gè)Number,如果覺(jué)得每一層dom元素?fù)頂D倒戏，可以傳入數(shù)字進(jìn)行調(diào)節(jié)每一層的間距
*/
childLayout具體參考這里(先看上面的說(shuō)明)
// 每一個(gè)子節(jié)點(diǎn)的結(jié)構(gòu)和樣式(最簡(jiǎn)潔的)
function childLayout (props) {
// 非常重要！非常重要恐似！非常重要杜跷！這里的onClick給dom綁定點(diǎn)擊事件,復(fù)制黏貼就行了，不能改更，只能寫(xiě)成onClick={() => {props.click(props.path, props.data)
return <div onClick={ () => { props.click(props.path, props.data) } }>
{props.data.agntname} // 或者隨便寫(xiě)什么 {props.data.name} 或者直接寫(xiě)123葱椭，都行
</div>
}
// 每一個(gè)子節(jié)點(diǎn)的結(jié)構(gòu)和樣式(src中demo的說(shuō)明)
function childLayout (props) {
console.log(props)
// bgcArr是每一層的圖標(biāo)顏色(就是demo的小圓圈的顏色) props.tier就是為了這里每層使用不同顏色，沒(méi)有其他用處
let bgcArr = ['#0DC0AF', '#FD71AA', '#41A3FC', '#D086EB', '#F8B551']
return <div>
<span>
// 這里style就是為了設(shè)置背景色口四，不重要
<div style={{'--background_color': bgcArr[props.tier % bgcArr.length] || '#fff'}}>
// 非常重要孵运！非常重要！非常重要蔓彩！這里的onClick給dom綁定點(diǎn)擊事件,復(fù)制黏貼就行了治笨，不能改更，只能寫(xiě)成onClick={() => {props.click(props.path, props.data)
<div className='shu_show_name' onClick={() => {
props.click(props.path, props.data)
}} style={{backgroundColor: 'var(--background_color)'}}>
{props.data.agtype}
</div>
<div className="shu_show_all_name">
<div>{props.data.agntname}</div>
</div>
</div>
</span>
</div>
}
最后附上一個(gè)json數(shù)據(jù)
{"agntname":"agntname","agtype":"agtype","child":[{"agntname":"陸某某","agtype":"HD","child":[{"agntname":"崔某某","agtype":"UM","child":[{"agntname":"陸某某","agtype":"HD","child":[{"agntname":"陸某某","agtype":"HD","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS"},{"agntname":"賈某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]},{"agntname":"崔某某","agtype":"SS","child":[{"agntname":"陸某某","agtype":"HD","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"賈某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]},{"agntname":"杜某某","agtype":"SS","child":[{"agntname":"陸某某","agtype":"HD","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"賈某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]}]},{"agntname":"段某某","agtype":"UM","child":[{"agntname":"陸某某","agtype":"HD","child":[{"agntname":"陸某某","agtype":"HD","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"賈某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]},{"agntname":"崔某某","agtype":"SS","child":[{"agntname":"陸某某","agtype":"HD","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"賈某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]},{"agntname":"杜某某","agtype":"SS","child":[{"agntname":"陸某某","agtype":"HD","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"賈某某","agtype":"AS","child":[{"agntname":"陸某某","agtype":"HD"},{"agntname":"鄭鈺","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]}]}]}]}
