js递归树结构

Posted java-llp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js递归树结构相关的知识,希望对你有一定的参考价值。

 

数据格式:

var data = [
  {title: "11111",childs : [
    {title:"aaaaa", childs:[
      {title: "xg"}
    ]},
    {title:"bbbbb"}
    ]
  },
  {title: "22222",childs : [
    {title:"aaaaa"},
    {title:"bbbbb"}
    ]
  }
];

递归函数:

function menu(data){
  var ul = "<ul>";
  for(var i = 0; i < data.length; i++){
    ul+="<li><a>"+data[i].title+"</a>";
    if(data[i].childs){ul+=argument.callee(data[i].childs);}
    ul+="</li>";
  };
  ul+="</ul>";
  return ul;
}

调用:

var menu = menu(data);

结果:技术图片

也可以做成jq插件

var Menu = function(el,opt){
  this.el = el;
  //this.default = {},       // 插件默认参数,在这里不需要
  this.opt = opt;
  // this.opt = $.extend({},this.default,opt);     // 插件默认参数和传参合并,在这里不需要
};
Menu.prototype = {
  init: function(){
    var opt = this.opt;
    var ul = this.create(opt);
    this.el.append(ul);
},
create: function(opt){
  var ul = ‘<ul>‘;
  for(var i = 0; i < opt.length; i++){
    ul += ‘<li>‘+opt[i].title;
    if(opt[i].childred && opt[i].children != ‘undefined‘){
      ul += arguments.callee(opt[i].childred)
    }
    ul += ‘</li>‘;
  };
  ul += ‘</ul>‘;
  return ul;
}
}
$.fn.menu = function(opt){

  // 这里的this是指$(select);
  var menu = new Menu(this, opt);
  return menu.init();
}

调用: $(select).menu(data);

以上是关于js递归树结构的主要内容,如果未能解决你的问题,请参考以下文章

数据结构_3

数据结构二分搜索树详解

java代码递归部门结构树

图解数据结构树和二叉树全面总结

二叉树(非递归)四种遍历

在Delphi中,使用TreeView创建结构树,何种方法最好?