Question

我需要使用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文件中给出的顺序相同。

Answer 1

您可以使用此代码，该代码可用于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(/\r\n|\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>

Answer 2

您可以考虑为此使用SlickGrid。它非常易于使用，性能出色。另外，根据您的情况，您可以创建一个树状结构，可以轻松折叠/展开/过滤。检出this sample。

Answer 3

您可以使用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";\r\n1; "Service 1"; "http://some-url-1.com"\r\n1; "Service 2"; "http://some-url-2.com"\r\n0; "Sales";\r\n1; "Sales 1"; "http://some-url-3.com"\r\n1; "Sales 2"; "http://some-url-4.com"\r\n1; "Sales 3";\r\n2; "Sales 3 Sub 1"; "http://some-ulr-5.com";\r\n0; "Development"; "http://some-url-6.com"\r\n0; "Internet";\r\n1; "Internet 1";\r\n2; "Internet 1 Sub 1"; "http://some-url-7.com";';
        function CreateMenu(csvString, dvpanel) {
            var items = csvString.split(/\r\n|\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>

如何使用CSV文件内容创建嵌套菜单

3 个答案: