我需要使用 CSV 文件来创建网页菜单结构。
任何人都可以帮助我使用给定的CSV结构在Jacascript中创建嵌套菜单吗？
这些列是：级别、菜单名称、URL
0;"Service";
1;"Service 1";"http://some-url-1.com"
1;"Service 2";"http://some-url-2.com"
0;"Sales";
1;"Sales 1";"http://some-url-3.com"
1;"Sales 2";"http://some-url-4.com"
1;"Sales 3";
2;"Sales 3 Sub 1";"http://some-ulr-5.com";
0;"Development";"http://some-url-6.com"
0;"Internet";
1;"Internet 1";
2;"Internet 1 Sub 1";"http://some-url-7.com";
第一列显示菜单级别。 0- 根级别 1-第一级 2-第二级
此外，菜单项的顺序应与CSV文件中给出的顺序完全相同。
您可以使用此代码，这适用于 3 个以上的级别。我注释掉了 ajax 调用并将您的 csv 数据转换为字符串进行测试，因为 SO 编辑器不会获取 csv 文件，您可以使用 ajax 并在您的项目中获取 csv 内容。
注意：我假设菜单项的级别/深度增加一个，但可以减少多个。
$(function () {
var data_str = '0;"Service";n1;"Service 1";"http://some-url-1.com"n1;"Service 2";"http://some-url-2.com"n0;"Sales";n1;"Sales 1";"http://some-url-3.com"n1;"Sales 2";"http://some-url-4.com"n1;"Sales 3";n2;"Sales 3 Sub 1";"http://some-ulr-5.com";n3;"Sales 3 Sub 1 Sub 1";"http://some-ulr-5.com";n4;"Sales 3 Sub 1 Sub 1 Sub 1";"http://some-ulr-5.com";n0;"Development";"http://some-url-6.com"n0;"Internet";n1;"Internet 1";n2;"Internet 1 Sub 1";"http://some-url-7.com";';
CreateMenu();
function CreateMenu() {
var lines = data_str.replace(/"/g, '').split(/rn|n/);
var menu_html = '';
var levels = [];
for (var i = 0; i < lines.length; i++) {
var menu_item = lines[i].split(';')
levels.push(parseInt(menu_item[0]));
}
var parent = -1;
for (var i = 0; i < lines.length; i++) {
var menu_item = lines[i].split(';')
var link = "";
if (levels[i] == 0) {
link = menu_item[1];
}
else {
link = '<a href="' + menu_item[2] + '"> ' + menu_item[1] + '</a>';
}
if (levels[i] < parent) {
var prefix = '</ul></li><li>';
for (var j = 1; j < parent - levels[i]; j++) {
prefix = '</ul></li>' + prefix;
}
menu_html += prefix + link
}
if (levels[i] == parent) {
menu_html += '</li><li>' + link
}
if (levels[i] > parent) {
menu_html += '<ul><li>' + link
}
parent = levels[i];
}
$(menu_html).appendTo($('#menu_parent'));
}
//$.ajax({
// type: "GET",
// url: "data.csv",
// dataType: "text",
// success: function (data) {
// data_str = data;
// CreateMenu();
// }
//});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu_parent"></div>您可以使用 JQuery 库来构建自定义菜单。此外，您可以根据元素的类或属性调整自定义 css。这是您的案例的示例菜单。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
var strcsv = '0; "Service";rn1; "Service 1"; "http://some-url-1.com"rn1; "Service 2"; "http://some-url-2.com"rn0; "Sales";rn1; "Sales 1"; "http://some-url-3.com"rn1; "Sales 2"; "http://some-url-4.com"rn1; "Sales 3";rn2; "Sales 3 Sub 1"; "http://some-ulr-5.com";rn0; "Development"; "http://some-url-6.com"rn0; "Internet";rn1; "Internet 1";rn2; "Internet 1 Sub 1"; "http://some-url-7.com";';
function CreateMenu(csvString, dvpanel) {
var items = csvString.split(/rn|n|r/);
for (var i = 0; i < items.length; i++) {
var spliteditem = items[i].split(/;/);
var lvl = spliteditem[0];
var title = spliteditem[1];
var url = (spliteditem.length < 3) ? null : spliteditem[2];
var $holderdv;
if (lvl == "0") $holderdv = $(dvpanel);
else {
$holderdv = $(dvpanel).find("div[menuitem-level='" + (lvl - 1) + "']").filter(function () { return $(this).attr("menuitem-index") < i; }).last();
}
$holderdv
.append($("<div menuitem-level='" + lvl + "' menuitem-index='" + i + "'>")
.append($("<a href='" + (url == null ? "#" : url) + "'>")
.append($("<span>")
.html(title))))
}
}
$(function () { CreateMenu(strcsv, $("#MenuPanel")); });
</script>
<style>
div[menuitem-level='0'] {
margin: 5px;
background-color: #eaeaea;
}
div[menuitem-level='1'] {
margin: 20px;
background-color: #d1d1d1;
}
div[menuitem-level='2'] {
margin: 30px;
background-color: #a5a5a5;
}
</style>
</head>
<body>
<div id="MenuPanel"></div>
</body>
</html>
你可以考虑使用SlickGrid。它非常易于使用，并且在性能方面也很棒。另外，您的案例，您可以创建一个树状结构，您可以轻松折叠/展开/过滤。查看此示例。