码迷,mamicode.com
首页 > Web开发 > 详细

js递归树结构

时间:2019-05-16 09:35:35      阅读:646      评论:0      收藏:0      [点我收藏+]

标签:on()   aaaaa   image   callee   函数   结果   title   alt   prot   

 

数据格式:

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递归树结构

标签:on()   aaaaa   image   callee   函数   结果   title   alt   prot   

原文地址:https://www.cnblogs.com/java-llp/p/10873539.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!