antd design 树的动态新增 修改 删除
- antd deisgn tree 动态新增功能:
{this.renderTreeNodes(this.state.treeData,this.state.delData,this.state.dataFlag)}
//选中节点时触发
onSelect = (selectedKeys, info) => {
if(info.node.props.dataRef.ceResClass===1)
{
this.setState({
userId:info.node.props.dataRef.key,
ceResClass:info.node.props.dataRef.ceResClass,
energyClass:'',
selectedKeys,
//partId:'',
// cntrId:'',
// deviceId:'',
// energyId:'',
treeNode:info, ---->点击选中之后 获取到当前节点的数据 保存到 state里面
},()=>{
// this.getUserDetailInfoById(info.node.props.dataRef.key);
//this.getLowerClass(info.node.props.dataRef.ceResClass,"CE_CUST");
})
}
}
//加载树
onLoadData = treeNode => new Promise((resolve) => {
console.log("treeNode",treeNode)
if(treeNode.props.dataRef.ceResClass===5)
{
resolve();
return;
}
reqwest({
url: '/xxxx/xxxx/recesInfo',
method: 'GET',
credentials: 'include',
data: {
id: treeNode.props.dataRef.key,
ceResClass: treeNode.props.dataRef.ceResClass
}
}).then((data) => {
var ds = eval('(' + data + ')');
this.setState({
treeData1: ds[0].result,
}, () => {
console.log("ttreeData321ggg", this.state.treeData1)
})
})
// console.log("ttreeData321",this.state.treeData)
//
setTimeout(() => {
console.log("ttreeData321",treeNode)
treeNode.props.dataRef.children = this.state.treeData1
//treeNode.isLeaf=false;
//console.log("treeNode.props.dataRef.children",treeNode.props.dataRef.children)
if(treeNode.props.dataRef.ceResClass===1){
this.setState({
treeData: [...this.state.treeData],
userId: treeNode.props.dataRef.key
},()=>{
console.log("treeData",this.state.treeData)
});
}else if(treeNode.props.dataRef.ceResClass===2){
this.setState({
treeData: [...this.state.treeData],
partId:treeNode.props.dataRef.key
},()=>{
console.log("treeData",this.state.partId)
});
}else if(treeNode.props.dataRef.ceResClass===3){
console.log("treeNode3")
this.setState({
treeData: [...this.state.treeData],
cntrId: treeNode.props.dataRef.key
},()=>{
console.log("treeNode3",this.state.treeData)
});
}else if(treeNode.props.dataRef.ceResClass===4){
this.setState({
treeData: [...this.state.treeData],
deviceId: treeNode.props.dataRef.key
});
}else if(treeNode.props.dataRef.ceResClass===0){
this.setState({
treeData: [...this.state.treeData],
});
}
resolve();
}, 1000);
//渲染树节点调用
renderTreeNodes =(data,delData,dataFlag)=>data.map((item,i) => {
// console.log("renderTree",item)
console.log('树形菜单数据源567', delData);
console.log('树形菜单数据源', i);
console.log('树形菜单数据源98', item.key);
if(delData!=="0") {
if (dataFlag === "1") { ---》说明是删除
//如果循环的节点数据中有跟你传过来要删的数据delData.key相同的 那就将这条数据丛树节点删掉
if (item.key === delData.key) {
console.log("sadas", delData);
data.splice(i, 1); ----->数组删除方法
this.setState({
delData: '0',
dataFlag:'0'
})
///console.log("sadas",delData.key);
console.log('树形菜单数据源13', i);
}
} else if (dataFlag === "2") { -----》说明是修改
if (item.key === delData.key) {
//如果循环的树节点数据中有跟你传过来要修改的数据delData.key相同的 那就将这条数据的title 变成你修改的title
console.log("data[i].title", data[i].title)
item.title = delData.title;
data[i].title = delData.title;
this.setState({
delData: '0',
dataFlag:'0'
})
}
}
}
if (!item.children) {
// console.log("no")
return (
)
} else {
console.log("yes")
return (
{this.renderTreeNodes(item.children,this.state.delData,this.state.dataFlag)}
);
}
return 以上的代码希望能够帮到你 江湖路远，不懂留言！