今天在做个项目时,需要自定义树形栏目 并在树形栏目上做一些事件   这里我就写写梯归树形目录的大概方法

效果

JQ递归循环实现树形目录_d3

data数据结构

JQ递归循环实现树形目录_其他_02

//我的递归方法,HTML是我现在效果的HTML
function forAccess(data){
    var str="<div>";
    for(var i=0;i<data.length;i++){
       var leftPx = data[i].level*12;
       if(data[i].level == 1){
           cl = 'this';
       }else{
           cl = '';
       }
       str += '<div class="tree_content con_'+data[i].level+'"><div class="tree_name '+cl+' padding10" data="'+data[i].id+'">';
       str += '<img data="'+data[i].id+'" style="margin-left:'+leftPx+'px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0OTlCOUZDRERCMjExRTg4MjVEQ0RGOThFMUY2OTEyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0OTlCOUZERERCMjExRTg4MjVEQ0RGOThFMUY2OTEyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTQ5OUI5RkFEREIyMTFFODgyNURDREY5OEUxRjY5MTIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQ5OUI5RkJEREIyMTFFODgyNURDREY5OEUxRjY5MTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5iPiS9AAAAY0lEQVR42mI8c+aMLQMDw0IgVmQgHdwH4jgmIDEHiNOBmJEMDNI3lxHokv9QAXLBfyYGKoBRQzABC7bQJkIfIyFDGEdjZxAZcguIXcjUD9J3CxTFKUC8CIgVyDDkARDHAgQYANTlEN4TaBTMAAAAAElFTkSuQmCC" class="node-img">'+data[i].name;
       str += '<div class="btn"><i class="layui-icon layui-icon-addition add"></i><i class="layui-icon layui-icon-edit edit"></i><i class="layui-icon layui-icon-close del"></i></div></div>';
        //在这里判断child是否存在
        if(data[i].list&&data[i].list.length>0){
            str+=forAccess(data[i].list);
        }
        str+="</div>";
    }
    str+="</div>";
    return str;//这里返回拼接的字符串
}

//使用
var htm = forAccess(data)
$(".treeitem").html(htm);