时间戳

首页 > 解决方案 > 如何使用 CSV 文件内容创建嵌套菜单

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

问题描述

我需要使用 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 文件中给出的完全一致。

标签： javascriptjqueryreactjs

解决方案

您可以使用此代码，这适用于 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>

推荐阅读