Javascript 如何使用angular2树插件获取选中的树结构值
在这里,我使用json和angular2-tree组件生成一个动态树结构,直到一切都好了,我无法生成选择事件广告,当我们选择事件时,如果有孩子,则必须选择特定名称作为对象,我尝试了此URL,并且在文档中,我也没有找到获取所选值的任何方法,因此请就此向我提出建议 下面是我的代码Javascript 如何使用angular2树插件获取选中的树结构值,javascript,angular,typescript,Javascript,Angular,Typescript,在这里,我使用json和angular2-tree组件生成一个动态树结构,直到一切都好了,我无法生成选择事件广告,当我们选择事件时,如果有孩子,则必须选择特定名称作为对象,我尝试了此URL,并且在文档中,我也没有找到获取所选值的任何方法,因此请就此向我提出建议 下面是我的代码 选项={ useCheckbox:true }; 节点; 数据={ “信息”:{ “笔记本电脑”:{ }, “配置”:{ “财产”:{ “ram”:{ }, “处理器”:{ }, “硬盘驱动器”:{ } } }, “链接
选项={
useCheckbox:true
};
节点;
数据={
“信息”:{
“笔记本电脑”:{
},
“配置”:{
“财产”:{
“ram”:{
},
“处理器”:{
},
“硬盘驱动器”:{
}
}
},
“链接”:{
},
“姓名”:{
},
“公司”:{
“财产”:{
“模型”:{
},
“制造者”:{
“类型”:“整数”
},
“国家”:{
“类型”:“文本”
},
“企业”:{
}
}
}
}
};
检查(){
const results=Object.keys(this.data.info).map(k=>({
姓名:k,,
子项:this.data.info[k].properties
?Object.keys(this.data.info[k].properties).map(kk=>({name:kk}))
: []
}));
this.nodes=结果;
}
.html代码
点击
透明过滤器
stackblitz链接
我不知道是否有更好的方法可以使用tree.treeModel.selectedLeafNodeId访问所选节点。在选择或不选择支票之前,您必须 见 例如,如果你有一个按钮
<!--I like pass as argument the property "treeModel" of #tree ("reference variable")-->
<button (click)="click(tree.treeModel)">sendData</button>
<tree-root #tree [focused]="true" [options]="options" [nodes]="nodes"></tree-root>
注意:我分叉了
已更新使用响应创建对象
click(tree: TreeModel) {
console.log(tree.activeNodes);
let result: any = {} //<--declare a variable
Object.keys(tree.selectedLeafNodeIds).forEach(x => {
let node: TreeNode = tree.getNodeById(x);
if (node.isSelected) {
console.log("Selected:", node.data.name,
"Parent:", node.parent.data.name);
if (node.parent.data.name) //if the node has parent
{
if (!result[node.parent.data.name]) //If the parent is not in the object
result[node.parent.data.name] = {} //create
result[node.parent.data.name][node.data.name] = true;
}
else {
if (!result[node.data.name]) //If the node is not in the object
result[node.data.name] = {} //create
}
}
})
console.log(result);
}
单击(树:树模型){
log(tree.activeNodes);
let result:any={}//{
let节点:TreeNode=tree.getNodeById(x);
if(node.isSelected){
console.log(“所选:”,node.data.name,
“父节点:”,节点.父节点.数据.名称);
if(node.parent.data.name)//如果节点有父节点
{
if(!result[node.parent.data.name])//如果父对象不在对象中
结果[node.parent.data.name]={}//create
结果[node.parent.data.name][node.data.name]=true;
}
否则{
if(!result[node.data.name])//如果节点不在对象中
结果[node.data.name]={}//create
}
}
})
控制台日志(结果);
}
我无法获得接受的答案,我的树。getNodeById(x)将始终返回null
所以我使用了动作映射:
将IActionMapping添加到树组件
actionMapping: IActionMapping = {
// ...
checkboxClick: (tree, node) => {
node.data.checked = !node.data.checked;
this.setCheckedNodes(node.id, node.data.checked);
}
}
在服务中存储值的方法:
private setCheckedNodes(id: string, checked: boolean) {
if (!this.treeService.selectedIds) {
this.treeService.selectedIds = new Array<[string, boolean]>();
}
const checkedNode = this.treeService.selectedIds.find(cn => cn[0] === id);
if (checkedNode) {
if (checkedNode[1] !== checked) {
checkedNode[1] = checked;
this.treeService.selectedIds[id] = checkedNode;
}
} else {
this.treeService.selectedIds.push([id, checked]);
}
}
private setCheckedNodes(id:string,checked:boolean){
如果(!this.treeseservice.selectedIds){
this.treeseservice.selectedIds=new Array();
}
const checkedNode=this.treeseservice.selectedIds.find(cn=>cn[0]==id);
如果(选中节点){
如果(选中节点[1]!==选中){
checkedNode[1]=已选中;
this.treeService.selectedIds[id]=checkedNode;
}
}否则{
this.treeService.selectedDS.push([id,选中]);
}
}
然后在某些select事件上获取或发出存储在服务中的值:
export class treeService {
// ...
public selectedIds: Array<[string, boolean]>;
}
导出类treeService{
// ...
公共选择的EDID:数组;
}
可能要在以后清除它们我们能否将选定的响应作为单个对象检查我的堆栈我认为当子对象不存在时会出现问题然后父对象的名称会出现在子对象中我不知道您的单个对象将如何。我更新了我的答案,让大家知道这是我在寻找的最后一个小疑问,在得到了父对象之后,它可以像笔记本电脑、config.ram、config.processor等那样制作吗?如果你想要一个字符串数组,它会更容易:如果有父对象,则按node.parent.data.name+“+node.data.name,else push node.data.name我需要您在树中的帮助,因为它有一些问题。问题是,当你推一个数据时,如果你推一个数据,它会给我一个错误
export class treeService {
// ...
public selectedIds: Array<[string, boolean]>;
}