angular+NG-ZORRO如何实现树的操作(展示、选中传输给后台)
前言：今天做一个树形结构的展示，从后台取来数据进行展示，再从前台选取传给后台的一个操作。应用的技术是angular、NG-ZORRO
效果如下图：(两个量表类型) 后台需要提供的字段有tenantId、normalFormIds、scaleIds
分别是当前选中的表格中的id、范式的选中id不包括类型也就是一级标题、量表选中的id同理不包括一级类型的id
html页面
[nzData]="treeNodes" nzCheckable nzMultiple [nzCheckedKeys]="defaultCheckedKeys" [nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]="defaultSelectedKeys" >
[nzData]="scaleTreeNode" #scaleComponent nzCheckable nzMultiple >
{ {l("Cancel")}}
{ {l("Save")}}
ts的文件：
constructor(injector: Injector,
private notmalFormTypeService: NormalFormTypeServiceProxy,
private saleTypeService: ScaleTypeServiceProxy,
private notmalFormService: NormalFormServiceProxy,
private scaleService: ScaleServiceProxy,
) {
}
初始化内容
ngOnInit() {
//初始化范式
this.notmalFormTypeService.getAllNormalFormTypes().subscribe(types => {
this.notmalFormService.getNormalForms().subscribe(normalForms => {
types.forEach(type => {
console.log(type,11111111)
var node = {};
node["title"] = type.typeName;
node["key"] = type.id;
node["children"] = [];
node["expanded"] = true;
if (normalForms[type.id]) {
normalForms[type.id].forEach(normalForm => {
var item = {};
item["title"] = normalForm.title;
item["key"] = normalForm.id;
item["isLeaf"] = true;
node["children"].push(item);
});
}
this.treeNodes.push(new NzTreeNode({
title : node["title"],
key : node["key"],
children: node["children"],
expanded:node["expanded"]
}));
});
});
});
//初始化量表
this.saleTypeService.getAllScaleTypes().subscribe(types => {
console.log(types, "cyssss")
this.scaleService.getScales().subscribe(scaleForms => {
console.log("shenmeyebuhui",scaleForms)
types.forEach(type => {
var scaleNode = {};
scaleNode['title'] = type.typeName;
scaleNode["key"] = type.id;
scaleNode["children"] = [];
scaleNode["expanded"] = true;
if (scaleForms[type.id]) {
scaleForms[type.id].forEach(normalForm => {
var datas = {};
datas["title"] = normalForm.scaleName;
datas["key"] = normalForm.id;
datas["isLeaf"] = true;
scaleNode["children"].push(datas);
});
}
this.scaleTreeNode.push(new NzTreeNode({
title: scaleNode["title"],
key: scaleNode["key"],
children: scaleNode["children"],
expanded: scaleNode["expanded"]
}));
});
console.log(this.scaleTreeNode)
});
});
}
保存的时候我们还需要进行处理提取出来
implements OnInit {
@ViewChild('normalFormComponent') normalFormComponent: NzTreeComponent;
@ViewChild('scaleComponent') scaleComponent: NzTreeComponent;
}
save(): void {
var scaleCheckNodes = this.scaleComponent.getCheckedNodeList();
var scaleCheckKeys = [];
scaleCheckNodes.forEach(item => {
if (item.level == 0) {
var scaleChildNodes = item.getChildren();
scaleChildNodes.forEach(child => {
if (child.isChecked) {
scaleCheckKeys.push(child.key);
}
});
} else {
scaleCheckKeys.push(item.key)
}
})
var normalFormCheckNodes = this.normalFormComponent.getCheckedNodeList();
var normalFormCheckKeys = [];
normalFormCheckNodes.forEach(element => {
if (element.level == 0) {
var childNodes = element.getChildren();
childNodes.forEach(child => {
if (child.isChecked) {
normalFormCheckKeys.push(child.key);
}
});
} else {
normalFormCheckKeys.push(element.key);
}
});
this.entity.normalFormIds = normalFormCheckKeys;
this.entity.scaleIds = scaleCheckKeys
this.saving = true;
this.tenantService
.authorizationNormalFormAndScale(this.entity)
.finally(() => {
this.saving = false;
})
.subscribe(() => {
this.notify.success(this.l('SavedSuccessfully'));
this.success();
});
}
}
后经改正可以做到修改的时候可以显示当前已经选中过的数据
ngOnInit() {
//初始化
this.tenantService.getAuthorizationByTenantId( this.tenantId ).subscribe(data => {
this.entity = data;
// this.defaultCheckedKeys = data.normalFormIds;
//初始化范式
this.notmalFormTypeService.getAllNormalFormTypes().subscribe(types => {
this.notmalFormService.getNormalForms().subscribe(normalForms => {
types.forEach(type => {
var node = {};
node["title"] = type.typeName;
node["key"] = type.id;
node["children"] = [];
node["expanded"] = true;
node["isChecked"] = false;
node["isHalfChecked"] = false;
if (normalForms[type.id]) {
var normalFormsCount = 0;
normalForms[type.id].forEach(normalForm => {
var item = {};
item["title"] = normalForm.title;
item["key"] = normalForm.id;
item["isLeaf"] = true;
item["checked"] = data.normalFormIds.indexOf(normalForm.id) >= 0 ? true:false;
node["children"].push(item);
if (item["checked"]) {
normalFormsCount++;
}
});
if (normalFormsCount == normalForms[type.id].length) {
node["isChecked"] = true;
}else if (normalFormsCount>0 && normalFormsCount node["isHalfChecked"] = true; } } var mainTreeNode = new NzTreeNode({ title: node["title"], key: node["key"], children: node["children"], expanded: node["expanded"], }); mainTreeNode.setChecked( node["isChecked"], node["isHalfChecked"]) this.treeNodes.push(mainTreeNode); }); }); }); //初始化量表 this.saleTypeService.getAllScaleTypes().subscribe(types => { this.scaleService.getScales().subscribe(scaleForms => { types.forEach(type => { var scaleNode = {}; scaleNode['title'] = type.typeName; scaleNode["key"] = type.id; scaleNode["children"] = []; scaleNode["expanded"] = true; scaleNode["isChecked"] = false; scaleNode["isHalfChecked"] = false; if (scaleForms[type.id]) { var scaleFormsCount = 0; scaleForms[type.id].forEach(normalForm => { var datas = {}; datas["title"] = normalForm.scaleName; datas["key"] = normalForm.id; datas["isLeaf"] = true; datas["checked"] = data.scaleIds.indexOf(normalForm.id) >= 0 ? true:false; scaleNode["children"].push(datas); if (datas["checked"]) { scaleFormsCount++; } }); if (scaleFormsCount == scaleForms[type.id].length) { scaleNode["isChecked"] = true; }else if (scaleFormsCount>0 && scaleFormsCount scaleNode["isHalfChecked"] = true; } } var scaleTreeNode = new NzTreeNode({ title: scaleNode["title"], key: scaleNode["key"], children: scaleNode["children"], expanded: scaleNode["expanded"], }); scaleTreeNode.setChecked(scaleNode["isChecked"], scaleNode["isHalfChecked"]) this.scaleTreeNode.push(scaleTreeNode); }); }); }); }) }