使用json和javascript创建文件夹树

我正在用JSON和javascript创建一个简单的文件夹树。我试图将菜单分为两列，一列带有文件夹图标，如果名称大于元素的宽度（word wrap），则名称将自动换行，另一列带有选项图标，该图标基于第一列垂直对齐

我尝试使用

，但如果我将边距向左或填充放在子文件夹中，则第二列未正确对齐

如本例所示：

var folders_array=[{“idPadre”：““miembras”：““nombre”：“rubera sin titulo”，“idrubea”：5}，{“idPadre”：5，“nombre”：“rubela sin titulo”，“idrubea”：6，“miembras”：“}，{“idPadre”：““miembras”：“，“nombre”：“rubera sin titulo”，“idrubela”：“idrubela”；“idpadro”：“7}，{“idpadrea"地毯罪","伊德地毯":9,"密姆布罗斯":；
$（文档）.ready（函数（）{
显示文件夹（创建文件夹层次结构（文件夹数组），$（'.folder list'）；
});
函数显示\u文件夹（层次结构\u数组，$element）{
层次结构\数组.forEach（函数（对象）{
让parentID=object.idPadre；
让文件夹_name=object.nombre；
让children=object.children；
设folderID=object.ida；
如果（父ID）{
parentID=object.idPadre；
}否则{
parentID=未定义；
}
var$li=$（'
\
\
“+文件夹名称+”\
\
\
(),；
$element.append（$li）；
if（儿童）{
var$ul=$（“
”）；
$li.附加（$ul）；
显示文件夹（子文件夹，$ul）；
}
});
$（“.f”）。在（单击）上，函数（e）{
打开_folder=this.className.split（“”[0]。拆分（“文件夹”）[1]；
});
};
函数创建\u层次结构（文件夹\u数组）{
var parent=[]，children={}；
//查找顶级节点并基于父节点散列子节点
文件夹\u数组.forEach（函数（对象）{
设obj=object，
parentID=obj.idPadre，
target=！parentID？parent:（children[parentID]| |（children[parentID]=[]）；
目标推送（obj）；
});
//函数递归地构建树
var find_children=函数（父函数）{
if（子项[parent.ida]）{
parent.children=children[parent.ida]；
parent.children.forEach（函数（对象）{
查找子对象（对象）；
});
}
}
parent.forEach（函数（对象）{
查找子对象（对象）；
});
返回父母；
}；

.文件夹列表{
光标：指针；
}
.文件夹列表李{
边界：未设置；
用户选择：无；
列表样式：无；
}

为什么要在一个对象值中使用两种数据类型？idPadre可以同时使用字符串作为数字。你自己做的太难了，无法实现它的实际功能。jquery没有任何帮助。只需使用模板文本。我做了一些清理，其余的由你决定：@JensIngels谢谢，我以前从未使用过模板文本，但它比至少我在做。