Question

我正在尝试在不使用url（路由提供程序）的情况下创建面包屑，而不使用jQuery。我有一棵这样的树

Humans
Trees
Animals
    Cats
    Lions
    Dogs
       Terrier 
       Bulldog
       Cocker
Cars

我想点击Cocker来显示

动物/狗/可卡犬

所以，我创建了一个递归函数，以便为我点击的每个元素找到父/父，但它无法正常工作。它发现一个元素有一个父元素，它也找到了元素的第一个父元素，但它没有显示第二个父元素。例如，而不是

动物/狗/可卡犬

显示

狗/可卡犬

这是我的功能

var count = 0;
function iterate(obj) {
    for(var key in obj) {
      var elem = obj[key];
      if(key === "children") {
        count++;
      }
      if(typeof elem === "object") {
        if(elem.children === undefined){
          elem.children = 1;
        }
        if(elem.children.length !==1){
          iterate(elem);
          $scope.showTrail = elem.children;
          $scope.elem = elem;
        }
      }
     }
    if($scope.elem === undefined){
      $scope.elem = {};
      $scope.elem.children = {};
      $scope.elem.roleName = {};
    }

    for (var i = 0; i<$scope.elem.children.length; i++) {
       if($scope.elem.children[i].roleName === selNode.roleName) {
          console.log($scope.elem.roleName + " is a parent of " + selNode.roleName);
       }
    }

  }
iterate($scope.treeData);

那就是JSON

     [
          { "roleName" : "Humans", "roleId" : "role2", "children" : [
           { "roleName" : "", "roleId" : "role11", "children" : [] }
          ]},
          { "roleName" : "Trees", "roleId" : "role2", "children" : [
           { "roleName" : "", "roleId" : "role11", "children" : [] }
          ]},
          { "roleName" : "Animals", "roleId" : "role2", "children" : [
            { "roleName" : "Cats", "roleId" : "role11", "children" : [
             { "roleName" : "", "roleId" : "role11", "children" : [] }
            ]},
            { "roleName" : "Lions", "roleId" : "role11", "children" : [
             { "roleName" : "", "roleId" : "role11", "children" : [] }
            ]},
            { "roleName" : "Dogs", "roleId" : "role11", "children" : [
              { "roleName" : "Terrier", "roleId" : "role11", "children" : [
               { "roleName" : "", "roleId" : "role11", "children" : [] }
              ]},
              { "roleName" : "Bulldog", "roleId" : "role11", "children" : [
               { "roleName" : "", "roleId" : "role11", "children" : [] }
              ]},
              { "roleName" : "Cocker", "roleId" : "role11", "children" : [
               { "roleName" : "", "roleId" : "role11", "children" : [] }
              ]},
            ]}
          ]},
          { "roleName" : "Cars", "roleId" : "role2", "children" : [
           { "roleName" : "", "roleId" : "role11", "children" : [] }
          ]}
     ]

任何帮助请，任何想法。非常感谢你。

Answer 1

您正在遍历树，但如果您不保留某些信息，它将无济于事。解决问题的最简单方法是为所有指向其父节点的节点建立索引。

如果roleName在整个树中具有唯一值，则此代码将起作用：

var tree = [
    { "roleName" : "Humans", "roleId" : "role2", "children" : []},
    { "roleName" : "Trees", "roleId" : "role2", "children" : []},
    { "roleName" : "Animals", "roleId" : "role2", "children" : [
        { "roleName" : "Cats", "roleId" : "role11", "children" : []},
        { "roleName" : "Lions", "roleId" : "role11", "children" : []},
        { "roleName" : "Dogs", "roleId" : "role11", "children" : [
            { "roleName" : "Terrier", "roleId" : "role11", "children" : []},
            { "roleName" : "Bulldog", "roleId" : "role11", "children" : []},
            { "roleName" : "Cocker", "roleId" : "role11", "children" : []},
        ]}
    ]},
    { "roleName" : "Cars", "roleId" : "role2", "children" : []}
];

var index = {};

function buildIndex(root, children) {
    for(var i in children) {
        index[children[i].roleName] = root;
        buildIndex(children[i].roleName, children[i].children);
    }
}

buildIndex("Root", tree);

function getPath(leaf) {
    return index[leaf] ? getPath(index[leaf]).concat([leaf]) : [leaf];
}

getPath("Bulldog");// returns ["Root", "Animals", "Dogs", "Bulldog"]

JSFiddle：http://jsfiddle.net/E49Ey/

然而它与Angular无关，除了数据驻留在范围内。如果您有一个根据这些数据构建的DOM树，那么您可以通过上升树从DOM中获取面包屑。

Answer 2

嘿我把一个快速的plunkr放在一起做你正在寻找的...除了它没有反向遍历数据树。

http://embed.plnkr.co/wAJYiAjy58vUEsg4Kr2C

如果你真的希望运行数据树让我知道，我会修改plunkr

Answer 3

您当然可以使用与您在问题中显示的类似的递归函数来解决它。这样的解决方案怎么样：

function getPath(obj, selNode, pathSoFar) {
    if (obj.roleName == selNode.roleName) {
       return pathSoFar + '\\' + obj.roleName;
    }
    else if (obj.children) {
      for (var i=0 ; i<obj.children.length ; i++) {
          var temp = getPath(obj.children[i], selNode, 
                  pathSoFar + '\\' + obj.roleName);
          if (temp != null) {
              return temp;
          }
       }
    }
    return null;
}

getPath(rootObj, selNode, '');

我希望它有助于解释解决方案的想法。

找到每个元素的所有父母

3 个答案: